Spread syntax adalah fitur dalam JavaScript yang memungkinkan untuk menyebar atau mengekstrak nilai-nilai dari suatu struktur data, seperti array atau objek, dan menggabungkannya ke dalam struktur data lain. Dengan Spread Syntax, Anda dapat membuat salinan yang mendalam (deep copy) dari array atau objek, menggabungkan multiple array atau objek dengan mudah, menggunakan array atau objek sebagai argumen dalam pemanggilan fungsi, dan membuat objek baru dengan properti tambahan tanpa mengubah objek yang ada.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6]
Script di atas menggabungkan dua array, array1 dan array2, menjadi satu array baru menggunakan spread syntax :
const array1 = [1, 2, 3]; dan const array2 = [4, 5, 6]; mendefinisikan dua array dengan nilai-nilai yang telah ditentukan.
const combinedArray = [...array1, ...array2]; menggunakan spread syntax ([...array1, ...array2]) untuk menyebar nilai-nilai dari array1 dan array2 ke dalam array baru yang disimpan dalam variabel combinedArray. Dengan menggunakan spread syntax, elemen-elemen dari kedua array tersebut digabungkan menjadi satu array.
console.log(combinedArray); mencetak hasil penggabungan array ke konsol.
Hasilnya adalah [1, 2, 3, 4, 5, 6], yang merupakan gabungan dari nilai-nilai array1 dan array2 dalam satu array baru.
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // Output: [1, 2, 3]
// Modifikasi salinan array
copiedArray.push(4);
console.log(copiedArray); // Output: [1, 2, 3, 4]
console.log(originalArray); // Output: [1, 2, 3] (original array tidak terpengaruh)
Script di atas menjelaskan langkah-langkah membuat salinan Array menggunakan Spread Syntax pada JavaScript :
const originalArray = [1, 2, 3]; mendefinisikan array originalArray dengan nilai-nilai tertentu.
const copiedArray = [...originalArray]; menggunakan spread syntax ([...originalArray]) untuk membuat salinan array originalArray. Ini membuat salinan baru dari array dengan nilai-nilai yang sama seperti originalArray.
console.log(copiedArray); mencetak salinan array ke konsol. Outputnya adalah [1, 2, 3], yang merupakan salinan dari originalArray.
copiedArray.push(4); memodifikasi salinan array dengan menambahkan nilai 4 ke dalamnya.
console.log(copiedArray); mencetak salinan array setelah dimodifikasi ke konsol. Outputnya adalah [1, 2, 3, 4], yang merupakan salinan dari originalArray dengan penambahan nilai 4.
console.log(originalArray); mencetak array asli ke konsol. Outputnya tetap [1, 2, 3], yang menunjukkan bahwa perubahan yang terjadi pada salinan array tidak memengaruhi array asli originalArray.
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // Output: { a: 1, b: 2, c: 3, d: 4 }
Berikut langkah - langkah menggunakan spread syntax untuk menggabungkan dua objek, obj1 dan obj2, menjadi satu objek baru yang disimpan dalam variabel combinedObj :
const obj1 = { a: 1, b: 2 }; dan const obj2 = { c: 3, d: 4 }; mendefinisikan dua objek dengan pasangan kunci-nilai yang telah ditentukan.
const combinedObj = { ...obj1, ...obj2 }; menggunakan spread syntax ({ ...obj1, ...obj2 }) untuk menyebar pasangan kunci-nilai dari obj1 dan obj2 ke dalam objek baru yang disimpan dalam variabel combinedObj. Dengan menggunakan spread syntax, pasangan kunci-nilai dari kedua objek tersebut digabungkan menjadi satu objek.
console.log(combinedObj); mencetak hasil penggabungan objek ke konsol.
Hasilnya adalah { a: 1, b: 2, c: 3, d: 4 }, yang merupakan gabungan dari pasangan kunci-nilai dari obj1 dan obj2 dalam satu objek baru.
const originalObj = { a: 1, b: 2 };
const copiedObj = { ...originalObj };
console.log(copiedObj); // Output: { a: 1, b: 2 }
// Modifikasi salinan objek
copiedObj.c = 3;
console.log(copiedObj); // Output: { a: 1, b: 2, c: 3 }
console.log(originalObj); // Output: { a: 1, b: 2 } (original objek tidak terpengaruh)
Script di atas menunjukkan bagaimana spread syntax digunakan untuk membuat salinan (copy) dari objek originalObj, kemudian memodifikasi salinan tersebut tanpa memengaruhi objek asli :
const originalObj = { a: 1, b: 2 }; mendefinisikan objek originalObj dengan pasangan kunci-nilai tertentu.
const copiedObj = { ...originalObj }; menggunakan spread syntax ({ ...originalObj }) untuk membuat salinan objek originalObj. Ini membuat salinan baru dari objek dengan pasangan kunci-nilai yang sama seperti originalObj.
console.log(copiedObj); mencetak salinan objek ke konsol. Outputnya adalah { a: 1, b: 2 }, yang merupakan salinan dari originalObj.
copiedObj.c = 3; memodifikasi salinan objek dengan menambahkan pasangan kunci-nilai baru c: 3.
console.log(copiedObj); mencetak salinan objek setelah dimodifikasi ke konsol. Outputnya adalah { a: 1, b: 2, c: 3 }, yang merupakan salinan dari originalObj dengan penambahan pasangan kunci-nilai c: 3.
console.log(originalObj); mencetak objek asli ke konsol. Outputnya tetap { a: 1, b: 2 }, yang menunjukkan bahwa perubahan yang terjadi pada salinan objek tidak memengaruhi objek asli originalObj.
Artikel Lainnya Dengan Kategori Terkait :
3. 6 Cara Melakukan Loop Pada Array di JavaScript
5. Belajar Javascript #01 Belajar Menyisipkan Javascript Pada HTML menggunakan Metode Internal
6. Belajar Javascript #02 Belajar Menyisipkan Javascript Pada HTML Menggunakan Metode External
7. Belajar Javascript #03 Mendeklarasikan Variabel
8. Belajar Javascript #05 Menampilkan data di console
9. Belajar Javascript #06 Operator Aritmatika
10. Belajar Javascript #07 Assignment Operator
11. Belajar Javascript #08 String Operator
12. Belajar Javascript #09 Operator Perbandingan
13. Belajar Javascript #10 Operator Logika AND, OR, NOT, pada JavaScript
14. Belajar Javascript #11 Belajar Fungsi Pada Javascript
15. Belajar Javascript #12 Cara Mendeklarasikan Fungsi Pada Javascript
16. Belajar Javascript #13 Belajar Parameter & Argument Pada Javascript
17. Belajar Javascript #14 Belajar apa itu Function Hoisting pada javascript, dan contohnya
18. Belajar Javascript #15 Lingkup Global vs Lingkup Lokal
19. Belajar Javascript #16 Mengenal Objek Javascript
20. Belajar Javascript #17 Menggunakan Object Literal
21. Belajar Javascript #18 Mengakses properti Objek
22. Belajar Javascript #19 Menambah Properti Baru pada Objek
23. Belajar Javascript #20 Menghapus Properti Objek
24. Belajar Javascript #21 Object Method
25. Belajar Javascript #22 Mengenal Array
26. Belajar Javascript #23 Mendeklarasikan Array
27. Belajar Javascript #24 Nomor Index dan Jumlah Data Array
28. Belajar Javascript #25 Mengakses Data/Element di Dalam Array
29. Belajar Javascript #26 Mengubah Data/Element pada Array
30. Belajar Javascript #27 Array Method
31. Belajar Javascript #28 Mengenal Obejek Math
32. Belajar Javascript #29 Properti Objek Math
33. Belajar Javascript #30 Method Objek Math
34. Belajar Javascript #31 Apa Itu Condinational Dalam Javascript
35. Belajar Javascript #32 Menggunakan if, else if, dan else
36. Belajar Javascript #33 Menggunakan Switch Case
37. Belajar Javascript #34 Apa itu loop?
38. Belajar Javascript #35 Apa itu for loop?
39. Belajar Javascript #36 For/in Loop
40. Belajar Javascript #37 For/of Loop
41. Belajar Javascript #38 While Loop
42. Belajar Javascript #39 Do while loop
43. Belajar Javascript #40 Pengenalan JavaScript HTML DOM
44. Belajar Javascript #41 Mengakses Element HTML
45. Belajar Javascript #42 DOM Event
46. Belajar Javascript #43 Mengubah Element HTML
47. Belajar Javascript #44 ECMAScript
48. Belajar Javascript #45 let vs const vs var
49. Belajar Javascript #46 Template Literal
50. Belajar Javascript #47 Arrow Function
51. Belajar Javascript #48 Default Parameter
52. Belajar Javascript #49 Rest Parameter & Spread Operator
53. Belajar Javascript #50 Destrukturisasi
54. Belajar Javascript #51 Object Shorthand
55. Cara Install NodeJS dan Pengertian !
56. Cara Kerja Objek Dalam JavaScript
57. Cara Membuat Drag & Drop Dengan JS
58. Cara Menggunakan JavaScript Dengan Singkat
60. Function JavaScript Yang Harus Kalian Tahu
61. Getters & Setters Di JavaScript
62. HOW TO STYLE IN JAVASCRIPT
63. Implementasi Barcode menggunakan JsBarcode Pada JavaScript
65. Implementasi Password Generator Dalam JavaScript
66. Implementasi Penggunaan UseRef Pada React JS
67. Implementasi permintaan GET menggunakan XMLHttpRequest
69. JavaScript Function Apply()
70. JavaScript Notification API
71. JavaScript Template LIterals
73. Kinerja Supercharge Dengan Pekerja Web Menggunakan JavaScript
74. Kode Kilat JavaScript: Solusi Cepat dalam Satu Baris!
75. Kombinasi Scroll Magic dan Intersection Observer
76. Memahami dan Menerapkan Metode filter() dalam JavaScript
77. Memahami function bind pada JavaScript
78. Memahami function call () pada JavaScript
79. Memahami Konsep Dasar Hoisting pada JavaScript
80. Memahami Nama Properti Dinamis dalam JavaScript
81. Memahami Recursion JavaScript
82. Memahami Use Strict Pada JavaScript
83. Membuat Textarea dengan Tinggi Otomatis: Solusi Elegan untuk Pengalaman Pengguna yang Lebih Baik
84. Mempelajari Javascript #04 Tipe Data Javascript
85. Mempelajari Penggunaan Event Delegation Dalam JavaScript
86. Mengenal 4 Cara Untuk Melakukan Panggilan API
87. Mengenal Class Di JavaScript
88. MengenaL Macam-Macam String Dasar JavaScript
89. Mengenal Penggunaan Fungsi Pada JavaScript
90. Mengenal Penggunaan Spread Syntax Pada JavaScript
91. Mengenal Variabel Pada JavaScript
92. Mengenali Beberapa Macam Loop Pada JavaScript
93. Mengoptimalkan Kode Dengan Destructuring Assignment
94. Meningkatkan Interaktivitas dengan Pembuatan Tab Bar : Memperkaya Navigasi Website Anda
96. Metode Console yang Wajib Anda Ketahui
97. Metode flat() pada array di JavaScript
98. Operator Penyebaran JavaScript
99. Perbedaan InnerText dan InnerHTML dalam JavaScript
100. Tema Tab Responsif dengan Animasi: Meningkatkan Pengalaman Pengguna melalui Navigasi Dinamis
Ahmad Dika Zulfahmi - 18 Februari 2025
Jungler Tank Bisa Kembali? Update yang Bisa Membawa Jungler Tank ke Meta Lagi
Ahmad Dika Zulfahmi - 06 Februari 2025
Setting Sensitivitas Auto Headshot Free Fire Terbaik
Ahmad Dika Zulfahmi - 03 Februari 2025
Flash Sale Minaplay! Top Up Diamond Free Fire Murah & Cepat!