Cara menggunakan fungsi javascript

Pada saat membuat sebuah aplikasi biasanya kita akan menemukan beberapa pernyataan atau ekspresi yang sama yang dibuat secara berulang-ulang, jika hal ini dilakukan dapat merepotkan maka dari itu hadir fungsi-fungsi dalam JavaScript

Tidak hanya JavaScript, sebagian besar bahasa pemrograman juga memiliki fungsi, secara umum perilakunya sama, hanya cara penulisannya saja yang berbeda

Mari gunakan studi kasus, untuk mencari tahu kapan dan mengapa kita perlu menggunakan fungsi

// dibagian lain kode kita
const sapaReza = 'Hi, Reza. Semoga harimu menyenangkan.';

// dibagian lain kode kita
const sapaUcup = 'Hi, Ucup. Semoga harimu menyenangkan';

// dibagian lain kode kita
const sapaBambang = 'Hi, Bambang. Semoga harimu menyenangkan';

Perhatikan kode di atas, kita menggunakan string yang sama berulang kali yang hanya mengubah nama (

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Bayangkan jika string atau variabel tersebut berada di bagian lain dari kode kita, apalagi file yang berbeda

Jika kita ingin mengubah tulisan

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Mari gunakan fungsi untuk menyelesaikan masalah

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Kode di atas sama dengan yang sebelumnya. Dengan menggunakan fungsi, kode tidak hanya sederhana, tetapi juga lebih mudah dikelola

Jika kita ingin mengubah teks

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Nilai variabel yang diinisialisasi dengan fungsi akan berubah secara otomatis

Untuk nilai dinamis atau variabel seperti nama, bisa dijadikan parameter, ini akan berubah secara otomatis tergantung nilai atau argumen yang kita masukkan saat fungsi dipanggil

Mari belajar lebih banyak

Apa itu Fungsi?

Fungsi adalah "subprogram" yang dapat dipanggil di bagian lain dari kode kita atau di dalam fungsi itu sendiri (rekursi). Fungsi dapat memiliki serangkaian pernyataan atau pernyataan di dalam tubuh atau blok fungsi

Dalam JavaScript, fungsi dapat menerima dan selalu mengembalikan nilai. Jika kita membuat fungsi yang tidak mengembalikan, fungsi tersebut akan tetap mengembalikan nilai

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Jangan bingung antara fungsi dan metode, fungsi biasanya disebut metode jika merupakan properti objek

Materi tentang fungsi sebenarnya cukup banyak dan kompleks, namun disini kita akan mempelajari dasar-dasarnya saja

Jenis Fungsi

Ada banyak jenis fungsi yang bisa kita gunakan di JavaScript, kali ini kita akan mempelajari fungsi dasar dan yang paling sering digunakan

Kita akan mempelajari deklarasi fungsi, ekspresi fungsi, dan fungsi panah yang masing-masing memiliki perilaku yang berbeda

Deklarasi Fungsi

Deklarasi Fungsi dibuat menggunakan kata kunci

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

hello();

function hello() {
  console.log('hello world');
}

hello();

function hello() {
  console.log('hello world');
}

Sintaksis

function name(param) {
  statements;
}

Keterangan

• nama. nama fungsi
• parameter (opsional). parameter atau nama untuk nilai argumen yang diteruskan ke fungsi, batas parameter tergantung pada mesin, jika lebih dari satu parameter dipisahkan dengan koma
• pernyataan (opsional). pernyataan atau pernyataan termasuk ekspresi, logika, pengulangan dan sebagainya

Contoh

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

hello();

function hello() {
  console.log('hello world');
}

hello();

function hello() {
  console.log('hello world');
}

Deklarasi Fungsi bersifat hoisted atau diangkat, artinya kita dapat memanggil fungsi sebelum deklarasi

hello();

function hello() {
  console.log('hello world');
}

Perbedaan Deklarasi Fungsi dengan fungsi lainnya, Deklarasi Fungsi selalu dimulai dengan kata kunci

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Ekspresi Fungsi

Mirip dengan Deklarasi Fungsi, Ekspresi Fungsi dibuat menggunakan kata kunci

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

hello();

function hello() {
  console.log('hello world');
}

hello();

function hello() {
  console.log('hello world');
}

Sintaksis

function name(param) {
  statements;
}

Keterangan

• nama (opsional). nama fungsi, biasanya dibuat anonim
• parameter (opsional). parameter atau nama untuk nilai argumen yang diteruskan ke fungsi, batas parameter tergantung pada mesin, jika lebih dari satu parameter dipisahkan dengan koma
• pernyataan (opsional). pernyataan atau pernyataan termasuk ekspresi, logika, pengulangan dan sebagainya

Ekspresi Fungsi Bernama

Ekspresi Fungsi Bernama adalah Ekspresi Fungsi yang memiliki nama

Nama variabel akan selalu digunakan sebagai nama fungsi, oleh karena itu nama yang tepat setelah kata kunci

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Contoh

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

Ekspresi Fungsi Anonim

Ekspresi Fungsi Anonim adalah Ekspresi Fungsi anonim, biasanya digunakan sebagai panggilan balik, tidak diinisialisasi ke variabel

Pada contoh di bawah ini, kami mengulangi elemen array menggunakan metode

hello();

function hello() {
  console.log('hello world');
}

Metode

hello();

function hello() {
  console.log('hello world');
}

const arr = [1, 2, 3, 4, 5];

arr.forEach(function (elemen, index, arr) {
  console.log('elemen = ' + elemen + ' index = ' + index);
});

/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/

Kode di atas sama dengan di bawah jika menggunakan Named Function Expression

const arr = [1, 2, 3, 4, 5];

const logElementAndIndex = function (elemen, index, arr) {
  console.log('elemen = ' + elemen + ' index = ' + index);
};

arr.forEach(logElementAndIndex);

/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/

Ekspresi Fungsi yang Segera Dipanggil (IIFE)

Seperti namanya, Ekspresi Fungsi Segera Dipanggil adalah Ekspresi Fungsi yang langsung dipanggil

Untuk membuat IIFE kita dapat menggunakan dua pasang tanda kurung buka dan tutup yang bersebelahan

function name(param) {
  statements;
}

Tanda kurung pertama adalah tempat mendeklarasikan Ekspresi Fungsi Anonim

Tanda kurung kedua digunakan untuk memanggil fungsi, jika fungsi memiliki parameter, kita dapat meneruskan nilai atau argumen ke dalam tanda kurung kedua

Contoh IIFE tanpa parameter

(function () {
  console.log('hello world');
})();

// Output: hello world

Contoh IIFE dengan parameter

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Fungsi Panah

Fungsi Panah mirip dengan Ekspresi Fungsi, tetapi tidak memerlukan kata kunci

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Fungsi panah dimulai dengan tanda kurung kurawal sepasang parameter

hello();

function hello() {
  console.log('hello world');
}

function name(param) {
  statements;
}

hello();

function hello() {
  console.log('hello world');
}

Sintaksis

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Keterangan

• parameter (opsional). parameter fungsi, jika lebih dari satu dipisahkan dengan koma, jika hanya ada satu parameter kurung kurawal dapat dihilangkan
• pernyataan (opsional). pernyataan atau pernyataan termasuk ekspresi, logika, pengulangan dan sebagainya

Fungsi Panah Bernama

Named Arrow Function adalah fungsi panah bernama, biasanya diinisialisasi menjadi variabel, nama variabel digunakan sebagai nama fungsi

Contoh

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Karena fungsi di atas hanya menerima satu parameter, kita dapat menghapus tanda kurung

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Karena fungsi di atas hanya memiliki satu ekspresi dan mengembalikan nilai yang dihasilkan oleh ekspresi, kita dapat mengubahnya menjadi satu baris dengan menghapus kata kunci

function name(param) {
  statements;
}

function name(param) {
  statements;
}

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Ketiga contoh Named Arrow Function di atas memiliki perilaku yang sama walaupun ditulis dengan cara yang berbeda

Fungsi Panah Anonim

Fungsi Panah Anonim adalah fungsi panah anonim, biasanya digunakan sebagai panggilan balik

Mari kita gunakan contoh yang sama dengan Ekspresi Fungsi Anonim, tetapi kita mengubah panggilan balik dengan Fungsi Panah Anonim

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Kode diatas sama dengan dibawah jika menggunakan Named Arrow Function

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Fungsi Panah Segera Dipanggil (IIAF)

Fungsi Panah Segera Dipanggil (IIAF) adalah fungsi panah yang akan langsung dipanggil seperti IIFE

Contoh tanpa parameter

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Contoh dengan parameter

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Fungsi Mengembalikan Nilai

Dalam JavaScript, suatu fungsi akan selalu mengembalikan nilai, jika fungsi yang dibuat tidak mengembalikan nilai, maka nilai yang dikembalikan adalah

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Jika kita ingin membuat fungsi yang mengembalikan nilai tertentu, kita harus menggunakan kata kunci

function name(param) {
  statements;
}

Mari kita lihat perbedaannya

Contoh fungsi yang mengembalikan nilai

Karena

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

function name(param) {
  statements;
}

const sapa = (nama) => 'Hi, ' + nama + '. semoga harimu menyenangkan.';

const sapaReza = sapa('Reza'); // Hi, Reza. Semoga harimu menyenangkan.
const sapaUcup = sapa('Ucup'); // Hi, Ucup. Semoga harimu menyenangkan.
const sapaBambang = sapa('Bambang'); // Hi, Bambang. Semoga harimu menyenangkan.

Contoh fungsi yang tidak mengembalikan nilai

Perhatikan bahwa tidak ada kata kunci

function name(param) {
  statements;
}

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

function name(param) {
  statements;
}

Lingkup Fungsi

Dalam JavaScript setiap fungsi membuat ruang lingkup baru, ini terkait dengan penutupan istilah, tetapi tidak akan dibahas secara rinci di sini

Untuk memudahkan pemahaman, mari langsung gunakan studi kasus

Lihat kode di bawah ini, kita mendeklarasikan variabel bernama

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

Coba tebak, bisakah kita melakukannya?

function name(param) {
  statements;
}

Jawabannya adalah tidak. Kode di atas mengembalikan ReferenceError yang Tidak Tertangkap. nama tidak ditentukan

Bagaimana jika variabel yang dideklarasikan di luar fungsi digunakan di dalam fungsi?

function name(param) {
  statements;
}

Nah ini bisa

Jadi kesimpulannya, variabel yang dideklarasikan di dalam fungsi atau lingkup fungsi tidak bisa diakses di luar fungsi, sedangkan variabel yang dideklarasikan di luar fungsi bisa diakses di dalam fungsi

Ibarat jendela mobil, dia bisa melihat ke luar tapi bagian luar tidak bisa melihat ke dalam

Apa pun kata kunci variabel dan jenis fungsi yang digunakan, cakupan fungsinya memiliki perilaku yang sama

Fungsi Memanggil

Suatu fungsi tidak akan dieksekusi sampai kita memanggilnya

Saat membuat function, berarti kita baru saja mendeklarasikan function tersebut belum digunakan atau dipanggil, apapun jenis function yang dideklarasikan, kecuali Anonymous Function, IIFE, dan IIFA

Untuk memanggil suatu fungsi kita dapat menuliskan nama fungsi yang ingin kita panggil diikuti dengan kurung kurawal. Jika fungsi memiliki parameter, kita dapat melewatkan nilai atau argumen,

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

Contoh kode di bawah ini tidak akan menjalankan fungsi karena kita baru saja mendeklarasikan atau membuatnya

Pernyataan di dalam fungsi tidak akan dieksekusi, sehingga tidak akan mempengaruhi atau menghasilkan nilai apapun, tetapi ini akan disimpan dalam memori

function name(param) {
  statements;
}

Contoh pemanggilan fungsi

function name(param) {
  statements;
}

Jika fungsi dipanggil tanpa tanda kurung

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

function name(param) {
  statements;
}

Parameter dan Argumen Fungsi

Parameter adalah nama variabel atau nama alias dari argumen atau nilai yang diteruskan ke badan fungsi. Parameter ditulis di dalam kurung kurva fungsi

Sedangkan argumen adalah nilai yang dilewatkan saat fungsi dipanggil

Parameter akan diinisialisasi dengan nilai argumen yang diteruskan. Kita dapat melewatkan nilai dari tipe data apa pun, apakah itu primitif, non-primitif, atau fungsi

Perhatikan kode di bawah ini, karena kita melanjutkan nilai

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

function name(param) {
  statements;
}

Urutan Parameter dan Argumen

Urutan argumen harus sesuai dengan parameter fungsi

Jika kita ingin menginisialisasi parameter pertama, kita harus memasukkan nilai tersebut sebagai argumen pertama, serta parameter berikutnya

Contoh ini sesuai dengan yang kami harapkan, karena kami memasukkan nilai nama

const arr = [1, 2, 3, 4, 5];

arr.forEach(function (elemen, index, arr) {
  console.log('elemen = ' + elemen + ' index = ' + index);
});

/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/

const arr = [1, 2, 3, 4, 5];

arr.forEach(function (elemen, index, arr) {
  console.log('elemen = ' + elemen + ' index = ' + index);
});

/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/

Argumen cocok dengan urutan parameter, sehingga menampilkan pesan seperti yang diharapkan

function name(param) {
  statements;
}

Lihat kode di bawah ini, ini menghasilkan pesan yang salah karena argumen pertama

const arr = [1, 2, 3, 4, 5];

arr.forEach(function (elemen, index, arr) {
  console.log('elemen = ' + elemen + ' index = ' + index);
});

/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

const arr = [1, 2, 3, 4, 5];

arr.forEach(function (elemen, index, arr) {
  console.log('elemen = ' + elemen + ' index = ' + index);
});

/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/

const arr = [1, 2, 3, 4, 5];

arr.forEach(function (elemen, index, arr) {
  console.log('elemen = ' + elemen + ' index = ' + index);
});

/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/

function name(param) {
  statements;
}

Nilai Default Parameter

Dalam JavaScript, nilai default parameter fungsi adalah

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Jika kita tidak memberikan argumen atau nilai saat memanggil fungsi, maka parameter fungsi akan diinisialisasi dengan nilai

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Misalnya, fungsi

const arr = [1, 2, 3, 4, 5];

arr.forEach(function (elemen, index, arr) {
  console.log('elemen = ' + elemen + ' index = ' + index);
});

/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

const apakahGenap = function (num) {
  return num % 2 === 0;
};

apakahGenap(1); // false
apakahGenap(2); // true

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

function name(param) {
  statements;
}

Bagaimana jika kita ingin menentukan nilai default dari parameter itu sendiri?

Jadi, jika fungsi dipanggil tanpa argumen atau nilai maka yang digunakan adalah nilai yang kita tentukan, bukan

function apakahGenap(num) {
  return num % 2 === 0;
}

apakahGenap(1); // false
apakahGenap(2); // true

Parameter dapat diinisialisasi langsung di dalam kurung kurawal menggunakan nilai yang kita tentukan

Mari kita gunakan contoh kode yang sama seperti di atas, sekarang nama akan selalu memiliki nilai yang ditentukan (

const arr = [1, 2, 3, 4, 5];

const logElementAndIndex = function (elemen, index, arr) {
  console.log('elemen = ' + elemen + ' index = ' + index);
};

arr.forEach(logElementAndIndex);

/* output:
elemen = 1 index = 0
elemen = 2 index = 1
elemen = 3 index = 2
elemen = 4 index = 3
elemen = 5 index = 4
*/

Bagaimana cara membuat fungsi dalam JavaScript?

Bagaimana JavaScript berjalan?

Untuk apa fungsi JavaScript?

Apa cara yang benar untuk menggunakan file JavaScript dalam HTML?