Halo semuanya, apa kabar? Balik lagi bersama saya Sandika Gali di channel web programming Unpas Kita lanjutkan yuk pembelajaran kita mengenai function pada javascript Kalau di video sebelumnya kita udah bahas sekilas mengenai function itu apa, di video kali ini kita akan bahas lebih detail lagi mengenai bagaimana cara membuat sebuah function. Tapi sebelumnya kita bahas dulu mengenai cara kerja dari function itu sendiri ya Jadi sederhananya seperti ini, ketika kita bekerja dengan sebuah function, maka biasanya kita akan memiliki sebuah input atau sebuah nilai yang nantinya akan menjadi bahan atau istilahnya material gitu ya, bahan baku yang nantinya akan kita masukkan ke dalam function. Lalu nanti function itu sendiri akan mengerjakan sesuatu atau melakukan sesuatu terhadap bahan baku atau material tadi.
Sehingga nanti akan menghasilkan nilai baru. Jadi kurang lebih secara umum, cara kerja function itu seperti ini. Nah, function yang baik adalah function yang hanya mengerjakan satu hal saja.
Secara spesifik begitu. Jadi kalau saya bisa ilustrasikan, itu contohnya seperti ini. Atau saya kasih pertanyaan ke kalian.
Pernah nggak kalian menemukan sebuah alat atau sebuah mesin atau sebuah mekanisme yang bisa menerima inputan yaitu padi misalnya ya, lalu menghasilkan nasi goreng misalnya? Memungkinkan nggak? Atau ada nggak menurut kalian alat yang menerima inputannya padi dan menghasilkan nasi goreng yang siap dimakan? Kayaknya nggak ada ya. Karena untuk merubah padi menjadi sebuah nasi goreng yang siap dimakan, itu sepertinya membutuhkan tahapan yang panjang ya, proses yang sangat panjang.
Misalnya, dari padi itu kita akan masukkan dulu ke sebuah alat yang fungsinya itu merubah padi menjadi gabah ya misalnya. Jadi dari padi dirubah dulu menjadi gabah. Nah setelah itu, gabah juga. akan dimasukkan ke dalam mesin yang lain yang fungsinya merubah gabah tadi menjadi beras.
Lalu sampai sini apakah selesai? Belum ya, untuk menjadi nasi maka beras ini harus diproses dulu menggunakan misalnya rice cooker. Nah tapi apakah dari beras masuk rice cooker langsung jadi nasi? Enggak ya, nah ini membutuhkan satu buah inputan yang lain, yaitu air. Jadi mesin ini.
Membutuhkan lebih dari satu input. Yang pertama beras itu sendiri. Yang kedua air.
Dan lalu terakhir nasi juga akan diproses lagi dengan tambahan bahan baku yang lain. Lalu dimasak sehingga jadilah sebuah nasi goreng yang siap untuk dimakan. Laper-laper deh nih kalian. Begitu ya jadi prosesnya panjang.
Nah kalau kita lihat kenapa harus melalui proses yang panjang seperti itu. Ya ada beberapa hal. Seperti tadi yang saya tanya di awal, kayaknya nggak ada gitu sebuah mesin yang dapat melakukan semua hal itu sekaligus.
Kalaupun ada, mungkin kita akan khawatir dengan kebersihannya, kecepatan prosesnya, dan lain sebagainya. Ya jadi melalui tahapan yang panjang masuk ke dalam mesin atau alat yang fungsinya spesifik. Sehingga nanti itu akan menjadi bahan untuk kita... Untuk mengetahui dan menelusuri jika ada kesalahan.
Contohnya gini, ketika kalian makan nasi gorengnya ada nasi yang masih keras misalnya. Ini kalian pasti akan mikir, wah rice cookernya nggak bener nih. Jadi kalian sudah bisa tahu bagian mana yang melakukan kesalahan.
Nah gitu ya, mudah-mudahan nyambung nih ilustrasinya. Jadi ketika kita lihat ke dalam function di dalam pemrograman, nah itu mirip ya. Function ini adalah sebuah blok kode yang digunakan untuk melakukan tugas yang spesifik.
Jadi nanti, kalau misalkan kalian membuat sebuah function di dalamnya mengerjakan banyak hal, nah itu ada kemungkinan kalian melakukan kesalahan. Lalu yang kedua, block codenya itu dapat dipanggil berulang-ulang kali. Nah ini kelebihan dari function.
Kenapa? Sehingga nantinya memudahkan kita untuk melakukan penelusuran. Kalau ada kesalahan, kita gampang nanti mengetahui bagian mana di dalam program kalian yang error.
Dan ini terkait dengan reusability atau penggunaan ulang dari kode program kita. Begitu. Jadi ini penjelasan lebih detail mengenai function.
Atau supaya kalian lebih paham lagi, kita masuk ke contoh kasus. Misalnya gini, sederhana saja. Misalkan kita dihadapkan dengan sebuah kasus seperti ini.
Ceritanya, saya punya dua buah kubus. Kita sebut saja kubus A. dan kubus B.
Kalian ingat ya, tiap-tiap kubus itu memiliki sisi yang sama. Misalnya, kita akan membuat program untuk menjumlahkan volume dari kedua buah kubus ini. Simple aja ya. Kira-kira, dengan cara matematik, ini kita menyelesaikannya gimana?
Kita lihat ya. Menjumlahkan volume dari dua buah kubus. Kita lihat algoritmanya. Yang pertama, yang pasti kita harus tahu dulu ya, berapa sisi dari masing-masing kubusnya.
Kubus A dan kubus B tadi. Kita ambil contoh aja, misalnya kubus A sisinya 8, kubus B sisinya 3. Setelah ini, kita harus hitung volume dari masing-masing kubusnya. Gimana ngitung volume? Gampang ya, sisi x sisi x sisi. Jadi kita hitung dulu volume kubus A, 8 pangkat 3, lalu kita hitung volume kubus B, 3 pangkat 3. Nah setelah didapat volume masing-masing kubusnya, kita jumlakan hasilnya.
Betul ya? Jadi kita jumlakan 512 dan 27. Dan terakhir, kita akan dapatkan hasilnya, lalu istilahnya mengembalikan nilai jawabannya. Ini berapa nilainya? 539. Jadi ini cara kita secara matematik untuk menjumlahkan volume dari 2 buah kubus.
Nah sekarang kalau kita mau bikin pakai javascript. Coba gimana kodenya. Nah silahkan coba. Sekarang saya minta kalian coba buat kode javascriptnya sendiri. Pause dulu videonya.
Silahkan kerjakan dulu. Nanti kalau sudah selesai. Jalankan lagi videonya.
Nanti kita akan coba lihat sama tidak kita bikinnya ya. Oke teman-teman, jadi ceritanya sekarang saya sudah punya sebuah file HTML, simple aja, yang sudah saya hubungkan ke sebuah file javascript yang namanya script.js dan disini saya sudah punya file script.js nya. Ya jadi ceritanya kita akan buat sebuah program yang menghitung luas 2 buah kubus. Kita bikinnya tanpa menggunakan function dulu.
Jadi yang pertama kita harus ketahui dulu berapa sisi dari masing-masing kubusnya. Jadi misalkan gini, saya punya sebuah variable yang saya kasih nama A, untuk mengetahui sisi. Dari A-nya saya isi dengan 8 misalnya. Lalu kubus yang kedua, sisinya B misalnya, saya kasih sisinya 3. Lalu nanti untuk menampung volume-nya, saya juga butuh sebuah variable misalnya namanya volume A begini.
Ingat ya, nama variable tidak boleh mengandung spasi. Lalu kita punya juga volume B. Seperti ini. Dan terakhir, untuk menyimpan jumlahnya, kita butuh variable baru. Kita kasih nama aja total misalnya.
Begitu ya. Jadi kita siapkan dulu tempat penampungnya atau wadahnya. Baru sekarang kita lakukan proses matematiknya. Yang pertama, untuk menghitung volume A, gimana caranya? Gampang aja ya.
Sisi A dikali sisi A dikali sisi A. Begini. Untuk menghitung volume B, Sisi B kali sisi B kali sisi B.
Dan terakhir, totalnya adalah jumlah dari volume A ditambah dengan volume B. Gini ya. Ini kalau kita save, lalu kita jalankan. Klik kanan, open in browser.
Ini kosong ya, tidak tampil apa-apa. Kalau kita lihat inspect element, console juga kosong. Kenapa nggak ada angkanya? Karena kita baru menuliskan ke dalam variable saja. Kita belum cetak ke layar.
Tapi kita bisa pastikan bahwa sudah ada nilai yang tersimpan di dalam memory. Di dalam variable total ini. Jadi kalau misalkan saya ingin lihat hasilnya. Kita bisa simpan saja di console. Menggunakan console.log total.
Kita kembali ke browser. Refresh. Nah maka muncul itu. Jumlahnya atau total nilainya 539. Nah ini ketika kita menjumlahkan volume 2 buah kubus seperti ini. Sebetulnya gak ada masalah, kodenya udah jalan dengan baik.
Nah tapi gimana kalau misalkan saya punya 2 buah kubus baru. Misalnya kubus C dan kubus D. Yang memiliki sisi yang berbeda juga. Coba kira-kira gimana.
Itu kan artinya kita harus punya lagi variable baru. Var C misalnya. 10 misal gitu ya.
Kita punya var D. 15. Terus kita hitung lagi. Volume C.
volume D. Nah, di sini mulai jadi tidak efektif. Kita punya banyak variable, lalu kita melakukan hal yang sama berulang-ulang.
Itu kurang efektif. Nah, di sinilah kita butuh sebuah function. Supaya kita nggak perlu lagi mengulang-ulang hal yang sama. Paham nggak?
Nah, gimana bikin functionnya? Kita lihat. Jadi, membuat functionnya seperti ini.
Yang pertama, nanti kalian butuh sebuah keyword function. Nah, keyword function ini kalian gunakan untuk memberitahu interpreter javascript bahwa kita akan mulai menulis sebuah fungsi. Lalu, kita bungkus functionnya atau kita batasi functionnya dengan menggunakan kurung-kurawal sebagai penanda bahwa ini adalah awal dan akhir dari fungsi yang akan kita buat.
Keyword function kurung-kurawal, jangan lupa. Selanjutnya, Kita harus beri nama functionnya dengan nama yang menjelaskan apa yang akan kalian lakukan di dalam functionnya. Jadi kalian ngasih namanya itu harus jelas. Jangan kasih nama function itu function X, function Y.
Tanpa menjelaskan apa yang dikerjakan di dalamnya. Jadi silahkan beri nama function yang cukup jelas. Namanya agak panjang, nggak masalah. Lalu kalian selalu tuliskan kurung setelah nama functionnya.
Yang nantinya akan kita gunakan sebagai tempat untuk menyimpan bahan baku. Atau disebut juga dengan parameter atau argumen. Yang nantinya bahan baku ini kita akan pakai di dalam functionnya. Seperti ilustrasi yang sudah kita lihat tadi di awal ya.
Selanjutnya, parameter ini atau argumen ini adalah data atau nilai yang dikirim dari luar pada saat nanti functionnya dipanggil. Untuk nanti digunakan di dalam function. Nanti kalian anggap aja parameter ini sebagai variable khusus. Yang bisa digunakan di dalam function. Parameter itu boleh ada atau tidak.
Jadi boleh kosong nih kurungnya. Tapi kurungnya tetap harus ada meskipun parameternya gak ada. Jadi kalau gak ada parameternya kurung harus tetap ditulis. Tapi kalau ada parameternya.
Silakan kalian boleh tulis sebanyak mungkin sesuai kebutuhan. Ya, selanjutnya. Sebuah function itu biasanya mengembalikan sebuah nilai. Cara mengembalikannya kalian menggunakan keyword return terus diikuti dengan nilai kembaliannya apa. Nah, kegunaan dari return ini adalah untuk ngasih tahu si interpreter javascriptnya bahwa kita telah selesai.
Mengerjakan sesuatu dan inilah hasilnya gitu. Ya jadi return itu gunanya seperti itu. Dan juga return ini digunakan juga sebagai cara untuk memberhentikan functionnya. Jadi nanti ketika kode kalian sampai pada keyword return, functionnya berhenti berjalan.
Nah ini penting kalian pahami karena mungkin aja di dalam function kalian nantinya akan ada 2 return. Loh kok bisa 2 return ya? Returnnya mungkin nanti disimpan di dalam blok pengkondisian misalnya.
Jadi if apa return yang mana, else return yang lain. Jadi mungkin aja di dalam function ini mengembalikan dua nilai, tapi tergantung kondisinya apa. Jadi kalau kita masukkan algoritma penghitungan volume kita tadi, yang pertama, ketahui sisi masing-masing kubus.
Nah ini sudah ya, nanti kita simpan ke dalam parameternya ke sini. Jadi di sini sudah ada. Lalu kita juga sudah bisa mengembalikan nilai jawabannya menggunakan return ini.
Sehingga kita bisa punya total. Bikin dulu totalnya. Nanti fungsi ini akan mengembalikan total. Lalu tinggal dua lagi yang akan kita lakukan. Kita tinggal tulis seperti tadi, volume A.
volume B berapa Dan total berapa. Paham ya? Sekarang coba kita lakukan ke dalam kode kita tadi.
Sekarang kita akan ubah kode kita ini menjadi sebuah function ya. Ini kita hapus dulu. Jadi sekarang kita punya function.
Lalu nama fungsinya apa? Misalnya jumlah volume 2 kubus. Misalkan seperti itu.
Jangan lupa kasih kurung. Lalu nanti ini parameternya ada A dan B. Pisahkan dengan menggunakan koma, lalu jangan lupa menggunakan kurung kurawal, dan disini baru kita jalankan perintah-perintahnya.
Kita punya variable untuk menyimpan volume A, variable untuk menyimpan volume B, dan variable untuk menyimpan total. Lalu kita hitung satu-satu volume A itu menghitung sisi A, volume B itu menghitung sisi B. Dan terakhir total itu menjumlahkan volume A ditambah volume B. Dan volumenya akan mengembalikan nilai total. Begini.
Jadi sekarang kita punya sebuah function. Nah ini kalau kita jalankan. Saya refresh. Belum tampil apa-apa.
Karena fungsi ini baru kita buat saja. Belum kita jalankan. Nah itu dua hal yang berbeda ya. Ini baru kita buat. Nah cara menjalankannya gimana?
Cara menjalankannya simple aja. Kalian cukup tuliskan nama functionnya. Begini. Ikuti dengan kurung buka dan kurung tutup. Lalu jika ada parameter.
Simpan parameternya disini. Ya misalkan Nah ini artinya. 8 akan dikirim. Sebagai parameter A.
Dan 3 nanti akan dikirim sebagai parameter B. Jadi nanti 8 akan masuk ke sini. Ke variable A. Dan 3 akan masuk ke sini. Ke variable B.
Sekali lagi ini membuat function. Dan yang ini menjalankan function. Nah sekarang gimana kalau kita jalankan? Saya save.
Lalu saya refresh. Nah ternyata sama ya tidak tampil apa-apa juga. Kenapa?
Ini karena sama seperti kita coba tadi, ini baru dieksekusi atau dijalankan. Sebetulnya nilainya sudah ada di dalam memori, tapi belum kita tampilkan aja ke layar. Kalau mau ditampilkan, kalian bisa simpan aja di dalam konsol. Seperti ini ya, kita simpan di dalam konsol.
Kalau saya refresh, nanti dia muncul tuh ya. Atau, ya kalian simpan aja misalnya di dalam alert. Ya, silakan aja.
Ketika saya jalankan, akan tampil di sini. Paham ya? Itu membuat function dan menjalankan function. Nah sekarang enaknya gini, kalau kita sudah membuat sebuah function, kita bisa jalankan berulang-ulang. Misalnya, kita sudah coba hitung kubus 8 dan kubus 3. Misalkan sekarang saya mau hitung yang lain.
Misalkan sekarang saya punya kubus 10 dan kubus 15. Ini saya bisa hitung berulang-ulang. Ini saya save dulu. Lalu saya jalankan, saya refresh.
Muncul ya kubus yang pertama. 8 dan 3. Kalau saya oke. Nah ini muncul hasil kubus yang kedua.
Jadi ini maksudnya kita buatnya sekali. Tapi kita bisa panggilnya berulang-ulang. Menggunakan bahan baku yang berbeda-beda. Gitu ya, mudah-mudahan kalian paham nih. Baik, jadi mungkin itu ya penjelasan mengenai cara kita membuat function.
Mudah-mudahan teman-teman paham dengan penjelasan singkatnya. Kalau misalkan bingung, nggak usah khawatir. Silahkan tuliskan aja pertanyaannya di kolom komentar di bawah video Youtubenya. Nanti akan coba saya jawab.
Dan nanti di video selanjutnya kita akan bahas lebih lanjut lagi mengenai penggunaan function ini. Jadi teman-teman nggak usah khawatir kalau yang sekarang masih merasa agak kebingungan. Sampai sini dulu videonya, jangan lupa untuk selalu dukung kita dengan klik like videonya, share ke teman-teman dan subscribe di channel web programming unpass buat yang belum subscribe.
Dan terakhir, terima kasih teman-teman sudah mendaksikan videonya, saya Sandika Gali pamit dan satu lagi jangan lupa titik komen.