Object di JavaScript: Menyimpan Data dengan Key-Value

Panduan lengkap belajar object di JavaScript. Apa itu object, cara membuat, mengakses, dan memodifikasi data dengan key-value. Disertai contoh kode & studi kasus.

Keywords: object javascript, belajar object js, key value javascript, cara membuat object, object vs array js

Kalau array adalah wadah untuk menyimpan banyak nilai berdasarkan index angka, bagaimana kalau kita ingin menyimpan data dengan nama tertentu (key)? 🤔
Misalnya, kita ingin menyimpan data siswa yang berisi nama, umur, dan kelas.

Jawabannya adalah Object di JavaScript.
Object adalah struktur data yang sangat fleksibel dan sering digunakan dalam pengembangan aplikasi modern, termasuk web dan API.

Apa Itu Object di JavaScript?

Object adalah struktur data di JavaScript yang menyimpan data dalam bentuk key-value.

• Key → nama properti (harus unik dalam satu object).
• Value → nilai dari properti tersebut (bisa string, number, boolean, array, bahkan object lain).

👉 Contoh sederhana:

let siswa = {
  nama: "Budi",
  umur: 17,
  kelas: "12 IPA"
};

console.log(siswa.nama);  // Output: Budi
console.log(siswa.umur);  // Output: 17
console.log(siswa.kelas); // Output: 12 IPA

let siswa = {
  nama: "Budi",
  umur: 17,
  kelas: "12 IPA"
};

console.log(siswa.nama);  // Output: Budi
console.log(siswa.umur);  // Output: 17
console.log(siswa.kelas); // Output: 12 IPA

Cara Membuat Object di JavaScript

1. Menggunakan kurung kurawal {} (cara paling umum):

let mobil = {
  merk: "Toyota",
  warna: "Hitam",
  tahun: 2020
};

let mobil = {
  merk: "Toyota",
  warna: "Hitam",
  tahun: 2020
};

2. Menggunakan new Object():

let mobil = new Object();
mobil.merk = "Toyota";
mobil.warna = "Hitam";
mobil.tahun = 2020;

3. Menggunakan function constructor atau class (lebih lanjut):

function Mobil(merk, warna, tahun) {
  this.merk = merk;
  this.warna = warna;
  this.tahun = tahun;
}

let mobil1 = new Mobil("Honda", "Merah", 2022);
console.log(mobil1);

function Mobil(merk, warna, tahun) {
  this.merk = merk;
  this.warna = warna;
  this.tahun = tahun;
}

let mobil1 = new Mobil("Honda", "Merah", 2022);
console.log(mobil1);

Cara Mengakses Data dalam Object

Ada 2 cara untuk mengakses data object:

1. Dot Notation (.)

console.log(mobil.merk);

console.log(mobil.merk);

2. Bracket Notation []

console.log(mobil["warna"]);

console.log(mobil["warna"]);

👉 Bracket Notation cocok digunakan jika key berbentuk string dengan spasi atau disimpan dalam variabel.

Menambah & Menghapus Properti dalam Object

let laptop = {
  merk: "Asus",
  ram: "8GB"
};

// Menambah properti
laptop.processor = "Intel i5";

// Menghapus properti
delete laptop.ram;

console.log(laptop);

let laptop = {
  merk: "Asus",
  ram: "8GB"
};

// Menambah properti
laptop.processor = "Intel i5";

// Menghapus properti
delete laptop.ram;

console.log(laptop);

Output:

{ merk: 'Asus', processor: 'Intel i5' }

{ merk: 'Asus', processor: 'Intel i5' }

Object Bersarang (Nested Object)

Object bisa menyimpan object lain di dalamnya.

let siswa = {
  nama: "Ani",
  alamat: {
    kota: "Jakarta",
    provinsi: "DKI Jakarta"
  }
};

console.log(siswa.alamat.kota); // Output: Jakarta

let siswa = {
  nama: "Ani",
  alamat: {
    kota: "Jakarta",
    provinsi: "DKI Jakarta"
  }
};

console.log(siswa.alamat.kota); // Output: Jakarta

Looping pada Object

Karena object tidak berbasis index seperti array, kita menggunakan for…in.

let buku = {
  judul: "Belajar JavaScript",
  penulis: "John Doe",
  tahun: 2023
};

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

let buku = {
  judul: "Belajar JavaScript",
  penulis: "John Doe",
  tahun: 2023
};

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

Output:

judul: Belajar JavaScript  
penulis: John Doe  
tahun: 2023  

judul: Belajar JavaScript  
penulis: John Doe  
tahun: 2023  

Object vs Array

Studi Kasus 1: Data Produk

let produk = {
  nama: "Laptop Gaming",
  harga: 15000000,
  stok: 10
};

console.log("Produk: " + produk.nama);
console.log("Harga: Rp" + produk.harga);
console.log("Stok: " + produk.stok);

let produk = {
  nama: "Laptop Gaming",
  harga: 15000000,
  stok: 10
};

console.log("Produk: " + produk.nama);
console.log("Harga: Rp" + produk.harga);
console.log("Stok: " + produk.stok);

Studi Kasus 2: Daftar Mahasiswa dengan Array of Object

let mahasiswa = [
  { nama: "Budi", jurusan: "Informatika" },
  { nama: "Siti", jurusan: "Sistem Informasi" },
  { nama: "Andi", jurusan: "Teknik Komputer" }
];

for (let mhs of mahasiswa) {
  console.log(mhs.nama + " - " + mhs.jurusan);
}

let mahasiswa = [
  { nama: "Budi", jurusan: "Informatika" },
  { nama: "Siti", jurusan: "Sistem Informasi" },
  { nama: "Andi", jurusan: "Teknik Komputer" }
];

for (let mhs of mahasiswa) {
  console.log(mhs.nama + " - " + mhs.jurusan);
}

Output:

Budi - Informatika  
Siti - Sistem Informasi  
Andi - Teknik Komputer  

Budi - Informatika  
Siti - Sistem Informasi  
Andi - Teknik Komputer  

FAQ

1. Apakah object bisa berisi array?
Ya, object bisa berisi array dan bahkan object lain.

2. Kapan harus menggunakan object, kapan array?

• Gunakan array untuk data sejenis yang berurutan.
• Gunakan object untuk data dengan label/nama properti.

3. Apakah urutan properti dalam object tetap?
Secara teknis JavaScript tidak menjamin urutan key, tapi mayoritas browser modern tetap konsisten.

Kesimpulan

• Object = struktur data dengan format key-value.
• Bisa diakses dengan dot notation dan bracket notation.
• Fleksibel karena bisa menyimpan array, object lain, bahkan fungsi.
• Sering digunakan untuk data kompleks seperti pengguna, produk, atau konfigurasi aplikasi.

👉 Lanjut ke [Hari 11: Function di JavaScript – Membuat Kode yang Bisa Digunakan Ulang] agar kamu bisa menulis kode lebih efisien!