Halo, kembali lagi! Kali ini kita akan membahas tentang Objek di JavaScript. Objek adalah tipe data yang memungkinkan kita untuk menyimpan koleksi data dalam bentuk pasangan key dan value. Objek ini sangat berguna untuk menyimpan data yang lebih kompleks, seperti informasi pengguna, produk, atau data yang memiliki atribut lebih dari satu.

Apa Itu Objek?

Objek adalah kumpulan properti, di mana setiap properti terdiri dari key dan value. Contohnya seperti ini:

let mobil = {
  merk: "Toyota",
  model: "Corolla",
  tahun: 2020
};

Pada contoh di atas, mobil adalah objek yang memiliki tiga properti: merk, model, dan tahun. Properti-properti ini berpasangan dengan nilai masing-masing, seperti "Toyota", "Corolla", dan 2020.

Mengakses Properti Objek

Untuk mengakses properti dari sebuah objek, kita bisa menggunakan dot notation atau bracket notation.

1. Dot Notation:

let mobil = {
  merk: "Toyota",
  model: "Corolla",
  tahun: 2020
};

console.log(mobil.merk); // Output: Toyota
console.log(mobil.tahun); // Output: 2020

2. Bracket Notation:

console.log(mobil["model"]); // Output: Corolla

Bracket notation sering digunakan ketika nama properti mengandung spasi atau karakter khusus, atau ketika nama properti disimpan dalam sebuah variabel.

Menambah dan Mengubah Properti Objek

Kamu bisa menambah properti baru atau mengubah properti yang sudah ada di objek.

1. Menambah Properti:

mobil.color = "Merah";
console.log(mobil.color); // Output: Merah

2. Mengubah Properti:

mobil.tahun = 2022;
console.log(mobil.tahun); // Output: 2022

Menghapus Properti Objek

Jika kamu ingin menghapus properti dari objek, kamu bisa menggunakan delete:

delete mobil.model;
console.log(mobil.model); // Output: undefined

Objek di dalam Array

Tentu saja, objek juga bisa disimpan dalam array. Ini sangat berguna jika kamu ingin menyimpan koleksi objek yang memiliki struktur yang sama.

let mobilList = [
  { merk: "Toyota", model: "Corolla", tahun: 2020 },
  { merk: "Honda", model: "Civic", tahun: 2021 },
  { merk: "BMW", model: "X5", tahun: 2022 }
];

console.log(mobilList[0].merk); // Output: Toyota

Studi Kasus: Menampilkan Data Pengguna dalam Objek

Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

Sekarang, mari kita buat contoh di mana kita menyimpan informasi pengguna dalam objek dan menampilkannya ke halaman web.

HTML-nya:

  
  
  


  
Data Pengguna
  


  

JavaScript-nya (di file script.js):

let pengguna = {
  nama: "John Doe",
  email: "johndoe@example.com",
  umur: 30,
  alamat: "Jl. Merdeka No.10, Jakarta"
};

function tampilkanDataPengguna() {
  let userInfo = document.getElementById("user-info");
  userInfo.innerHTML = `
    
Nama: ${pengguna.nama}
    
Email: ${pengguna.email}
    
Umur: ${pengguna.umur} tahun
    
Alamat: ${pengguna.alamat}
  `;
}

tampilkanDataPengguna();

Penjelasan:

• Di sini, kita membuat objek pengguna yang menyimpan informasi nama, email, umur, dan alamat.
• Fungsi tampilkanDataPengguna() digunakan untuk menampilkan data pengguna ke halaman HTML menggunakan template literals (${}) untuk menyisipkan nilai objek ke dalam HTML.

Dengan memahami objek, kamu bisa menyimpan dan mengorganisir data dengan lebih efektif dan fleksibel! Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga pengetahuan tentang objek ini membantu kamu dalam menyusun data yang lebih kompleks dan membuat aplikasi lebih terstruktur! ?