Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya

Author Hilya Zea
25 Dec 2024
Javascript
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya

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
  1. 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
  1. 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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Pengguna</title>
</head>
<body>
  <h1>Data Pengguna</h1>
  <div id="user-info"></div>

  <script src="script.js"></script>
</body>
</html>

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 = `
    <p>Nama: ${pengguna.nama}</p>
    <p>Email: ${pengguna.email}</p>
    <p>Umur: ${pengguna.umur} tahun</p>
    <p>Alamat: ${pengguna.alamat}</p>
  `;
}

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! ?

Tutorial Terkait Lainnya

Javascript Dasar #6: Array & Manipulasi Data
Javascript Dasar #6: Array & Manipulasi Data

Hai, apa kabar? Kembali lagi di tutorial JavaScript! Di tutorial kali ini, kita akan belajar tentang...

Baca Tutorial
Javascript Dasar #9: Asynchronous JavaScript & Promises
Javascript Dasar #9: Asynchronous JavaScript & Promises

Halo, teman-teman! Sekarang kita akan masuk ke topik yang sangat penting dalam JavaScript: Asynchron...

Baca Tutorial
Javascript Dasar #5: Perulangan (Loops)
Javascript Dasar #5: Perulangan (Loops)

Hai, kembali lagi! Di tutorial kali ini, kita akan belajar tentang perulangan atau loops. Perulangan...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Javascript Dasar #11: DOM Manipulation
Javascript Dasar #8: Event Handling di JavaScript
Javascript Dasar #5: Perulangan (Loops)
Javascript Dasar #3: Fungsi dan Penggunaan dalam Program
Tutorial Terbaru
Python Dasar #10: Modul dan library
26 Dec 2024 Python
Python Dasar #9: Penggunaan File
26 Dec 2024 Python
Python Dasar #8: Exception Handling
26 Dec 2024 Python
Python Dasar #7: conditional Python
26 Dec 2024 Python
Python Dasar #6: List dan Dictionary di Python
26 Dec 2024 Python