JavaScript - Properti Objek

Halo, para ahli JavaScript masa depan! Hari ini, kita akan mendalam ke dunia magis properti objek JavaScript. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengarahkan Anda melalui perjalanan yang menarik ini. Jadi, ambil keyboard Anda (tongkat sihir virtual), dan mari kita buat some code spells!

Properti Objek JavaScript

Objek di JavaScript mirip dengan peti harta karun - 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:

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

Di sini, kita 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 punya objek wizard, bagaimana kita mengakses propertinya? Ada dua cara untuk ini:

1. Notasi Dot
2. Notasi Kurung

mari kita coba keduanya:

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

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

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

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

Mengakses Properti Objek Tertanam

kadang-kadang, objek dapat mengandung 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 tertanam, kita secara mudah menggabungkan notasi dot atau kurung:

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

Menambahkan atau Memperbarui Properti Objek

Objek di JavaScript dapat berubah, artinya 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" sudah hilang. Ingat, penggunaan delete hanya menghapus properti dari objek, itu tidak mempengaruhi variabel apa pun yang mungkin menyimpan nilai properti itu.

Mengenumerasi Properti Objek

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

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

Ini akan mencantumkan semua properti yang dapat dienumerasi 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 dari 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 khusus properti. mari kita kenal mereka:

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

Secara default, semuanya 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	Mengakses properti menggunakan notasi dot
object["property"]	Mengakses properti menggunakan notasi kurung
object.property = value	Menambahkan atau memperbarui properti
delete object.property	Menghapus properti
for...in	Mengenumerasi 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 begitulah, para pemula! Anda baru saja menyelesaikan kursus cepat dalam properti objek JavaScript. Ingat, latihan membuat sempurna, jadi terus mencoba konsep ini. Sebelum Anda tahu, Anda akan menciptakan objek kompleks seperti seorang ahli JavaScript sejati!

Credits: Image by storyset