Deklarasi function pada JavaScript dapat ditulis seperti ini:

Copy
1function updateDinoName(name) {
2  name = 't-rex';
3  return name;
4}
5
6const dinoName = 'brachio';
7
8updateDinoName(dinoName); // call function

Namun bentuk deklarasi function pada JavaScript tidak hanya satu, ada beberapa bentuk yang lain:

Function Expression

Pada function expression, function disimpan di dalam sebuah variable.

syntax

Copy
1const functionName = function (parameter) {
2  ...
3}

Copy
1const updateDinoName = function (name) {
2  name = 't-rex';
3  return name;
4};
5
6let dinoName = 'brachio';
7
8updateDinoName(dinoName); // call function

Perbedaan Function Declaration dengan Function Expression

Kita bisa memanggil function yang dibuat menggunakan Function Declaration meskipun deklarasi dilakukan setelah pemanggilan.

Copy
1let dinoName = 'brachio';
2
3updateDinoName(dinoName); // call function
4
5function updateDinoName(name) {
6  name = 't-rex';
7  return name;
8}

Sedangkan hal ini tidak berlaku untuk Function Expression.

Copy
1let dinoName = 'brachio';
2
3updateDinoName(dinoName); // ReferenceError: Cannot access 'updateDinoName' before initialization
4
5const updateDinoName = function (name) {
6  name = 't-rex';
7  return name;
8};

Hal ini disebut dengan Function Hoisting, yaitu sebuah mekanisme dimana JavaScript Engine akan memindahkan semua function declaration ke bagian atas source code sebelum dieksekusi.

Anonymous Function

Anonymous Function adalah function yang tidak memiliki nama.

Copy
1function() {
2    console.log('Hi Brachio');
3}

Penggunaan anonymous function biasa ditemukan pada Arrow function dan Immediately Invoked Function Expression (IIFE).

Arrow Function

Bisa dibilang arrow function adalah bentuk function yang paling simple.

Karena syntaxnya yang cukup sederhana, arrow function semakin sering digunakan ketimbang bentuk function yang lain.

Contoh:

Copy
1const updateDinoName = (name) => {
2  name = 't-rex';
3  return name;
4};
5
6let dinoName = 'brachio';
7
8updateDinoName(dinoName); // call function

Kita bisa menghilangkan parentheses() pada parameter sehingga menjadi:

Copy
1const updateDinoName = (name) => {
2  name = 't-rex';
3  return name;
4};

Contoh arrow function tanpa parameter:

Copy
1const sayHi = () => console.log('Hi Brachio!');
2
3sayHi(); // Hi Brachio

Contoh code pada pembahasan array.map() dapat lebih disederhanakan dengan mengubah bentuk function menjadi arrow function.

Copy
1const numbers = [1, 2, 3, 4, 5];
2
3function doubleIt(number) {
4  return number * 2;
5}
6
7const result = numbers.map(doubleIt);

menjadi:

Copy
1const numbers = [1, 2, 3, 4, 5];
2
3const result = numbers.map((number) => number * 2);

Arrow Function adalah bentuk function yang akan sering kita gunakan pada pembelajaran materi-materi selanjutnya

Immediately Invoked Function Expression (IIFE)

IIFE adalah bentuk function yang dieksekusi segera setelah function dideklarasikan.

Copy
1(function () {
2  console.log('Hello Brachio');
3})();

IIFE sering ditemui pada pemrograman JavaScript di browser terutama jika kita menggunakan plugin seperti jQuery.

Ketika sebuah function dideklarasikan, function tersebut akan ditambahkan ke window object.

Copy
1function sayHi() {
2  console.log('Hi Brachio');
3}
4
5// kita bisa memanggil function di atas dengan
6window.sayHi;

Tidak hanya function, ketika kita mendeklarasikan sebuah variable, variable tersebut juga ditambahkan ke window object.

Copy
1let word = 'Hi Brachio';
2
3console.log(window.word); // 'Hi Brachio'

Hal ini tidak terlalu menjadi masalah jika nama function dan variable tersebut berbeda.

Tetapi seiring waktu baris code pada sebuah project JavaScript bisa berubah menjadi sangat panjang dan komplek, kita akan sulit mengingat setiap nama dari function dan variable yang sudah dideklarasikan.

Sehingga sangat mungkin terjadi kita memberi satu nama yang sama untuk dua function yang berbeda.

Oleh karena itu salah satu tujuan penggunaan IIFE adalah menghindari Global NameSpace Pollution yang dapat berakibat terjadinya name collisions, yaitu 'tabrakan' antara nama function satu dengan function yang lain atau bahkan nama function dengan nama variable.

Function Parameter

Multiple Parameter

Sebuah function dapat memiliki banyak parameter, namun seperti yang sudah dibahas pada Teknik Coding sebelumnya bahwa function sebaiknya memiliki parameter seminim mungkin.

Copy
1const sendMessage = (dinoName, message) => {
2  console.log(`Hi ${dinoName}, ${message}`);
3};
4
5const dinoName = 'Brachio';
6const message = 'Where are you going?';
7
8sendMessage(dinoName, message); // Hi Brachio, Where are you going?

Namun bagaimana jika kita harus menggunakan banyak parameter ?

Salah satu cara yang bisa digunakan agar code tetap clean adalah menggunakan rest parameter.

Default Parameter

Jika kita memiliki sebuah function yang memiliki dua parameter:

Copy
1const sendMessage = (dinoName, message) => {
2  console.log(`Hi ${dinoName}, ${message}`);
3};

Kemudian kita hanya menyediakan salah satunya, maka salah satu valuenya adalah undefined.

Copy
1const sendMessage = (dinoName, message) => {
2  console.log(`Hi ${dinoName}, ${message}`);
3};
4
5const dinoName = 'Brachio';
6
7sendMessage(dinoName); // Hi Brachio, undefined

Oleh karena itu kita dapat menambahkan Default Parameter untuk mengganti value undefined dengan value lain.

Copy
1const sendMessage = (dinoName, message = 'How are you?') => {
2  console.log(`Hi ${dinoName}, ${message}`);
3};
4
5const dinoName = 'Brachio';
6
7sendMessage(dinoName); // Hi Brachio, How are you?

Selanjutnya kita akan membahas konsep JavaScript yang akan kita gunakan sebagai pendahuluan React library.