Menambahkan Kunci ke Array Objek di JavaScript
Dalam pengembangan web, kita seringkali bekerja dengan data yang terstruktur dalam bentuk array objek. Terkadang, kita perlu menambahkan kunci baru ke objek-objek dalam array tersebut.
Metode Umum
1. map(): Metode map() memungkinkan kita untuk mentransformasi setiap elemen dalam array menjadi elemen baru.
const data = [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 },
{ name: "Peter", age: 40 }
];
const updatedData = data.map(item => ({ ...item, city: "New York" }));
console.log(updatedData);
// Output:
// [
// { name: "John", age: 30, city: "New York" },
// { name: "Jane", age: 25, city: "New York" },
// { name: "Peter", age: 40, city: "New York" }
// ]
2. forEach(): Metode forEach() memungkinkan kita untuk mengiterasi setiap elemen dalam array dan melakukan operasi pada masing-masing elemen.
const data = [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 },
{ name: "Peter", age: 40 }
];
data.forEach(item => {
item.city = "New York";
});
console.log(data);
// Output:
// [
// { name: "John", age: 30, city: "New York" },
// { name: "Jane", age: 25, city: "New York" },
// { name: "Peter", age: 40, city: "New York" }
// ]
Menambahkan Kunci dengan Nilai Berbeda
Jika kita ingin menambahkan kunci dengan nilai yang berbeda untuk setiap objek, kita bisa menggunakan fungsi yang mengembalikan nilai kunci yang berbeda.
const data = [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 },
{ name: "Peter", age: 40 }
];
function generateCity(index) {
return `City ${index + 1}`;
}
const updatedData = data.map((item, index) => ({ ...item, city: generateCity(index) }));
console.log(updatedData);
// Output:
// [
// { name: "John", age: 30, city: "City 1" },
// { name: "Jane", age: 25, city: "City 2" },
// { name: "Peter", age: 40, city: "City 3" }
// ]
Tips Tambahan
- Immutable: Sebaiknya gunakan metode
map()dan operator spread (...) untuk menjaga objek asli tetap tidak berubah. - Konsistensi: Gunakan konvensi penamaan yang konsisten untuk kunci baru.
- Validasi: Pastikan data yang akan ditambahkan ke kunci baru valid dan sesuai dengan format yang diharapkan.
Dengan memahami metode-metode ini, Anda dapat dengan mudah menambahkan kunci baru ke array objek di JavaScript dan memanipulasi data Anda dengan lebih fleksibel.