Function

 

Pengenalan Function

Pada modul ini salah satu konsep yang tidak kalah penting pada JavaScript, yaitu Function.

Di sini kita akan mempelajari beberapa hal terkait function, seperti:

• Apa itu function?
• Tujuan dan alasan kenapa kita menggunakan function.
• Bagaimana membuat function pada JavaScript.

Mari kita mulai!

Declaring Function

Fungsi merupakan bagian penting dalam bahasa pemrograman. Tanpa sadar, sebenarnya kita sudah menggunakan sebuah fungsi pada contoh kode yang ada sebelumnya. log() pada console.log() merupakan sebuah function yang berguna untuk menampilkan data pada konsol. Tapi sebenarnya apa itu function? Bagaimana ia bisa bekerja?

Mirip dengan fungsi pada matematika, fungsi dalam pemrograman juga digunakan untuk menghasilkan output berdasarkan input tertentu.

Namun, fungsi juga bisa digunakan sebagai blok kode atau prosedur yang dapat digunakan secara berulang. Dalam arti lain, kita dapat berpikir bahwa function merupakan sebuah variabel yang berisi blok logika. Blok logika tersebut akan dieksekusi ketika variabelnya dipanggil.

Semua fungsi memiliki struktur yang sama. Fungsi dideklarasikan dengan keyword function dan nama fungsinya. Nama fungsi selalu diikuti dengan tanda kurung (parentheses) tanpa spasi, lalu terdapat sepasang kurung kurawal yang berisi logika dari fungsi tersebut.

Terkadang di dalam tanda kurung kita membutuhkan sebuah informasi tambahan yang disebut dengan parameter. Parameter merupakan data yang digunakan pada fungsi untuk diproses di dalamnya. Sebagai contoh, fungsi console.log() dapat menerima argument berupa string atau data lain untuk ditampilkan ke konsol.

Berikut merupakan ilustrasi dari struktur fungsi dengan parameter:

---

Parameter & Argument

Di dalam fungsi kita akan banyak bertemu istilah parameter & argument. Penggunaan istilah ini sering kali tertukar, bahkan di kalangan developer.

 Perbedaan mendasar antara keduanya antara lain:

Parameter merupakan variabel yang didefinisikan sebagai inputan dari sebuah fungsi. Contoh:

function multiply(a, b) {
    return a * b;
}

Argument merupakan nilai atau expression yang dimasukkan ke dalam fungsi. Contohnya:

multiply(3, 4);

---

Setelah membuat fungsi kita dapat memanggilnya dengan menuliskan nama fungsi diikuti tanda kurung dan memasukkan argumen di dalamnya (jika ada).

• main.js

1

function greeting() {

2

    console.log("Good Morning!")

3

}

4

​

5

greeting();

6

​

7

/* output

8

Good Morning!

9

*/

 

Tetapi jika sebuah fungsi hanya menjalankan baris kode yang sama dirasa kurang fungsional, bukan? Kita dapat membuat fungsi tersebut untuk menerima dan memanfaatkan parameter untuk mengubah perilaku dari fungsinya.

Untuk menambahkan parameter pada fungsi, tambahkan variabel di dalam tanda kurung fungsi. Namun, variabel tersebut tidak memerlukan keyword var, let, ataupun const. Kita juga bisa menambahkan lebih dari satu parameter dengan memberikan tanda koma antar variabel parameternya. Contohnya fungsi greeting akan kita tambahkan parameter name dan language seperti ini:

function greeting(name, language) {
    if(language === "English") {
        console.log(`Good Morning ${name}!`);
    } else if (language === "French") {
        console.log(`Bonjour ${name}!`);
    } else {
        console.log(`Selamat Pagi ${name}!`);
    }
}

Sehingga dalam memanggilnya pun kita perlu mengirimkan dua buah nilainya sebagai argumen:

• main.js

1

function greeting(name, language) {

2

    if(language === "English") {

3

        console.log(`Good Morning ${name}!`);

4

    } else if (language === "French") {

5

        console.log(`Bonjour ${name}!`);

6

    } else {

7

        console.log(`Selamat Pagi ${name}!`);

8

    }

9

}

10

​

11

greeting("Harry", "French");

12

​

13

/* output

14

Bonjour Harry!

15

*/

 

Satu hal lagi, function dapat menghasilkan output atau mengembalikan sebuah nilai. Dengan nilai kembalian, kita dapat membuat function yang berfungsi untuk melakukan perhitungan matematika dan hasilnya dapat kita masukkan ke dalam sebuah variabel. Contohnya seperti ini:

• main.js

1

function multiply(a, b) {

2

    return a * b;

3

}

4

​

5

let result = multiply(10, 2)

6

console.log(result)

7

​

8

/* output

9

20

10

*/

 

Agar fungsi bisa mengembalikan nilai, gunakan keyword return diikuti dengan nilai yang akan dikembalikan. Nilai kembalian tidak hanya number, bisa juga berupa string, boolean, object, array, atau tipe yang lain. Seperti inilah fungsi greeting() jika kita ubah agar mengembalikan nilai string:

• main.js

1

function greeting(name, language) {

2

    if(language === "English") {

3

        return `Good Morning ${name}!`

4

    } else if (language === "French") {

5

        return `Bonjour ${name}!`;

6

    } else {

7

        return `Selamat Pagi ${name}!`;

8

    }

9

}

10

​

11

let greetingMessage = greeting("Harry", "French");

12

console.log(greetingMessage);

13

​

14

/* output

15

Bonjour Harry!

16

*/

 

Yang perlu kita perhatikan lagi, ketika statement return tereksekusi, maka fungsi akan langsung terhenti dan mengembalikan nilai.

Expression Function

Cara lain untuk membuat sebuah fungsi pada JavaScript adalah expression function. Ingat kembali bahwa expression adalah kode atau instruksi yang mengembalikan nilai, sehingga expression function bisa disimpan dalam sebuah variabel.

Pada expression function umumnya kita tidak perlu menuliskan nama fungsinya. Fungsi yang tidak bernama juga dikenal dengan anonymous function. Berikut ini merupakan contoh penulisan expression function:

• main.js

1

const greeting = function(name, language) {

2

    if(language === "English") {

3

        return "Good Morning " + name + "!";

4

    } else if (language === "French") {

5

        return "Bonjour " + name + "!";

6

    } else {

7

        return "Selamat Pagi " + name + "!";

8

    }

9

}

10

​

11

console.log(greeting('Ron', 'English'));

12

​

13

/* output

14

Good Morning Ron!

15

 */

Function Parameter

Pada materi sebelumnya, kita telah berkenalan dengan fungsi yang merupakan suatu blok kode yang dapat menerima input dan menghasilkan output tertentu. Input ke dalam sebuah fungsi dikirimkan melalui parameter.

Di dalam fungsi kita akan banyak bertemu istilah parameter & argument. Penggunaan istilah ini sering kali tertukar, bahkan di kalangan developer. 

Perbedaan mendasar antara keduanya antara lain:

Parameter merupakan variabel yang didefinisikan sebagai inputan dari sebuah fungsi. Contoh:

function multiply(a, b) {
    return a * b;
}

Argument merupakan nilai atau expression yang dimasukkan ke dalam fungsi. Contohnya:

multiply(3, 4);

Parameter dari fungsi dapat berupa tipe data apa pun, mulai dari string, number, object, bahkan fungsi lain.

Jika parameter dari fungsi adalah sebuah object, kita juga bisa memanfaatkan destructuring object untuk mendapatkan nilainya. Contohnya seperti berikut:

• main.js

1

const user = {

2

    id: 24,

3

    displayName: 'kren',

4

    fullName: 'Kylo Ren',

5

};

6

​

7

function introduce({displayName, fullName}) {

8

    console.log(`${displayName} is ${fullName}`);

9

}

10

​

11

introduce(user);

12

​

13

/* output

14

kren is Kylo Ren

15

*/

 

Default Parameters

Fungsi pada JavaScript tidak melakukan pengecekan terhadap jumlah maupun tipe argumen yang dimasukkan ke dalam parameter. Ini berarti kita bisa memasukkan argumen meskipun tidak sesuai dengan parameter yang telah didefinisikan.

• main.js

1

function exponentsFormula(baseNumber, exponent) {

2

    let result = baseNumber ** exponent;

3

    console.log(`${baseNumber}^${exponent} = ${result}`);

4

}

5

​

6

exponentsFormula(2);

7

​

8

/* output

9

2^undefined = NaN

10

*/

 

Seperti yang kita lihat pada contoh kode di atas, ketika argumen lebih sedikit dari parameternya, maka parameter yang tidak terdefinisi akan bernilai undefined. Sebagai solusi jika memungkinkan, kita bisa memberikan nilai default pada parameter. Nilai ini akan digunakan jika kita tidak memasukkan parameter.

• main.js

1

function exponentsFormula(baseNumber, exponent = 2) {

2

    let result = baseNumber ** exponent;

3

    console.log(`${baseNumber}^${exponent} = ${result}`);

4

}

5

​

6

exponentsFormula(3);

7

​

8

/* output

9

3^2 = 9

10

*/

 

Rest Parameter

Masih ingat dengan spread operator (...)? Jika spread operator menyebarkan array menjadi beberapa elemen berbeda, rest parameter ini adalah kebalikan dari operator tersebut. Penasaran?

Rest parameter juga dituliskan menggunakan three consecutive dots (...). Dengan rest parameter, kita dapat menggabungkan beberapa elemen menjadi satu array. Tentu teknik ini sangat bermanfaat ketika kita hendak membuat sebuah fungsi dengan parameter yang tidak pasti.

Sebagai contoh adalah fungsi yang menjumlahkan seluruh nilai argumen seperti berikut:

• main.js

1

function sum(...numbers) {

2

    let result = 0;

3

    for (let number of numbers) {

4

        result += number;

5

    }

6

    return result;

7

}

8

​

9

console.log(sum(1, 2, 3, 4, 5));

10

​

11

/* output

12

15

13

*/

Arrow Function

ES6 memperkenalkan fungsi baru yang dinamakan arrow function expression atau lebih dikenal sebagai arrow function. Arrow function mirip seperti regular function secara perilaku, tetapi berbeda dalam penulisannya. Sesuai namanya, fungsi didefinisikan menggunakan tanda panah atau fat arrow ( => ). Tentunya penulisan arrow function ini akan lebih singkat.

Selain perbedaan sintaksis, terdapat perbedaan perilaku antara arrow function dan regular function. Regular function dapat berupa function declaration dan function expression. Namun, arrow function hanya berupa expression function saja. Itu sebabnya arrow function memiliki nama lengkap “arrow function expression”.

• Regular function
• Arrow function

// function declaration
function sayHello(greet) {
    console.log(`${greet}!`);
}
 
// function expression
const sayName = function (name) {
    console.log(`Nama saya ${name}`)
}

Pada arrow function kita tidak perlu menuliskan keyword function setiap membuat fungsi. Kita tetap menuliskan parameter di dalam tanda kurung lalu diikuti dengan tanda panah (=>) sebelum kurung kurawal.

const sayName = (name) => {
    console.log(`Nama saya ${name}`)
}

Apabila fungsi hanya memiliki satu parameter, maka kita bisa menghapuskan tanda kurung seperti berikut:

• main.js

1

const sayName = name => {

2

    console.log(`Nama saya ${name}`)

3

}

4

​

5

sayName("Leia");

6

​

7

/* output

8

Nama saya Leia

9

 */

 

Namun, jika kita sama sekali tidak membutuhkan parameter, maka kita tetap menuliskan tanda kurung namun kosong seperti ini:

• main.js

1

const sayHello = () => {

2

    console.log("Selamat pagi semuanya!")

3

};

4

​

5

sayHello();

6

​

7

/* output

8

Selamat pagi semuanya!

9

 */

 

Satu hal yang menarik, ketika body dari function hanya terdiri dari satu baris, kita bisa menghapus tanda kurung kurawal. Tentunya ini akan menghemat baris kode yang kita tulis.

• main.js

1

const sayName = name => console.log(`Nama saya ${name}`);

2

sayName("Leia");

3

​

4

const sayHello = () => console.log("Selamat pagi semuanya!");

5

sayHello();

6

​

7

/* output

8

Nama saya Leia

9

Selamat pagi semuanya!

10

 */

 

Ketika sebuah fungsi perlu mengembalikan nilai, kita tidak perlu lagi menuliskan return (hanya bekerja untuk fungsi satu baris).

• main.js

1

const multiply = (a, b) => a * b;

2

console.log(multiply(3, 4));

3

​

4

/* output

5

12

6

 */

Variable Scope

Sejauh ini kita sudah mengenal function. Setelah kita memisahkan kode ke dalam blok atau fungsi terpisah, ada satu hal penting yang perlu kita tahu, yaitu variable scoping. Ada banyak keadaan di mana kita membutuhkan variabel untuk diakses di seluruh script yang kita buat. Tetapi ada juga keadaan di mana kita ingin variabel tersebut hanya dapat diakses pada cakupan fungsi dan fungsi turunannya saja.

Variabel yang dapat diakses dari seluruh script disebut dengan “globally scoped”, sementara variabel yang hanya diakses hanya pada fungsi tertentu disebut dengan “locally scoped”.

Variabel JavaScript menggunakan fungsi untuk mengelola cakupannya. Jika variabel didefinisikan di luar fungsi, maka variabel tersebut bersifat global. Jika variabel didefinisikan di dalam fungsi, maka variabel bersifat lokal dan cakupannya hanya pada fungsi tersebut beserta turunannya.

Berikut ini merupakan contoh scoping dalam kode:

// global variable, dapat diakses pada parent() dan child()
const a = 'a'; 
 
function parent() {
    // local variable, dapat diakses pada parent() dan child(), tetapi tidak dapat diakses di luar dari fungsi tersebut.
    const b = 'b'; 
    
    function child() {
        // local variable, dapat diakses hanya pada fungsi child().
        const c = 'c';
    }
}

Kita harus berhati-hati dalam mendefinisikan variabel di dalam fungsi. Pasalnya, kita bisa mendapatkan hasil yang tidak diperkirakan, contohnya seperti berikut:

• main.js

1

function multiply(num) {

2

    total = num * num;

3

    return total;

4

}

5

​

6

let total = 9;

7

let number  = multiply(20);

8

​

9

console.log(total)

10

​

11

/* output

12

400

13

*/

 

Mungkin kita berharap nilai total akan tetap 9, mengingat variabel total pada fungsi multiply seharusnya tidak akan berpengaruh untuk kode di luar dari fungsi tersebut. Hal ini bisa terjadi karena pada fungsi multiply() kita tidak menetapkan variabel total sebagai cakupan lokal. Kita tidak menggunakan keyword const atau let ketika mendeklarasikan variabel total pada fungsi multiply() sehingga variabel total menjadi global.

Perlu kita perhatikan, jika kita lupa menuliskan keyword let, const, atau var pada script ketika membuat sebuah variabel, maka variabel tersebut akan menjadi global.

Sebisa mungkin kita harus menghindari pembuatan variabel global, karena variabel global dapat diakses pada seluruh script yang kita tuliskan. Semakin banyak variabel global yang kita tuliskan, semakin tinggi kemungkinan tabrakan (collision) terjadi.

Closure

Setelah mempelajari tentang scope pada materi selanjutnya, kali ini kita akan membahas seputar closure. Sebelumnya kita telah tahu bahwa fungsi dapat didefinisikan dalam lingkup global atau di dalam fungsi lain. Suatu fungsi yang dapat mengakses variabel di dalam lexical scope-nya disebut dengan closure. Lexical scope berarti pada sebuah fungsi bersarang, fungsi yang berada di dalam memiliki akses ke variabel di lingkup induknya.

• main.js

1

function init() {

2

    var name = 'Obi Wan';   // Variabel lokal di dalam scope fungsi init

3

4

    function greet() {      // Inner function, merupakan contoh closure

5

        console.log(`Halo, ${name}`);   // Memanggil variabel yang dideklarasikan di parent function

6

    }

7

​

8

    greet();

9

}

10

​

11

init();

12

​

13

/* output

14

Halo, Obi Wan

15

 */

 

Fungsi init() memiliki variabel lokal name dan fungsi greet(). Fungsi greet() adalah inner function yang didefinisikan di dalam init() dan hanya bisa diakses dari dalam fungsi init(). Perhatikan bahwa fungsi greet() tidak memiliki variabel lokal. Namun, karena inner function memiliki akses ke variabel di parent function-nya, sehingga greet() dapat mengakses variabel name. Itulah yang dimaksud dengan lexical scope.

Sekarang perhatikan contoh kode berikut:

• main.js

1

function init() {

2

    var name = 'Obi Wan';

3

​

4

    function greet() {

5

        console.log(`Halo, ${name}`);

6

    }

7

​

8

    return greet;

9

}

10

​

11

let myFunction = init();

12

myFunction();

13

​

14

/* output

15

Halo, Obi Wan

16

 */

 

Kode di atas akan menghasilkan output yang sama. Perbedaannya adalah fungsi greet() dikembalikan (return) dari outer function-nya sebelum dieksekusi. Karena variabel name berada dalam scope init(), maka umumnya variabel tersebut akan hilang atau dihapus ketika fungsinya selesai dijalankan. Namun, pada kasus di atas fungsi greet() yang diakses melalui fungsi MyFunction() masih memiliki referensi atau akses ke variabel name. Variabel pada mekanisme di atas telah tertutup (close covered), yang berarti variabel tersebut berada di dalam closure.

Memang di awal cukup sulit untuk memahami closure. Jadi, mari kita lihat langsung untuk apa closure ini digunakan pada suatu program yang nyata.

JavaScript tidak memiliki cara untuk mendeklarasikan suatu fungsi atau variabel menjadi private seperti bahasa Java. Sehingga sebuah fungsi atau variabel bisa diakses dari mana pun. Kenapa kita membutuhkan private method? Salah satunya adalah untuk membatasi akses ke fungsi atau variabel. Perhatikan contoh berikut:

• main.js

1

let counter = 0;

2

​

3

let add = () => {

4

    return ++counter;

5

}

6

​

7

console.log(add());

8

console.log(add());

9

counter = 23;

10

console.log(add());

11

​

12

/* output

13

1

14

2

15

24

16

 */

 

Nilai counter akan bertambah ketika kita memanggil fungsi add(). Namun, kita juga bisa mengubah nilai counter secara langsung dengan assignment operator. Pada contoh program yang lebih kompleks, sebaiknya hal ini dihindari karena perubahan langsung pada nilai counter bisa saja memunculkan bug.

Closure memungkinkan kita membuat fungsi dan variabel seolah menjadi private. Seperti inilah contoh program counter yang dibuat dengan closure:

• main.js

1

let add = () => {

2

    let counter = 0;

3

    return () => {

4

        return ++counter;

5

    };

6

}

7

​

8

let addCounter = add();

9

​

10

console.log(addCounter());

11

console.log(addCounter());

12

console.log(addCounter());

13

​

14

/* output

15

1

16

2

17

3

18

 */

Rangkuman Materi

Untuk membuat kode yang bersih dan mudah dipahami, salah satu cara yang bisa kita lakukan adalah dengan menggunakan function.

Beberapa hal yang telah kita bahas pada modul ini, antara lain:

• Function/fungsi adalah blok atau kumpulan kode yang memungkinkan untuk dipanggil berkali-kali.
• Penamaan fungsi harus mendeskripsikan fungsi dengan jelas. Penamaan yang bagus akan langsung memberi kita pemahaman tentang apa yang dilakukan atau dikembalikan.
• Function dapat menerima masukan nilai melalui parameter.
• Fungsi dapat mengembalikan nilai. Jika tidak, maka hasilnya adalah undefined.
• Karena fungsi berupa nilai, fungsi dapat ditetapkan atau dideklarasikan di setiap tempat kode, termasuk variabel atau parameter dari fungsi lain.

Materi Pendukung:

Berikut ini adalah beberapa sumber materi tambahan yang bisa Anda pelajari:

• Function
• Function expression
• Arrow function expressions
• Closures

Ref : [1]