Contoh Rest parameter Dalam Javascript

Contoh Rest parameter Dalam Javascript

fezarzone    08.22    Comment   

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

Contoh Spreading Operator di Javascript

fezarzone    06.59    Comment   

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. 

Contoh Destructuring Array Dalam Javascript

Contoh Destructuring Array Dalam Javascript

fezarzone    06.32    Comment   

Destructuring Array serupa dengan destructuring object. Jika objek menggunakan tanda kurung kurawal { } sedangkan array menggunakan tanda kurung siku [ ].

Perbedaan lainnya adalah destructuring array bekerja berdasarkan posisi daripada penamaan propertinya. Berikut contoh dari destructuring array pada ES6:

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

Contoh di atas merupakan proses destructuring array. Di dalam array tersebut (favorites) terdapat 4 (empat) nilai string yang masing-masing nilainya dimasukkan ke variabel lokal firstFood, secondFood, thirdFood, dan fourthFood. Nilai pada array yang dimasukkan ke variabel lokal dipilih berdasarkan posisi di mana ia dideklarasikan pada array notasi. 

const [firstFood, secondFood, thirdFood, fourthFood] = favorites;

Sebenarnya nama dari variabel lokal bisa apa saja. Yang terpenting adalah urutan ketika deklarasi variabelnya saja.

Kita juga bisa memilih nilai pada index tertentu untuk didestruksikan pada array. Contohnya jika kita ingin mengambil nilai ketiga dari array, kita tidak perlu menyiapkan lokal variabel untuk menampung nilai array pertama, kedua, atau pun keempat. Kita bisa melakukannya dengan membiarkan index array yang kita tidak inginkan tetap kosong (tanpa menulis variabel lokal). Lebih lanjut, tanda koma tetap (,) tetap diperlukan untuk menunjukkan posisi index-nya seperti ini:

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

Destructuring Assignment

Kita juga bisa melakukan destructuring assignment pada array. Namun tidak seperti objek, kita tidak perlu membungkusnya pada tanda kurung. Contohnya seperti berikut:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
 
let myFood = "Ice Cream";
let herFood = "Noodles";
 
[myFood, herFood] = favorites;
 
console.log(myFood);
console.log(herFood);
 
/* output:
Seafood
Salad
*/

Array destructuring assignment sangat berguna ketika kita hendak menukar nilai antar dua variabel, sebelum ES6 untuk melakukan hal ini kita menggunakan cara manual menggunakan algoritma sorting seperti ini:

var a = 1;
var b = 2;
var temp;
 
console.log("Sebelum swap");
console.log("Nilai a: " + a);
console.log("Nilai b: " + b);
 
temp = a;
a = b;
b = temp;
 
console.log("Setelah swap");
console.log("Nilai a: " + a);
console.log("Nilai b: " + b);
 
/* output
Sebelum swap
Nilai a: 1
Nilai b: 2
Setelah swap
Nilai a: 2
Nilai b: 1
*/

Untuk melakukan pertukaran nilai, kita membutuhkan variabel penengah. Pada contoh kode di atas variabel tersebut adalah temp. Variabel penengah dibutuhkan untuk menyimpan data sementara pada variabel yang akan ditukar. Hal ini menjadi kurang efektif karena kita harus membuat variabel baru yang sebenarnya hanya bersifat sementara.

Dengan array destructuring assignment kita bisa menukar nilai variabel dengan mudah dan tentu tanpa membuat variabel extra.  

let a = 1;
let b= 2;
 
console.log("Sebelum swap");
console.log("Nilai a: " + a);
console.log("Nilai b: " + b);
 
[a, b] = [b, a]
 
console.log("Setelah swap");
console.log("Nilai a: " + a);
console.log("Nilai b: " + b);
 
/* output
Sebelum swap
Nilai a: 1
Nilai b: 2
Setelah swap
Nilai a: 2
Nilai b: 1
*/

Default Values

Ketika melakukan array destructuring namun terdapat variabel yang posisinya tidak dapat terjangkau oleh array, maka variabel tersebut akan bernilai undefined. Contohnya:

const favorites = ["Seafood"];
 
const [myFood, herFood] = favorites
 
console.log(myFood);
console.log(herFood);
 
/* output:
Seafood
undefined
*/

Seperti objek, pada array destructuring kita juga dapat memberikan nilai default pada variabel yang tidak dapat terjangkau oleh array, sehingga nilai pada variabel tidak akan menjadi undefined.

const favorites = ["Seafood"];
 
const [myFood, herFood = "Salad"] = favorites
 
console.log(myFood);
console.log(herFood);