Penggunaan This dalam Arrow Function di Javascript

Perbedaan karakteristik dari arrow function dan regular function selanjutnya ada pada penggunaan keyword this. Penjelasan dari this sendiri menyusul di materi class. Namun kita akan bahas sedikit mengenai ini untuk menggambarkan perbedaan ketika this digunakan oleh arrow function dan regular function.

Jika sebuah regular function dipanggil dengan menggunakan keyword new. Maka nilainya akan menjadi objek, contohnya:

function People(name, age, hobby) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
}
 
const programmer = new People("John", 18, ["Coding", "Read book", "Ping-pong"]);
 
console.log(programmer.name);
console.log(programmer.age);
console.log(programmer.hobby);
 
/* output:
John
18
[ 'Coding', 'Read book', 'Ping-pong' ]
*/

Objek yang dibuat menggunakan function dengan keyword new, sama halnya seperti kita membuat objek seperti menggunakan objek literals { }.

const programmer = {
    name: "John",
    age: 18,
    hobby: ["Coding", "Read book", "Ping-Pong"]
}
 
console.log(programmer.name);
console.log(programmer.age);
console.log(programmer.hobby);
 
/* output:
John
18
[ 'Coding', 'Read book', 'Ping-pong' ]
*/

Pada objek, this keyword mengembalikan nilai objeknya sendiri. this dapat digunakan untuk mengelola properti pada objeknya. Namun jika fungsi dipanggil tanpa menggunakan keyword new, this akan memiliki nilai global object (Window jika di browser).

Sedangkan fungsi yang dibuat dengan menggunakan gaya arrow tidak akan pernah memiliki nilai this, yang artinya kita tidak pernah bisa membuat objek menggunakan arrow function. Jika kita menggunakan this pada arrow function maka nilai this tersebut merupakan nilai objek di mana arrow function itu berada.

Perhatikan kedua contoh kode berikut:

• Regular Function
• 
  

function People(name, age, hobby) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
}
 
 
// menambahkan introMyself ke People
People.prototype.introMyself = function () {
    // this -> People
    setTimeout(function() {
       // this -> ??
        console.log(`Hello! Nama saya ${this.name}, umur saya ${this.age}.`)
        console.log(`Hobby saya adalah ${this.hobby}`)
    }, 300)
}
 
 
const programmer = new People("John", 18, ["Coding", "Read book", "Ping-pong"]);
programmer.introMyself();
 
 
/* output:
Hello! Nama saya undefined, umur saya undefined.
Hobby saya adalah undefined
*/

• Arrow Function

function People(name, age, hobby) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
}
 
 
// menambahkan introMyself ke People
People.prototype.introMyself = function () {
    // this -> People
    setTimeout(() => {
        // this -> People
        console.log(`Hello! Nama saya ${this.name}, umur saya ${this.age}.`)
        console.log(`Hobby saya adalah ${this.hobby}`)
    }, 300)
}
 
 
const programmer = new People("John", 18, ["Coding", "Read book", "Ping-pong"]);
programmer.introMyself();
 
 
 
 
/* output:
Hello! Nama saya John, umur saya 18.
Hobby saya adalah Coding,Read book,Ping-pong
*/

Fungsi yang dituliskan di dalam setTimeout() dipanggil tanpa new. Itu berarti nilai dari this jika digunakan di dalam fungsi tersebut adalah global object. Itulah mengapa output akan menghasilkan nilai undefined ketika properti name, age, dan hobby dipanggil.

Berbeda ketika kita menuliskan arrow function di dalam setTimeout(), nilai this memiliki nilai objek sesuai dengan konteksnya (People). Arrow function akan sangat berguna untuk kasus seperti ini

Regular function vs Arrow Function Javascript

Regular function dapat berupa function declaration atau function expression, namun arrow function hanya berupa function expression saja. Itu sebabnya arrow function memiliki nama lengkap “arrow function expressions”.

• Regular function
• 
  

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

• Arrow function

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

Karena arrow function merupakan sebuah expression, maka ia hanya dapat digunakan untuk disimpan pada variabel (seperti contoh kode di atas), sebagai argumen pada sebuah fungsi, dan sebagai nilai dari properti objek.

• Stored in Variable

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

• Passed as An Argument
• 
  

["Dimas", "Widdy", "Buchori"].forEach(name => console.log(`Nama saya ${name}`));

• Stored in Object Property

const user = {
    introduce: name => console.log(`Nama saya ${name}`)
}

Contoh Arrow Function Expression Javascript

Arrow function mirip seperti regular function secara perilaku, namun penulisannya jauh berbeda. Sama seperti namanya, fungsi didefinisikan dengan menggunakan tanda panah (=>) dan tentu penulisan fungsi dengan arrow ini akan lebih singkat.

Untuk gambaran awal, perhatikan penulisan regular fungsi sebagai callback berikut:

const upperizedNames = ["Dimas", "Widy", "Buchori"]
    .map(function(name) {
        return name.toUpperCase();
});
 
console.log(...upperizedNames);
 
/* output:
DIMAS WIDY BUCHORI
*/

Sedangkan menggunakan arrow function akan tampak seperti ini:

const upperizedNames = ["Dimas", "Widy", "Buchori"]
    .map(name => name.toUpperCase());
 
console.log(...upperizedNames);
 
/* output:
DIMAS WIDY BUCHORI
*/

Pada kasus fungsi yang dituliskan dalam satu baris dengan arrow function kita dapat menghapus kata function, tanda kurung, tanda kurawal, kata return, dan semicolon (;). Kita hanya perlu menambahkan tanda panah (=>) di antara parameter dan kode fungsinya.

Lihat betapa sederhananya jika kita menggunakan arrow function

Function Parameter

Pada penggunaan arrow function kita melihat bahwa variabel yang diletakan sebelum tanda panah (=>) adalah merupakan parameter dari fungsi. 

// name merupakan parameter dari fungsi
const sayName = name => console.log(`Nama saya ${name}`);

Namun penulisan tersebut hanya berlaku jika fungsi memiliki satu parameter saja. Lantas bagaimana jika kita ingin membuat fungsi yang memiliki lebih dari satu parameter atau tanpa sebuah parameter? Hal itu sangat biasa dilakukan bukan? 

Pada arrow function jika terdapat dua atau lebih parameter fungsi kita perlu membungkusnya dengan tanda kurung seperti ini: 

const sayHello = (name, greet) => console.log(`${greet}, ${name}!`);
 
sayHello("Dimas", "Selamat Pagi")
 
/* output:
Selamat Pagi, Dimas!
*/

Namun jika kita sama sekali tidak membutuhkan parameter, biarkan saja tanda kurung tersebut kosong.

const sayHello = () => console.log("Selamat pagi semuanya!");
 
sayHello()
 
/* output:
Selamat pagi semuanya!
*/

Atau beberapa developer biasanya mengubah tanda kurung menjadi garis bawah (_) agar penulisannya lebih simpel.

Block Body Function

Fungsi merupakan mini program sehingga sangat mungkin terdapat lebih dari satu logika di dalamnya. Seperti yang kita ketahui bahwa logika-logika pada pemrograman terdiri dari banyak expression ataupun statement. 

Pada contoh kode arrow function sebelumnya kita hanya menuliskan satu buah expression sehingga penulisannya bisa sangat ringkas. Namun bagaimana jika dalam sebuah fungsi terdapat banyak logika di dalamnya? Apakah bisa dituliskan menggunakan arrow function? Jawabannya tentu bisa!

Sama seperti regular function, arrow function sebenarnya tidak benar-benar menghilangkan tanda kurung kurawal ({ }) dalam penulisannya. Tanda kurung kurawal pun berfungsi sama seperti regular function yakni menampung body function di mana tempat logika fungsi dituliskan. Penulisan tanda kurung kurawal menjadi opsional ketika body fungsi hanya terdiri dari satu expression atau statement saja.

Jika kita butuh lebih dari satu baris dalam body function, kita bisa menuliskannya seperti ini:

const sayHello = language => {
    if(language.toUpperCase() === "INDONESIA") {
        return "Selamat Pagi!";
    } else {
        return "Good Morning!";
    }
}
 
console.log(sayHello("Indonesia"));
 
/* output:
Selamat Pagi!
*/

Selain itu juga, kita perlu menuliskan kembali keyword return agar fungsi tersebut dapat mengembalikan nilai

Contoh Rest parameter Dalam Javascript

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 variadic function.

Sebagai contoh penggunaanya, mari kita buat sebuah variadic function yang berfungsi untuk menjumlahkan seluruh nilai argument fungsi yang diberikan.

function sum(...numbers) {
    var result = 0;
    for(let number of numbers) {
        result += number
    }
    return result;
}
 
console.log(sum(1,2,3,4,5));
 
/* output
15
*/

Rest parameter juga dapat digunakan pada array destructuring, di mana kita dapat mengelompokkan nilai-nilai array yang terdestruksi pada variabel dalam bentuk array yang lain. Sedikit bingung? Mari lihat contoh kode berikut ini:

const refrigerator = ["Samsung", 50, 2, "milk", "cheese", "egg", "butter"];
 
const [manufacture, weight, door, ...items] = refrigerator;
 
console.log(manufacture);
console.log(weight);
console.log(door);
console.log(items);
 
 
/* output:
Samsung
50
2
[ 'milk', 'cheese', 'egg', 'butter' ]
*/

Pada kode di atas nilai dari array refrigerator dimasukkan ke individual lokal variabel menggunakan array destructuring. Variabel manufacture, weight, door diberikan nilai index tiga pertama dari array refrigerator, namun variabel items di mana kita menggunakan rest parameter, akan diberikan sisa nilai yang ada sebagai array

Contoh Spreading Operator di Javascript

Spreading operator dituliskan dengan three consecutive dots (....). Sesuai namanya “Spread”,



Inti nya spread operator adalah pelebur array menjadi beberapa elemen yang berbeda

fitur baru ES6 ini digunakan untuk membentangkan nilai array atau lebih tepatnya iterable object menjadi beberapa elements. Mari kita lihat contoh kode berikut:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
 
console.log(favorites);
 
/* output:
[ 'Seafood', 'Salad', 'Nugget', 'Soup' ]
*/

Pada kode tersebut hasil yang dicetak adalah sebuah array (ditunjukkan dengan tanda [ ]), karena memang kita mencetak nilai favorites itu sendiri. Nah, dengan menggunakan spread operator kita dapat membentangkan nilai – nilai dalam array tersebut.

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
 
console.log(...favorites);
 
/* output:
Seafood Salad Nugget Soup
*/

Terlihat kan perbedaanya? Mengapa bisa demikian? Spread operator bekerja seperti meleburkan nilai array menjadi beberapa elemen sesuai dengan panjang nilai array-nya, sehingga jika kita menuliskan kode seperti ini:

console.log(...favorites);

Sama seperti kita menuliskan kode seperti ini:

console.log(favorites[0], favorites[1], favorites[2], favorites[3]);

Spread operator ini cocok sekali digunakan sebagai nilai parameter pada variadic functions, seperti console.log() atau Math.max().

/* Math.max() -> Mencari nilai terbesar */
const numbers = [12, 32, 90, 12, 32];
 
// Sama seperti kita menuliskan
// console.log(Math.max(numbers[0], numbers[1], numbers[2], numbers[3])
 
console.log(Math.max(...numbers));
/* output
90
*/

Spread operator dapat digunakan untuk menggabungkan dua buah array dalam objek array baru. Jika tidak menggunakan spread operator ini maka hasilnya seperti ini:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
const others = ["Cake", "Pie", "Donut"];
 
const allFavorites = [favorites, others]
 
console.log(allFavorites);
 
/* output:
[[ 'Seafood', 'Salad', 'Nugget', 'Soup' ], [ 'Cake', 'Pie', 'Donut' ]]
*/

Sayang sekali, nilai array tidak akan tergabung. Alih-alih menggabungkan nilainya, variabel allFavorite menjadi objek array baru yang menampung dua array di dalamnya. Nah lantas bagaimana jika kita mencoba menggunakan spread operator?

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
const others = ["Cake", "Pie", "Donut"];
 
const allFavorites = [...favorites, ...others]
 
console.log(allFavorites);
 
/* output:
[ 'Seafood', 'Salad', 'Nugget', 'Soup', 'Cake', 'Pie', 'Donut' ]
*/

Yups, dengan menggunakan spread operator nilai dari dua array tersebut berhasil tergabung.