JavaScript - Salinannya: Panduan untuk Pemula

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

Apa Itu Salinannya?

Sebelum kita masuk ke rincian penyalinan浅, mari kita mulai dengan analogi sederhana. Bayangkan Anda memiliki lukisan yang indah, dan Anda ingin membuat salinan dari itu. Anda memiliki dua pilihan:

1. Ambil foto lukisan itu (salinannya)
2. Buat lukisan sepenuhnya dari awal (salinan dalam)

Dalam JavaScript, salinannya adalah seperti mengambil foto itu. Itu membuat objek atau array baru, tetapi elemen di dalamnya masih merujuk ke elemen yang sama seperti aslinya.

Bagaimana Salinannya Bekerja

Ketika Anda membuat salinannya:

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

mari kita lihat ini dalam aksi dengan beberapa kode!

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

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

// Mengubah salinannya
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 salinannya, tetapi mengubah hobbies mempengaruhi kedua objek. Itu esensi dari salinannya!

Salinannya vs. Salinan Dalam

Sekarang kita mengerti salinannya, mari kita bandingkan dengan saudaranya, salinan dalam.

Fitur	Salinannya	Salinan Dalam
Pembuatan objek baru	Ya	Ya
Menyalin properti tingkat atas	Ya	Ya
Menyalin objek/array bersarang	Tidak (merujuk ke asli)	Ya (membuat salinan baru)
Kinerja	Lebih cepat	Lebih lambat
Penggunaan memori	Lebih sedikit	Lebih banyak

Kapan Menggunakan Salinannya

Salinannya sangat cocok ketika:

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

Kapan Menggunakan Salinan Dalam

Salinan dalam lebih baik ketika:

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

Contoh Salinannya dalam JavaScript

mari kita jelajahi beberapa cara umum untuk membuat salinannya dalam 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 salinannya. Mengubah a hanya mempengaruhi salinannya, tetapi mengubah b.c mempengaruhi kedua objek karena itu adalah properti bersarang.

2. Operator Penyebaran (...)

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 penyebaran membuat salinannya array. Mengubah elemen pertama hanya mempengaruhi salinannya, tetapi 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 salinannya. Elemen tingkat pertama disalin, tetapi array bersarang masih merujuk.

Pentingnya Salinannya

Anda mungkin bertanya-tanya, " Mengapa kita memerlukan salinannya?" Pertanyaan bagus! Salinannya sangat berguna dalam banyak konteks:

1. Kinerja: Salinannya lebih cepat dan menggunakan memori lebih sedikit daripada salinan dalam, menjadikannya ideal untuk objek besar atau operasi yang sering dilakukan.

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: Salinannya 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, salinannya sering digunakan untuk memicu re-renders dan memperbarui state tanpa mengubah data asli.

mari kita lihat contoh nyata:

function updateUserProfile(user, newName) {
// Buat salinannya 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 mengupdate 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 penyalinan浅 dalam JavaScript. Ingat, salinannya adalah seperti mengambil foto cepat – mereka cepat dan efisien, tetapi tidak menangkap segala sesuatu dalam detail penuh.

Dalam perjalanan JavaScript Anda, Anda akan menemukan banyak situasi di mana penyalinan shallow sangat berguna. Ini adalah alat kuat dalam peralatan pemrograman Anda, terutama saat bekerja dengan struktur data kompleks dan manajemen state.

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

Hati-hati coding, dan semoga salinan Anda selalu sesuai kebutuhan Anda! ?

Credits: Image by storyset