Array Asosiatif JavaScript Dijelaskan: Objek, Penggunaan, dan Perbedaan Utama

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan

JavaScript adalah salah satu bahasa pemrograman penting dalam pengembangan web. Di antara banyak fiturnya, “array asosiatif” merupakan struktur penting yang membantu dalam manajemen dan pemrosesan data yang efisien.

Dalam artikel ini, kami memberikan penjelasan mendetail tentang array asosiatif JavaScript, mulai dari konsep dasar hingga penggunaan yang lebih lanjutan. Contoh kode disertakan agar konten mudah dipahami, bahkan bagi pemula, jadi silakan gunakan artikel ini sebagai referensi praktis.

2. Apa Itu Array Asosiatif?

2.1 Definisi Array Asosiatif

Array asosiatif adalah jenis struktur data yang mengelola data sebagai pasangan “kunci” dan “nilai”. Sementara array standar menggunakan nomor indeks (0, 1, 2, …), array asosiatif memungkinkan Anda mengakses data menggunakan kunci string yang arbitrer.

2.2 Array Asosiatif di JavaScript

Di JavaScript, array asosiatif direpresentasikan menggunakan objek. Objek didefinisikan dengan kurung kurawal {} dan menyimpan data sebagai pasangan kunci–nilai.

Berikut adalah contoh dasar array asosiatif dalam JavaScript.

let user = {
  name: "Sato",
  age: 25,
  email: "sato@example.com"
};

2.3 Perbedaan Antara Array Asosiatif dan Array Biasa

Array asosiatif dan array biasa berbeda dalam hal‑hal berikut.

2.4 Kasus Penggunaan

Array biasa cocok untuk mengelola data berbentuk daftar, sementara array asosiatif memudahkan penanganan data dengan atribut khusus, seperti informasi pengguna atau pengaturan konfigurasi.

3. Cara Membuat Array Asosiatif

3.1 Mendeklarasikan dengan Literal Objek

Cara paling umum untuk membuat array asosiatif di JavaScript adalah dengan menggunakan literal objek.

let product = {
  id: 101,
  name: "Laptop PC",
  price: 120000
};

3.2 Membuat dengan new Object()

Pendekatan lain adalah membuat objek menggunakan new Object().

let product = new Object();
product.id = 101;
product.name = "Laptop PC";
product.price = 120000;

3.3 Menambahkan Kunci dan Nilai Secara Dinamis

Dengan menggunakan notasi kurung siku, Anda juga dapat memakai variabel sebagai kunci.

let key = "color";
let product = {};
product[key] = "red";

4. Memanipulasi Array Asosiatif

4.1 Menambahkan Elemen

Menambahkan dengan notasi titik

let user = {};
user.name = "Tanaka";
user.age = 30;

Menambahkan dengan notasi kurung siku

let user = {};
user["email"] = "tanaka@example.com";

4.2 Mengambil Elemen

Mengambil dengan notasi titik

console.log(user.name); // "Tanaka"

Mengambil dengan notasi kurung siku

console.log(user["email"]); // "tanaka@example.com"

4.3 Memperbarui Elemen

Anda dapat memperbarui nilai yang sudah ada dengan menetapkan nilai baru ke kunci yang sama.

user.age = 35;
console.log(user.age); // 35

4.4 Menghapus Elemen

Gunakan kata kunci delete untuk menghapus pasangan kunci–nilai.

delete user.phone;
console.log(user.phone); // undefined

5. Mengiterasi Array Asosiatif

5.1 Iterasi dengan Loop for…in

Loop for...in memungkinkan Anda mengiterasi kunci‑kunci dalam sebuah array asosiatif.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}

5.2 Menggunakan Object.keys() dan forEach()

Anda dapat mengambil array kunci menggunakan Object.keys() dan kemudian mengiterasinya dengan forEach().

Object.keys(user).forEach(key => {
  console.log(key + ": " + user[key]);
});

5.3 Menggunakan Object.entries() dan for…of

Dengan Object.entries(), Anda dapat mengiterasi baik kunci maupun nilai secara bersamaan.

for (let [key, value] of Object.entries(user)) {
  console.log(key + ": " + value);
}

6. Mengurutkan Array Asosiatif

6.1 Mengurutkan berdasarkan Kunci

Objek JavaScript itu sendiri tidak dapat diurutkan secara langsung, tetapi Anda dapat mengurutkan kuncinya terlebih dahulu dan kemudian mengakses nilai‑nilai dalam urutan yang sudah diurutkan.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

let sortedKeys = Object.keys(user).sort();
sortedKeys.forEach(key => {
  console.log(key + ": " + user[key]);
});

6.2 Mengurutkan berdasarkan Nilai

Untuk mengurutkan berdasarkan nilai, ubah objek menjadi array pasangan kunci–nilai menggunakan Object.entries().

let scores = {
  Alice: 85,
  Bob: 92,
  Charlie: 88
};

let sortedEntries = Object.entries(scores).sort((a, b) => a[1] - b[1]);
sortedEntries.forEach(([key, value]) => {
  console.log(key + ": " + value);
});

6.3 Catatan Penting Saat Mengurutkan

Ketika nilai disimpan sebagai string, pengurutan numerik memerlukan konversi eksplisit.

let data = {
  a: "10",
  b: "2",
  c: "15"
};

let sorted = Object.entries(data).sort((a, b) => Number(a[1]) - Number(b[1]));
console.log(sorted);

7. Catatan Penting Saat Menggunakan Array Asosiatif

7.1 Kunci Duplikat dan Penimpaan

Jika kunci yang sama didefinisikan beberapa kali, nilai yang terakhir akan menimpa nilai sebelumnya.

let user = {
  name: "Tanaka",
  age: 30
};

user.name = "Sato";
console.log(user.name); // "Sato"

7.2 undefined dan Memeriksa Keberadaan Kunci

Untuk memeriksa apakah sebuah kunci ada dalam array asosiatif, gunakan operator in atau hasOwnProperty().

let user = { name: "Tanaka" };
console.log("age" in user); // false
console.log(user.hasOwnProperty("age")); // false

7.3 Metode push Tidak Dapat Digunakan

Array asosiatif (objek) tidak mendukung metode push(), yang hanya tersedia untuk array biasa.

let user = {};
user.push({ name: "Tanaka" }); // TypeError: user.push is not a function

7.4 Perbedaan dengan Data JSON

Objek JavaScript dan data JSON saling terkait tetapi tidak sama. Objek harus dikonversi menjadi string JSON untuk pertukaran data.

let obj = { name: "Tanaka", age: 30 };
let jsonData = JSON.stringify(obj);
console.log(jsonData); // '{"name":"Tanaka","age":30}'

let parsed = JSON.parse(jsonData);
console.log(parsed.name); // "Tanaka"

8. Ringkasan

8.1 Poin-poin Utama Array Asosiatif

• Data dikelola menggunakan pasangan kunci–nilai.
• Operasi fleksibel memungkinkan penambahan, pengambilan, pembaruan, dan penghapusan data.
• Array asosiatif mendukung iterasi dan pengurutan melalui metode bawaan.

8.2 Contoh Penggunaan Praktis

Berikut adalah contoh penanganan beberapa objek pengguna menggunakan array yang digabungkan dengan array asosiatif.

let users = [
  { id: 1, name: "Tanaka", email: "tanaka@example.com" },
  { id: 2, name: "Sato", email: "sato@example.com" }
];

users.forEach(user => {
  console.log(user.name);
});

9. FAQ – Pertanyaan yang Sering Diajukan

Q1. Apa Perbedaan antara Array Asosiatif dan Array Biasa?

Array biasa menggunakan indeks numerik, sementara array asosiatif menggunakan kunci string untuk mengakses nilai.

let arr = ["apple", "orange"];
console.log(arr[1]); // "orange"

let fruits = { apple: "apple", orange: "orange" };
console.log(fruits["orange"]); // "orange"

Q2. Bagaimana Saya Dapat Memeriksa Apakah Sebuah Kunci Ada?

Anda dapat memeriksa keberadaan sebuah kunci menggunakan operator in.

if ("age" in user) {
  console.log(user.age);
}

10. Ringkasan Akhir

Array asosiatif JavaScript sangat berguna untuk mengelola dan mengatur data.
Dalam artikel ini, kami membahas segala hal mulai dari konsep dasar hingga pola penggunaan yang lebih lanjutan.

Langkah Selanjutnya:

• Jalankan contoh kode sendiri untuk memperdalam pemahaman Anda.
• Cobalah mengintegrasikan array asosiatif dengan data JSON dan operasi API.