JavaScript - Sifat Objek

Hai, para ahli JavaScript masa depan! Hari ini, kita akan melihat dunia magis properti objek JavaScript. Sebagai guru sains komputer yang ramah di lingkungan Anda, saya di sini untuk mengarahkan Anda melalui perjalanan yang menarik ini. Jadi, grab your virtual wands (keyboards), dan mari kita buat some code spells!

Properti Objek JavaScript

Objek di JavaScript seperti peti harta - mereka menyimpan informasi berharga dalam bentuk properti. Setiap properti adalah pasangan key-value, di mana key seperti label, dan value adalah harta itu sendiri. Mari kita buat objek pertama kita:

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor"
};

Di sini, kita telah membuat objek wizard dengan tiga properti: name, age, dan house. Setiap properti memiliki key (seperti "name") dan value (seperti "Harry").

Mengakses Properti Objek

Sekarang kita memiliki objek wizard, bagaimana kita mengakses propertinya? Ada dua cara untuk melakukan ini:

1. Notasi Dot
2. Notasi Bracket

Mari kita coba keduanya:

// Notasi Dot
console.log(wizard.name);  // Output: Harry

// Notasi Bracket
console.log(wizard["house"]);  // Output: Gryffindor

Notasi dot lebih sederhana dan biasanya digunakan. Namun, notasi bracket sangat membantu saat nama properti Anda memiliki spasi atau karakter khusus, atau saat Anda menggunakan variabel untuk mengakses properti.

let property = "age";
console.log(wizard[property]);  // Output: 17

Mengakses Properti Objek Bersarang

kadang-kadang, objek dapat berisi objek lain. Itu seperti boneka nesting magis! Mari kita perluas objek wizard:

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor",
wand: {
wood: "Holly",
core: "Phoenix feather",
length: 11
}
};

Untuk mengakses properti bersarang, kita simply chain our dot or bracket notations:

console.log(wizard.wand.wood);  // Output: Holly
console.log(wizard["wand"]["core"]);  // Output: Phoenix feather

Menambahkan atau Memperbarui Properti Objek

Objek di JavaScript dapat diubah, yang berarti kita dapat mengubahnya setelah pembuatannya. Mari kita beri wizard beberapa keterampilan baru:

// Menambahkan properti baru
wizard.skill = "Quidditch";

// Memperbarui properti yang ada
wizard.age = 18;

console.log(wizard.skill);  // Output: Quidditch
console.log(wizard.age);  // Output: 18

Menghapus Properti Objek

kadang-kadang, kita perlu membuat properti menghilang. Untuk ini, kita gunakan operator delete:

delete wizard.house;
console.log(wizard.house);  // Output: undefined

Poof! Properti "house" telah hilang. Ingat, menggunakan delete hanya menghapus properti dari objek, itu tidak mempengaruhi variabel apa pun yang mungkin menahan nilai properti itu.

Mengenumerasikan Properti Objek

Apa jika kita ingin melihat semua properti objek? Kita dapat menggunakan loop for...in:

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

Ini akan daftar semua properti yang dapat dienumerasikan dari objek wizard. Tetapi tunggu, ada lagi! Kita juga dapat menggunakan Object.keys(), Object.values(), atau Object.entries() untuk mendapatkan array dari key, value, atau keduanya objek:

console.log(Object.keys(wizard));    // Output: ["name", "age", "wand", "skill"]
console.log(Object.values(wizard));  // Output: ["Harry", 18, {wood: "Holly", core: "Phoenix feather", length: 11}, "Quidditch"]
console.log(Object.entries(wizard)); // Output: [["name", "Harry"], ["age", 18], ["wand", {...}], ["skill", "Quidditch"]]

Atribut Properti

Setiap properti di JavaScript memiliki beberapa atribut yang menentukan perilakunya. Atribut ini seperti perilaku kepribadian properti. Mari kita temu mereka:

1. value: Nilai properti ( tentu saja!)
2. writable: Dapatkah kita mengubah nilai properti?
3. enumerable: Apakah properti ini harus muncul saat kita mengenumerasikan properti objek?
4. configurable: Dapatkah kita menghapus properti ini atau mengubah atributnya?

Secara default, semua ini diatur ke true untuk properti yang kita buat biasa. Tetapi kita dapat mengubahnya menggunakan Object.defineProperty():

Object.defineProperty(wizard, "name", {
writable: false,
enumerable: false
});

wizard.name = "Ron";  // Ini tidak akan bekerja
console.log(wizard.name);  // Output: Harry

for (let key in wizard) {
console.log(key);  // "name" tidak akan muncul di sini
}

Berikut adalah tabel yang menggabungkan metode properti yang kita pelajari:

Metode	Deskripsi
object.property	Akses properti menggunakan notasi dot
object["property"]	Akses properti menggunakan notasi bracket
object.property = value	Menambahkan atau memperbarui properti
delete object.property	Menghapus properti
for...in	Mengenumerasikan properti objek
Object.keys(object)	Mendapatkan array dari key objek
Object.values(object)	Mendapatkan array dari value objek
Object.entries(object)	Mendapatkan array dari [key, value] pasangan objek
Object.defineProperty()	Menentukan properti baru atau memodifikasi properti yang ada

Dan itu adalah, para pemula! Anda telah menyelesaikan kursus cepat dalam properti objek JavaScript. Ingat, latihan membuat sempurna, jadi terus mencoba konsep ini. Sebelum Anda tahu, Anda akan mencampur objek kompleks seperti seorang ahli JavaScript sejati!

Credits: Image by storyset