Apa operator tiga titik di JS/React JS?

Operator tiga titik di JavaScript adalah salah satu pembaruan signifikan yang dikirimkan bersama ES6.

Operator ini (...) membantu Anda mencapai banyak hal yang sebelumnya memerlukan banyak baris kode, sintaksis asing, dan banyak lagi.

Dalam artikel singkat ini, Anda akan mempelajari apa arti operator tiga titik dan fungsinya. Kami akan melihat beberapa contoh untuk menunjukkan kemungkinan kasus penggunaan, dan kami akan melihat bagaimana Anda biasa melakukan operasi ini. Dengan cara ini Anda akan melihat apa yang ditawarkan oleh tiga titik kepada Anda sebagai pengembang JavaScript.

Operator tiga titik memiliki dua arti berbeda dalam JavaScript. Sintaksnya sangat mirip, tetapi Anda menggunakannya dalam konteks yang berbeda. Dua penggunaan ... yang berbeda ini adalah operator spread dan rest.

Cara Menggunakan Operator Spread di JavaScript

Dalam JavaScript, Anda menggunakan operator spread untuk memperluas iterable di dalam penerima tertentu, seperti namanya.

Penerima ini bisa berupa apa saja, misalnya objek, array, dan sebagainya. Dan iterable bisa berupa apa saja yang bisa kita ulangi, termasuk string, array, objek, dan seterusnya.

Sintaks operator penyebaran:

const newArray = ['firstItem', ...oldArray];

Sekarang mari kita lihat berbagai contoh di mana kita dapat menggunakan operator spread.

Cara Menyalin Array Dengan Operator Spread

Ketika kita ingin menyalin elemen array tertentu ke dalam array baru tanpa mempengaruhi array aslinya, kita dapat menggunakan operator spread.

Berikut ini contohnya:

let studentNames = ["Daniel", "Jane", "Joe"];
let names = [...studentNames];
console.log(names); // ["Daniel","Jane","Joe"]

Ini menghemat waktu yang kita gunakan untuk menulis pernyataan loop:

let studentNames = ["Daniel", "Jane", "Joe"];
let names = [];
studentNames.map((name) => {
    names.push(name);
});
console.log(names); // ["Daniel","Jane","Joe"]

Cara Menyalin Objek Dengan Operator Spread

Seperti yang kita lakukan dengan array, Anda juga dapat menggunakan objek sebagai penerima operator penyebaran.

let user = { name: "John Doe", age: 10 };
let copiedUser = { ...user };
console.log(copiedUser); // { name: "John Doe", age: 10 }

Sedangkan cara lama untuk melakukan hal ini adalah dengan menggunakan metode Object.assign() seperti ini:

let user = { name: "John Doe", age: 10 };
let copiedUser = Object.assign({}, user);
console.log(copiedUser); // { name: "John Doe", age: 10 }

Cara Menggabungkan atau Menggabungkan Array Dengan Operator Spread

Ketika kita memiliki dua atau lebih array yang ingin kita gabungkan menjadi array baru, kita dapat dengan mudah melakukannya menggunakan operator spread. Ini memungkinkan kita menyalin elemen dari array:

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let allNames = [...femaleNames, ...maleNames];
console.log(allNames); // ["Daniel","Peter","Joe","Sandra","Lucy","Jane"]

Penting juga untuk mengetahui bahwa kita dapat menggunakan pendekatan yang sama untuk sebanyak mungkin array yang kita miliki. Kita juga dapat menambahkan elemen individual ke dalam array:

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let otherNames = ["Bill", "Jill"];
let moreNames = [...otherNames, ...femaleNames, ...maleNames];
let names = [...moreNames, "Ben", "Fred"];

Ini menyelamatkan kita dari stres menggunakan sintaksis yang rumit seperti metode concat():

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let otherNames = ["Bill", "Jill"];
let allNames = femaleNames.concat(maleNames);
let moreNames = femaleNames.concat(maleNames, otherNames);

Cara Menggabungkan atau Menggabungkan Objek Dengan Operator Spread

Kita juga dapat menggabungkan objek dengan cara yang sama seperti yang kita lakukan pada array dengan operator spread:

let userName = { name: "John Doe" };
let userSex = { sex: "Female" };
let user = { ...userName, ...userSex };
console.log(user); // { name: "John Doe", age: 10 }

Catatan: Dalam situasi ketika satu kunci memiliki properti lain, properti terakhir akan menggantikan instance pertama:

let userName = { name: "John Doe" };
let userSex = { sex: "Female", name: "Jane Doe" };
let user = { ...userName, ...userSex }; // { name: "Jane Doe", age: 10 }

Cara Mengambil Elemen Unik Dengan Metode Set

Satu situasi penting ketika Anda akan menggunakan operator spread adalah ketika Anda mencoba mengambil elemen unik dari satu array ke array lainnya.

Sebagai contoh, misalkan kita memiliki sebuah array buah-buahan yang mana kita mengulangi beberapa buahnya, dan kita ingin memasukkan buah-buahan tersebut ke dalam array baru dan menghindari pengulangan. Kita dapat menggunakan metode set() bersama operator spread untuk mencantumkannya dalam array baru:

let fruits = ["Mango", "Apple", "Mango", "Banana", "Mango"];
let uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits); // ["Mango","Apple","Banana"]

Cara Melewati Elemen Array dalam Panggilan Fungsi Dengan Operator Spread

Ketika Anda memiliki fungsi yang menggunakan angka dan Anda memiliki angka-angka ini sebagai elemen array:

let scores = [12, 33, 6]
const addAll = (a, b, c) => {
    console.log(a + b + c);
};

Anda dapat menggunakan operator spread untuk meneruskan elemen-elemen ini ke dalam pemanggilan fungsi sebagai argumen menggunakan operator spread:

let scores = [12, 33, 6]
const addAll = (a, b, c) => {
    console.log(a + b + c);
};
addAll(...scores); // 51

Metode lama untuk melakukan hal ini adalah dengan menggunakan metode apply():

let scores = [12, 33, 6]
const addAll = (a, b, c) => {
    console.log(a + b + c);
};
addAll.apply(null, scores); // 51

Cara Membagi String Menjadi Karakter Menggunakan Operator Spread

Misalkan kita mempunyai sebuah string. Kita dapat menggunakan operator spread untuk membaginya menjadi beberapa karakter:

let myString = "freeCodeCamp";
const splitString = [...myString];
console.log(splitString); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

Ini mirip dengan metode split():

let myString = "freeCodeCamp";
const splitString = myString.split('');
console.log(splitString); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

Cara Menggunakan Operator Istirahat di JavaScript

Di sisi lain, operator sisanya memungkinkan Anda untuk menggabungkan sejumlah argumen ke dalam array dan kemudian melakukan apa pun yang Anda suka dengan argumen tersebut. Ia menggunakan array untuk mewakili argumen dalam jumlah tak terbatas.

Sintaks operator lainnya

const func = (first, ...rest) => {};

Contoh sempurna untuk mengilustrasikan hal ini adalah jika kita memiliki daftar angka, dan kita ingin menggunakan angka pertama sebagai pengali. Kami kemudian ingin memasukkan nilai perkalian dari angka-angka yang tersisa ke dalam array:

const multiplyArgs = (multiplier, ...otherArgs) => {
    return otherArgs.map((number) => {
    return number * multiplier;
    });
};
let multipiedArray = multiplyArgs(6, 5, 7, 9);
console.log(multipiedArray); // [30,42,54]

Berikut adalah representasi yang baik dari operator lainnya dan seperti apa nilainya:

const multiplyArgs = (multiplier, ...otherArgs) => {
    console.log(multiplier); // 6
    console.log(otherArgs); // [5,7,9]
};
multiplyArgs(6, 5, 7, 9);

Catatan: Parameter Rest harus menjadi parameter formal terakhir.

const multiplyArgs = (multiplier, ...otherArgs, lastNumber) => {
    console.log(lastNumber); // Uncaught SyntaxError: Rest parameter must be last formal parameter
};
multiplyArgs(6, 5, 7, 9);

Perbedaan Antara Operator Spread dan Rest di JavaScript

Pada titik ini, Anda mungkin bingung karena kedua metode tersebut tampak sangat mirip. Namun tim JS melakukan pekerjaan yang sangat baik dengan penamaannya, karena ia mendefinisikan fungsi setiap penggunaan ....

Kami menggunakan operator spread untuk menyebarkan nilai array atau iterable ke dalam array atau objek.

Sementara kami menggunakan operator Istirahat untuk mengumpulkan elemen tersisa yang diteruskan ke suatu fungsi sebagai array.

const myFunction = (name1, ...rest) => { // used rest operator here
    console.log(name1);
    console.log(rest);
};
let names = ["John", "Jane", "John", "Joe", "Joel"];
myFunction(...names); // used spread operator here

Terima kasih telah membaca dan memberikan komentar di bawah jika Anda mengalami masalah atau ingin menyarankan cara yang lebih baik.