Panduan untuk Shallow Copy di JavaScript

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia shallow copying di JavaScript. Jangan khawatir jika Anda baru dalam pemrograman – saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatu langkah demi langkah. Jadi, ambil secangkir kopi (atau minuman favorit Anda), dan mari kita masuk ke dalam!

Apa Itu Shallow Copy?

Sebelum kita masuk ke rincian shallow copying, mari kita mulai dengan analogi sederhana. Bayangkan Anda memiliki lukisan yang indah, dan Anda ingin membuat salinannya. Anda memiliki dua pilihan:

1. Ambil foto lukisan itu (shallow copy)
2. Buat lukisan itu dari awal (deep copy)

Di JavaScript, shallow copy seperti mengambil foto itu. Itu membuat objek atau array baru, tapi elemen di dalamnya masih merujuk ke elemen yang sama seperti aslinya.

Bagaimana Shallow Copy Bekerja

Ketika Anda membuat shallow copy:

1. Objek atau array baru diciptakan
2. Properti tingkat atas disalin
3. Objek atau array bersarang masih merujuk ke aslinya

Mari kita lihat ini dalamaksi dengan beberapa kode!

// Objek asli
let original = {
name: "Alice",
age: 30,
hobbies: ["reading", "swimming"]
};

// Shallow copy
let shallowCopy = Object.assign({}, original);

// Mengubah salinan
shallowCopy.name = "Bob";
shallowCopy.hobbies.push("coding");

console.log(original);
console.log(shallowCopy);

Jika Anda menjalankan kode ini, Anda akan melihat sesuatu yang menarik:

{name: "Alice", age: 30, hobbies: ["reading", "swimming", "coding"]}
{name: "Bob", age: 30, hobbies: ["reading", "swimming", "coding"]}

Perhatikan bagaimana mengubah name hanya mempengaruhi salinan, tapi mengubah hobbies mempengaruhi kedua objek. Itu esensial shallow copy!

Deep Copy vs. Shallow Copy

Sekarang kita mengerti shallow copy, mari kita bandingkan dengan saudaranya, deep copy.

Fitur	Shallow Copy	Deep Copy
Pembuatan objek baru	Ya	Ya
Menyalin properti tingkat atas	Ya	Ya
Menyalin objek/array bersarang	Tidak (merujuk asli)	Ya (membuat salinan baru)
Performa	Lebih cepat	Lebih lambat
Penggunaan memori	Lebih sedikit	Lebih banyak

Kapan Menggunakan Shallow Copy

Shallow copies sangat cocok ketika:

1. Anda hanya perlu mengubah properti tingkat atas
2. Performa adalah perhatian
3. Anda ingin membuat referensi baru ke objek

Kapan Menggunakan Deep Copy

Deep copies lebih baik ketika:

1. Anda perlu mengubah properti bersarang tanpa mempengaruhi aslinya
2. Anda ingin salinan objek yang sepenuhnya independen

Contoh Shallow Copy di JavaScript

Mari kita jelajahi beberapa cara umum untuk membuat shallow copies di JavaScript!

1. Object.assign()

let original = { a: 1, b: { c: 2 } };
let copy = Object.assign({}, original);

copy.a = 5;
copy.b.c = 10;

console.log(original); // { a: 1, b: { c: 10 } }
console.log(copy);     // { a: 5, b: { c: 10 } }

Di sini, Object.assign() membuat shallow copy. Mengubah a hanya mempengaruhi salinan, tapi mengubah b.c mempengaruhi kedua objek karena itu adalah properti bersarang.

2. Spread Operator (...)

let fruits = ["apple", "banana", ["grape", "orange"]];
let fruitsCopy = [...fruits];

fruitsCopy[0] = "pear";
fruitsCopy[2].push("kiwi");

console.log(fruits);     // ["apple", "banana", ["grape", "orange", "kiwi"]]
console.log(fruitsCopy); // ["pear", "banana", ["grape", "orange", "kiwi"]]

Operator spread membuat shallow copy dari array. Mengubah elemen pertama hanya mempengaruhi salinan, tapi menambahkan ke array bersarang mempengaruhi kedua.

3. Array.from()

let numbers = [1, 2, [3, 4]];
let numbersCopy = Array.from(numbers);

numbersCopy[0] = 10;
numbersCopy[2].push(5);

console.log(numbers);     // [1, 2, [3, 4, 5]]
console.log(numbersCopy); // [10, 2, [3, 4, 5]]

Array.from() juga membuat shallow copy. Elemen tingkat pertama disalin, tapi array bersarang masih merujuk.

Pentingnya Shallow Copy

Anda mungkin bertanya-tanya, " Mengapa kita perlu shallow copies?" Pregunta grande! Shallow copies sangat berguna dalam banyak situasi:

1. Performa: Shallow copies lebih cepat dan menggunakan memori kurang daripada deep copies, menjadikannya ideal untuk objek besar atau operasi berkala.

2. Immutabilitas: Mereka membantu menjaga imutabilitas dalam kode Anda, yang sangat penting untuk manajemen state yang prediktif dalam kerangka kerja JavaScript modern.

3. Menghindari Efek Samping: Shallow copies memungkinkan Anda mengubah objek tanpa langsung mengubah aslinya, mengurangi efek samping yang tak terduga dalam kode Anda.

4. React dan Redux: Dalam aplikasi React dan Redux, shallow copies sering digunakan untuk memicu re-renders dan memperbarui state tanpa mengubah data asli.

Ini adalah contoh kasus nyata:

function updateUserProfile(user, newName) {
// Buat shallow copy dari objek pengguna
let updatedUser = Object.assign({}, user);

// Update nama
updatedUser.name = newName;

return updatedUser;
}

let user = {
name: "Alice",
age: 30,
address: {
city: "Wonderland",
street: "Rabbit Hole Lane"
}
};

let updatedUser = updateUserProfile(user, "Alicia");

console.log(user);        // Objek pengguna asli tidak berubah
console.log(updatedUser); // Objek baru dengan nama yang diperbarui

Dalam contoh ini, kita mengubah nama pengguna tanpa mengubah objek asli. Ini adalah pola umum dalam manajemen state dan membantu menjaga integritas data.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia shallow copying di JavaScript. Ingat, shallow copies adalah seperti mengambil foto cepat – mereka cepat dan efisien, tapi mereka tidak menangkap semua hal dalam detil.

Sebagai Anda terus melanjutkan perjalanan JavaScript Anda, Anda akan menemukan banyak situasi di mana shallow copying sangat berguna. Itu adalah alat kuat dalam peralatan pemrograman Anda, khususnya saat bekerja dengan struktur data kompleks dan manajemen state.

Tetap latih, tetap curiga, dan jangan khawatir untuk mencoba. Sebelum Anda tahu, Anda akan membuat dan memanipulasi objek seperti seorang ahli!

Selamat coding, dan semoga salinan Anda selalu sesuai kebutuhan Anda! ?

Credits: Image by storyset