Tutorial JavaScript Part#8: Memahami Object dan Properti pada Javascript

  

Halo, pembaca setia! Apakah Anda sedang belajar JavaScript dan ingin memahami cara kerja object dan properti? Artikel ini akan membahas konsep dasar object dalam JavaScript, mulai dari membuat objek, mengakses properti, menggunakan method, hingga destructuring. 

pada tutorial sebelum nya kita sudah membahas materi tentang type data Array dan beserta fungsi yang sering digunakan, untuk melihat tutorial nya bisa pada link berikut ini:

Tutorial Javarscript Part#7: Type Data Array pada JavaScript

pada materi tutorial kali ini, kita akan banyak bermain dengan type data array sepeti seblum nya, langsung saja, untuk memahami lebih lagi tentang object dan properti dalam bahasa pemrograman javascript, langsung kita praktekan , sebelumnya buka kembali project yang sudah di buat atau project dari tutorial javascript sebelumnya, dan ikuti tutorial beirkut.

1. Membuat Objek dalam JavaScript

Objek dalam JavaScript adalah kumpulan properti (key-value pair) yang menyimpan data terkait.
Studi Kasus: Membuat Objek "Buku"
Kita akan membuat objek buku dengan properti seperti judul, penulis, dan tahun terbit.

contoh-objek.js

const buku = {
    judul: "Belajar JavaScript",
    penulis: "John Doe",
    tahun: 2023,
    terjual: 5000
    };
    console.log(buku); 

Penjelasan Kode:
Objek buku memiliki 4 properti: judul, penulis, tahun, dan terjual.
console.log(buku) akan menampilkan seluruh isi objek.

Hasil Running Kode:
javascript
{
  judul: "Belajar JavaScript",
  penulis: "John Doe",
  tahun: 2023,
  terjual: 5000
}

2. Mengakses Properti Objek

Properti objek bisa diakses menggunakan dot notation (.) atau bracket notation ([]).
Studi Kasus: Mengakses Data Buku
Kita akan mencoba mengambil nilai judul dan tahun dari objek buku.

akses-properti.js

 console.log(buku.judul); // Dot notation console.log(buku["tahun"]); // Bracket notation 

Penjelasan Kode:
buku.judul mengakses properti menggunakan dot notation.
buku["tahun"] mengakses properti menggunakan bracket notation (berguna jika nama properti dinamis).

Hasil Running Kode:
Belajar JavaScript  
2023  

3. Object Method

Method adalah fungsi yang disimpan sebagai properti objek.
Studi Kasus: Menambahkan Method "infoBuku"
Kita akan menambahkan method untuk menampilkan informasi buku.

object-method.js

 const buku = { judul: "Belajar JavaScript", penulis: "John Doe", tahun: 2023, infoBuku: function() { return `${this.judul} oleh ${this.penulis}, Terbit ${this.tahun}`; } };
  console.log(buku.infoBuku()); 

Penjelasan Kode:
infoBuku() adalah method yang mengembalikan string berisi info buku.
this mengacu pada objek saat ini (buku).

Hasil Running Kode:
Belajar JavaScript oleh John Doe, Terbit 2023  

4. Destructuring Object

Destructuring memungkinkan ekstraksi properti objek ke dalam variabel terpisah.
Studi Kasus: Destructuring Objek Buku
Kita akan mengekstrak judul dan penulis dari objek buku.

destructuring.js

 const { judul, penulis } = buku;
  console.log(judul); // Output: Belajar JavaScript console.log(penulis); // Output: John Doe 

Penjelasan Kode:
const { judul, penulis } = buku membuat variabel baru dari properti objek.

Hasil Running Kode:
Belajar JavaScript  
John Doe  

Kesimpulan
Anda telah mempelajari dasar-dasar object dan properti dalam JavaScript, mulai dari pembuatan objek, akses properti, method, hingga destructuring. Coba praktikkan kode di atas dan eksplorasi lebih lanjut!
jika Punya pertanyaan? atau saran mengenai tutorial dalam materi ini bisa Tinggalkan komentar di bawah, ya!

Semoga Bermanfaat..

Happy Coding ..!!!

Incoming Search Terms:

• tutorial JavaScript object
• cara membuat objek di JavaScript
• akses properti object JavaScript
• contoh object method JavaScript
• destructuring object JavaScript
• belajar JavaScript untuk pemula
• panduan lengkap object JavaScript
• studi kasus object JavaScript
• cara kerja this dalam object
• perbedaan dot dan bracket notation

Tunggu tutorial selanjutnya tentang Array dan Function dalam JavaScript! 🚀

Share this post

𝕏