fungsi JavaScript. Bagian 7 Kursus JavaScript dari Pemula hingga Mahir dalam 10 posting blog

Fungsi JavaScript – daftar isi:

1. Fungsi JavaScript – informasi dasar
2. Fungsi murni

Sampai sekarang kita telah melihat aspek utama JavaScript bersama dengan beberapa praktik terbaik pengkodean paling umum yang harus kita ikuti. Praktik yang disebut ini ada karena suatu alasan dan saat kita menggunakannya, praktik tersebut akan menyelamatkan kita dari banyak kesalahan dan frustrasi yang akan kita hadapi sebaliknya. Salah satu praktik terbaik yang telah kita lihat adalah mengikuti prinsip KERING, yang pada dasarnya mengatakan: Jangan Ulangi Diri Sendiri. Salah satu cara kami menerapkan prinsip ini adalah dengan menggunakan loop dalam program kami, lebih khusus lagi "untuk loop" menghemat banyak waktu dan kode. Dalam tutorial ini kita akan melihat blok bangunan utama lainnya dalam pemrograman, dan itu disebut "fungsi".

Fungsi JavaScript – informasi dasar

Fungsi sangat umum dalam pemrograman, dan ini termasuk JavaScript juga. Faktanya, mereka sangat umum sehingga beberapa kerangka kerja JavaScript seperti React, dibangun dengan memanfaatkan fungsi JavaScript sebagai blok bangunan mendasar untuk membuat ujung depan situs web. Dan mereka melakukan ini untuk alasan yang bagus. Fungsi JavaScript memberikan fleksibilitas tinggi, sambil memberikan kode yang sangat dapat diprediksi dan modular. Dan itu menghasilkan kode yang jauh lebih jelas dengan lebih sedikit pengulangan dan lebih sedikit kesalahan. Salah satu hal pertama yang harus Anda ketahui tentang fungsi adalah bahwa ada dua jenis fungsi utama. Mereka adalah "fungsi murni" dan "fungsi tidak murni". Secara umum kita akan ingin menggunakan fungsi murni di mana kita bisa, sebanyak mungkin. Fungsi murni memberikan banyak keuntungan yang membuatnya lebih mudah digunakan dibandingkan dengan fungsi tidak murni. Mari kita lihat fungsi JavaScript murni terlebih dahulu dan kemudian selami fungsi tidak murni juga.

Fungsi murni

Fungsi murni pada dasarnya adalah fungsi yang mengikuti aturan tertentu. Dan karena mereka mengikuti aturan itu, mereka sangat mudah diprediksi, lebih mudah untuk di-debug dalam sistem yang lebih besar, modular bersama dengan beberapa keuntungan lainnya.

Fungsi murni menerima beberapa input dan pengembalian dan beberapa output. Itu tidak mengubah input secara langsung atau tidak berinteraksi dengan lingkungan dengan cara lain. Yang mengatakan itu tidak mengirimi Anda peringatan, memberi Anda pernyataan saat melakukan sesuatu yang lain, atau tidak berinteraksi dengan lingkungannya dengan cara lain.

Dengan cara ini ketika Anda bekerja dengan fungsi murni, Anda tahu bahwa di mana pun Anda menjalankan kode Anda atau ketika Anda menjalankan kode Anda, selama Anda memberikan input yang sama, Anda akan mendapatkan output yang sama. Mari kita lihat itu dengan beberapa contoh.

// double the initial number
function double(num){
    return num * 2;
}

// triple the initial number
function triple(num){
    return num * 3;
}

// add 100 to the initial number
function add100(num){
    return num + 100;
}

// add two numbers
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// multiply two numbers
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Semua fungsi javascript di atas adalah fungsi murni. Jika dilihat lebih dekat, Anda mungkin telah melihat pola yang kami gunakan saat membuat fungsi murni. Langkah pertama adalah kita menulis kata kunci “fungsi” untuk memberitahu JavaScript bahwa kita ingin mendefinisikan suatu fungsi.

Selanjutnya kita beri nama fungsi, sebaiknya nama ini pendek, namun cukup deskriptif bagi seseorang yang datang untuk memahami apa yang dilakukan fungsi tersebut. Misalnya jika kita menjumlahkan 100 pada suatu bilangan, kita dapat menamai fungsinya dengan “tambah 100”, jika kita menggandakan suatu bilangan, kita dapat menamakan fungsinya sebagai “ganda” dan seterusnya.

Setelah kita menamai fungsi dengan tepat, langkah selanjutnya adalah memberikan beberapa input. Kami memberikan input di dalam tanda kurung dan jika kami memiliki banyak input, kami memisahkannya dengan koma. Sama seperti yang kami lakukan di fungsi "multiplyTwoNums". (Juga, sebagai catatan tambahan, angka biasanya disebut sebagai singkatan “nums” dalam pemrograman, jadi jika kita menamai suatu fungsi, kita dapat menggunakan pengetahuan umum itu untuk memiliki nama fungsi yang pendek namun deskriptif.)

Input yang kami berikan ke fungsi juga biasa disebut sebagai "parameter", ketika kami membuat fungsi javascript, kami memutuskan berapa banyak parameter yang akan dimiliki fungsi tersebut. Ketika kami memutuskan penggunaan fungsi, kami menyediakan parameter tersebut dengan "nilai". Nilai-nilai yang kami berikan saat menggunakan fungsi juga biasa disebut sebagai "argumen". Jadi ketika kita memberikan input untuk fungsi tersebut, proses ini juga disebut sebagai "argumen lewat" ke suatu fungsi. Mari kita lihat beberapa contohnya.

// first let's define the function that takes a number 
// and multiplies it by 10
function multiplyBy10(num1){
    return num1 * 10;
}

// now let's call that function
// save the result into a constant
// and display the results
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 is here is the parameter.
// we passed the value 3 as an argument to the function.
// we saved the results of the function
// to a constant called bigNum.
// we displayed the constant called bigNum to the user.

Seperti yang Anda lihat pada kode di atas, bahkan ketika kami ingin menampilkan sesuatu kepada pengguna, kami memisahkan fungsi tersebut dari fungsi peringatan. Jika kita menampilkan hasil kepada pengguna di dalam fungsi, ini akan membutuhkan fungsi untuk berinteraksi dengan bagian lain dari komputer dan akan membuat fungsi kita tidak murni. Jadi secara umum, kami ingin menggunakan fungsi untuk memberi mereka masukan dan mengharapkan nilai yang dikembalikan. Ketika kita mendapatkan nilai yang dikembalikan itu, maka kita sebenarnya dapat menampilkannya atau melakukan fungsi javascript lain dengannya tergantung pada kebutuhan kita, tetapi intinya adalah tetap memperhatikan menampilkan hasil dan menghitung hasilnya secara terpisah.

Jadi sampai sekarang kita telah melihat bahwa kita dapat menggunakan kata kunci “fungsi” untuk memulai mendeklarasikan fungsi, kemudian kita menamai fungsinya dengan tepat, kemudian kita membuka dan menutup tanda kurung dan memberi tahu fungsi tersebut parameter yang diperlukan, kemudian kita membuka kurung kurawal dan beri tahu fungsi apa yang ingin kita lakukan, begitu kita sampai pada hasil, kita mengembalikan hasil itu dengan kata kunci "kembali". Dan kemudian kita menutup kurung kurawal. semua langkah ini diperlukan untuk mendefinisikan fungsi murni. Sekarang kita memiliki fungsi, kita dapat menggunakan fungsi di bagian lain dari program kita. Menggunakan fungsi biasanya disebut sebagai "memanggil fungsi".

Memanggil fungsi jauh lebih sederhana daripada mendeklarasikan fungsi. Untuk memanggil suatu fungsi, kita dapat menggunakan namanya, tanda kurung buka, berikan beberapa argumen, dan tutup tanda kurung. Ketika kami melakukan ini, fungsi akan mengembalikan nilai pengembalian yang kami tetapkan. Bergantung pada apa yang ingin kita lakukan dengan nilai yang dikembalikan itu, kita dapat menetapkannya ke variabel atau konstanta, kita dapat melakukan lebih banyak perhitungan dengannya, kita dapat mengirimkannya ke komputer lain, atau kita dapat langsung menampilkan hasilnya juga. Mari kita lihat beberapa contohnya.

// let's start with a function that takes two arguments
// multiplies them and return the result.
// we can either directly return the result,
// or we can temporarily create a constant 
// and return that constant as well.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// two functions above will give us the exact same result
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// we can check the equality of the function results 
// with another function
function checkEquality(number1, number2){
    return number1 === number2;
// if the results of both functions are the same,
// the checkEquality function will return "true" 
// as a boolean data type
const isEqual = checkEquality(result1, result2);
// now we can use that boolean value to display a message
if (isEqual){
    alert("Both give the same result!");
} else {
   alert("They are not the same thing!");
}

Menjalankan kode di atas di Cuplikan Chrome akan memberi kita hasil berikut:

Sampai sekarang kami telah bekerja dengan fungsi murni, dan ini biasanya yang paling sering kami tuju untuk dikodekan. Tetapi itu tidak berarti bahwa Anda hanya akan bekerja dengan fungsi murni. Setelah Anda memahami fungsi murni, fungsi tidak murni relatif lebih mudah. Ketika kita mendefinisikan suatu fungsi, atau mendeklarasikan suatu fungsi, setelah menggunakan nama fungsi, sebenarnya kita tidak perlu memberikan parameter apapun. Dalam hal ini, kita akan membiarkan tanda kurung kosong, kita juga tidak harus mengembalikan sesuatu dari fungsi tersebut.

Terlebih lagi, karena kita dapat menulis kode apa pun di dalam kurung kurawal dari suatu fungsi, kita dapat berinteraksi dengan dunia luar, mengirim dan menerima data, mengubah data yang ada, menampilkan peringatan, dan sebagainya. Melakukan semua ini tidak dilarang, dan menambahkan pernyataan console.log selama proses pengembangan kode sebenarnya sangat membantu. Itu sebabnya kami tidak langsung menjauhi fungsi yang tidak murni, tetapi karena mereka dapat menyebabkan banyak gesekan dan kesalahan dalam kode, termasuk membuat kode Anda lebih sulit untuk diuji, kami akan berusaha memisahkan tugas menjadi fungsi javascript murni sebanyak mungkin. Bahkan ketika kami menggunakan untuk membuat fungsi kami tidak murni dengan menambahkan pernyataan alert atau console.log, kami biasanya ingin menghapusnya dari kode kami baik dengan menghapusnya atau mengomentarinya.

Mari kita lihat beberapa contohnya.

// greet user with an impure function
// it takes no arguments and gives no return
// it also interacts with the outside world by 
// displaying an alert
function greet(){
    alert("Hello User!");
}
// note that the results will not show 
// unless we call the function
greet();
// make some calculations and console log them
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// this will show the result in the JavaScript console we have below
// The console we just used is highly used in programming
// including in JavaScript.
// console.log statements can be really helpful 
// in telling you what is happening inside your program
// this way if something unexpected happens 
// you can see exactly where and when it happens
squareNum(7);
function multiplyTwoNums(num1, num1){
    console.log("First number is " + num1);
    console.log("Second number is " + num2);
    const result = num1 * num2;
    console.log("The resulting multiplication is " + result);
}

// lets call the function above with two numbers we choose
// and check our JavaScript console for console logs
multiplyTwoNums(5, 7);

Menjalankan kode di atas akan menghasilkan sebagai berikut:

Seperti yang Anda lihat dari output, kami memiliki pernyataan peringatan yang ditampilkan dari dalam fungsi pertama yang kami jalankan. Kami memiliki jumlah yang dihasilkan dari 49 logout di konsol JavaScript. Tepat setelah itu, kami memiliki output yang lebih rinci di konsol tentang fungsi ketiga. Membuat pernyataan console.log cukup umum dalam pemrograman, tergantung pada bahasa pemrograman yang Anda gunakan, nama persisnya dapat berubah, tetapi idenya tetap sama. Dengan pernyataan console.log, kita dapat melihat ke dalam program kita dan memahami kode kita dengan lebih baik. Ini terutama alat yang berguna ketika ada yang tidak beres dalam program Anda dan Anda mencoba mencari tahu di mana tepatnya Anda melakukan kesalahan.

Dalam tutorial berikutnya kita akan melihat topik penting lainnya dalam JavaScript yang disebut objek. Sebelum melanjutkan ke tutorial berikutnya, ada baiknya untuk meninjau bagian ini sekali lagi agar konsepnya dapat meresap. Saya juga sangat menyarankan untuk mengetik contoh yang kami kerjakan dan mengalaminya secara langsung. Saat Anda siap, kami akan melanjutkan dengan objek dalam JavaScript di tutorial berikutnya.

Pengarang: Robert Whitney

Pakar JavaScript dan instruktur yang melatih departemen TI. Tujuan utamanya adalah meningkatkan produktivitas tim dengan mengajari orang lain cara bekerja sama secara efektif saat coding.

Lihat semua posting

Kursus JavaScript Dari Pemula hingga Mahir dalam 10 posting blog:

1. Bagaimana cara memulai pengkodean dalam JavaScript?
2. Dasar-dasar JavaScript
3. Variabel dan tipe data yang berbeda dalam JavaScript
4. Cuplikan dan struktur kontrol
5. Perulangan while dan perulangan for
6. Array Jawa
7. Fungsi JavaScript
8. objek JavaScript
9. Metode JavaScript dan banyak lagi
10. Ringkasan kursus JavaScript