Belajar JavaScript Dasar #9: Object


👍 0 ❤️ 0 💡 0 🔥 0 🙌 0 🥳 0
Belajar JavaScript Dasar #9: Object

Halo teman-teman semuanya, setelah sebelumnya kita belajar tentang Array, sekarang kita masuk ke materi yang nggak kalah penting di JavaScript, yaitu Object.

Apa Itu Object?

Object adalah tipe data di JavaScript yang digunakan untuk menyimpan kumpulan data dalam bentuk pasangan key dan value. Kalau array menggunakan index angka, object menggunakan nama properti (key).

Membuat Object di JavaScript

Ada dua cara umum membuat object:

  1. Object Literal {}

    let mahasiswa = {
      nama: "Budi",
      umur: 20,
      jurusan: "Informatika"
    };
    
    console.log(mahasiswa);
    
  2. Menggunakan new Object()

    let siswa = new Object();
    siswa.nama = "Siti";
    siswa.umur = 19;
    siswa.kelas = "12 IPA";
    
    console.log(siswa);
    

    Catatan: Cara object literal {} lebih sering digunakan dan direkomendasikan.

Mengakses Property di Object

Ada dua cara untuk mengakses data di dalam object:

  1. Dot Notation

    console.log(mahasiswa.nama); // Output: Budi
    console.log(siswa.umur);     // Output: 19
    
  2. Bracket Notation

    console.log(mahasiswa["jurusan"]); // Output: Informatika
    console.log(siswa["kelas"]);       // Output: 12 IPA
    

    Kapan pakai bracket notation?

    • Kalau nama property berupa string dinamis atau mengandung spasi.
    • Kalau ingin memilih property menggunakan variabel.

Menambah & Mengubah Property di Object

  • Menambah Property

    mahasiswa.alamat = "Jakarta";
    
    console.log(mahasiswa);
    
  • Mengubah Property

    mahasiswa.umur = 21;
    
    console.log(mahasiswa);
    

Menghapus Property di Object

Gunakan delete untuk menghapus property:

delete mahasiswa.jurusan;

console.log(mahasiswa);

Object di Dalam Object

Object juga bisa berisi object lain:

let mobil = {
  merk: "Toyota",
  model: "Avanza",
  mesin: {
    kapasitas: "1500cc",
    bahanBakar: "Bensin"
  }
};

console.log(mobil.mesin.kapasitas); // Output: 1500cc

Looping di Object

Kalau di array kita pakai forEach, di object kita bisa pakai for...in:

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

Output.

nama : Budi
umur : 21
alamat : Jakarta

Perbandingan Array vs Object

Aspek Array Object
Struktur Berurutan, index mulai dari 0 Pasangan key-value
Akses data Menggunakan index (arr[0]) Menggunakan key (obj.nama)
Kegunaan Menyimpan daftar data sejenis Menyimpan data dengan atribut berbeda
Looping for, forEach, map for...in

Kesimpulan

Pada artikel ini kita belajar mengenal apa itu object dan kenapa penting, kemudian cara membuat, mengakses, mengubah, menghapus property dan bagaimana object bisa berisi object lain beserta memahami bedanya array dan object.

Pada artikel berikutnya, kita semua akan belajar tentang Spread & Rest Operator di JavaScript.

Terima Kasih


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami