JavaScript - Metode Object

Halo, para ahli JavaScript masa depan! Hari ini, kita akan menyelam ke dunia magis metode object JavaScript. Ambil tongkat codingmu (papan ketik) dan mari kita mengemban perjalanan yang menarik ini bersama!

Apa Itu Metode Object JavaScript?

Sebelum kita mulai melempar mantra dengan metode object, mari kita mengerti apa itu. Dalam kata-kata sederhana, metode object adalah fungsi yang milik object. Itu seperti kekuatan khusus yang dimiliki objek kita.

mari kita lihat contoh dasar:

let wizard = {
name: 'Merlin',
castSpell: function() {
console.log('Abracadabra!');
}
};

wizard.castSpell(); // Output: Abracadabra!

Di sini, castSpell adalah metode objek wizard. Ketika kita panggil wizard.castSpell(), penyihir kita menjalankan magiknya!

Penyederhanaan Metode Object

Sekarang, mari kita belajar trik menarik. ES6 memperkenalkan cara pendek untuk mendefinisikan metode dalam objek. Itu seperti jalan pintas magis untuk menulis metode objek!

let wizard = {
name: 'Merlin',
castSpell() {
console.log('Abracadabra!');
}
};

wizard.castSpell(); // Output: Abracadabra!

Lihat bagaimana kita menghapus bagian : function? Itu lebih pendek dan rapih, seperti buku mantra yang teratur!

Menambahkan atau Memperbarui Metode di Object

Objek di JavaScript adalah fleksibel. Kita dapat menambahkan metode baru atau memperbarui metode yang sudah ada bahkan setelah objek diciptakan. Itu seperti mengajarkan penyihir kita mantra baru!

let wizard = {
name: 'Merlin'
};

// Menambahkan metode baru
wizard.castFireball = function() {
console.log('Whoosh! Fireball launched!');
};

wizard.castFireball(); // Output: Whoosh! Fireball launched!

// Memperbarui metode yang sudah ada
wizard.castFireball = function() {
console.log('Super fireball engaged!');
};

wizard.castFireball(); // Output: Super fireball engaged!

Dalam contoh ini, pertama kita menambahkan metode castFireball ke penyihir kita, kemudian kita memperbaruinya untuk meluncurkan fireball yang lebih kuat!

Menggunakan Metode Bawaan

Objek JavaScript datang dengan beberapa mantra... maksudku, metode! Mari kita jelajahi beberapa di antaranya:

1. Object.keys()

Metode ini mengembalikan array dari nama properti milik objek yang diberikan.

let spellBook = {
fireball: 'Deals fire damage',
iceBeam: 'Freezes the target',
thunderbolt: 'Electrifies the enemy'
};

console.log(Object.keys(spellBook));
// Output: ['fireball', 'iceBeam', 'thunderbolt']

2. Object.values()

Mirip dengan Object.keys(), tapi mengembalikan array dari nilai properti yang dapat dienumerasi milik objek.

console.log(Object.values(spellBook));
// Output: ['Deals fire damage', 'Freezes the target', 'Electrifies the enemy']

3. Object.entries()

Metode ini mengembalikan array dari pasangan [key, value] properti string yang dapat dienumerasi milik objek.

console.log(Object.entries(spellBook));
// Output: [
//   ['fireball', 'Deals fire damage'],
//   ['iceBeam', 'Freezes the target'],
//   ['thunderbolt', 'Electrifies the enemy']
// ]

Berikut adalah tabel yang menggabungkan metode ini:

Metode	Deskripsi	Contoh
Object.keys()	Mengembalikan array nama properti objek	Object.keys(spellBook)
Object.values()	Mengembalikan array nilai properti objek	Object.values(spellBook)
Object.entries()	Mengembalikan array pasangan [key, value] properti objek	Object.entries(spellBook)

Kata Kunci 'this' dalam Metode Object

Sekarang, mari kita bicarakan konsep yang kuat tapi kadang-kadang membingungkan: kata kunci this. Dalam metode objek, this merujuk ke objek tempat metode itu ada. Itu seperti objek mengatakan "ini saya!"

let wizard = {
name: 'Merlin',
introduceYourself() {
console.log(`Hello, I am ${this.name}!`);
}
};

wizard.introduceYourself(); // Output: Hello, I am Merlin!

Dalam contoh ini, this.name merujuk ke properti name objek wizard.

Contoh Praktis: Game Penyihir

Mari kita gabungkan apa yang kita pelajari dalam permainan kecil casting spell!

let wizard = {
name: 'Merlin',
mana: 100,
spells: {
fireball: 30,
iceBeam: 20,
heal: 50
},
castSpell(spell) {
if (this.mana >= this.spells[spell]) {
this.mana -= this.spells[spell];
console.log(`${this.name} casts ${spell}! Mana remaining: ${this.mana}`);
} else {
console.log(`${this.name} doesn't have enough mana to cast ${spell}!`);
}
}
};

wizard.castSpell('fireball'); // Output: Merlin casts fireball! Mana remaining: 70
wizard.castSpell('heal'); // Output: Merlin casts heal! Mana remaining: 20
wizard.castSpell('fireball'); // Output: Merlin doesn't have enough mana to cast fireball!

Dalam permainan ini, penyihir kita dapat mencast spell jika mereka memiliki cukup mana. Metode castSpell memeriksa biaya spell, mengurangi mananya jika mungkin, dan memberikan umpan balik tentang aksi tersebut.

Dan begitu juga, para murid! Anda telah belajar dasar metode objek JavaScript. Ingat, latihan membuat sempurna, jadi terus mencoba konsep ini. Secepatnya Anda akan menulis seperti seorang penyihir JavaScript yang sebenarnya! Semoga kode Anda bebas bug dan metode Anda selalu mengembalikan output yang diharapkan. Selamat coding!

Credits: Image by storyset