JavaScript - ES5 Object Methods

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan meluncur ke dunia magis metode Object ES5. Jangan khawatir jika Anda baru belajar programming - saya akan menjadi panduan ramah Anda dalam perjalanan ini, dan kita akan bergerak langkah demi langkah. Pada akhir panduan ini, Anda akan dapat memanipulasi objekseperti seorang ahli!

Metode Object ES5 JavaScript

Sebelum kita mulai, mari singkatkan apa itu objek di JavaScript. Pikirkan objek sebagai wadah yang menyimpan informasi yang berkaitan. Misalnya, objek "mobil" mungkin memiliki properti seperti warna, merek, dan tahun.

let mobil = {
warna: "merah",
merek: "Toyota",
tahun: 2020
};

Sekarang, ES5 memperkenalkan beberapa metode yang kuat untuk bekerja dengan objek ini. Mari kita jelajahi satu per satu!

Metode JavaScript Object.create()

Metode Object.create() memungkinkan kita untuk membuat objek baru menggunakan objek yang ada sebagai prototype. Itu seperti mengatakan, "Hai JavaScript, buatkan saya objek baru yang mewarisi dari objek ini!"

let hewan = {
buatSuara: function() {
console.log("Suara hewan generik");
}
};

let anjing = Object.create(hewan);
anjing.buatSuara(); // Output: Suara hewan generik

anjing.bark = function() {
console.log("Woof woof!");
};

anjing.bark(); // Output: Woof woof!

Dalam contoh ini, kita membuat objek anjing yang mewarisi dari objek hewan. anjing dapat menggunakan metode buatSuara dari hewan, tetapi juga memiliki metode bark sendiri.

Metode JavaScript Object.defineProperty()

Object.defineProperty() memungkinkan kita untuk menambahkan atau mengubah properti objek. Itu seperti menambahkan fitur baru ke mobil Anda setelah Anda membelinya!

let orang = {};

Object.defineProperty(orang, "nama", {
value: "John",
writable: false,
enumerable: true,
configurable: true
});

console.log(orang.nama); // Output: John
orang.nama = "Jane"; // Ini tidak akan mengubah nama
console.log(orang.nama); // Output: John

Di sini, kita menambahkan properti nama ke objek orang. Kita mensetnya sebagai non-writable, yang berarti kita tidak dapat mengubah nilainya setelah ditetapkan.

Metode JavaScript Object.defineProperties()

Object.defineProperties() adalah seperti defineProperty(), tapi dalam bentuk yang lebih kuat! Itu memungkinkan kita untuk mendefinisikan beberapa properti sekaligus.

let buku = {};

Object.defineProperties(buku, {
judul: {
value: "The Great Gatsby",
writable: true
},
pengarang: {
value: "F. Scott Fitzgerald",
writable: false
}
});

console.log(buku.judul); // Output: The Great Gatsby
console.log(buku.pengarang); // Output: F. Scott Fitzgerald

buku.judul = "Gatsby"; // Ini bekerja
buku.pengarang = "Scott"; // Ini tidak bekerja

console.log(buku.judul); // Output: Gatsby
console.log(buku.pengarang); // Output: F. Scott Fitzgerald

Dalam contoh ini, kita mendefinisikan dua properti untuk objek buku dalam satu langkah. Properti judul writable, tetapi pengarang tidak.

Metode JavaScript Object.getOwnPropertyDescriptor()

Metode ini memungkinkan kita untuk mendapatkan deskripsi properti. Itu seperti meminta spesifikasi fitur tertentu mobil Anda.

let mobil = {
merek: "Toyota"
};

let deskripsi = Object.getOwnPropertyDescriptor(mobil, "merek");

console.log(deskripsi);
// Output:
// {
//   value: "Toyota",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

Di sini, kita mendapatkan deskripsi properti merek dari objek mobil. Itu memberitahu kita nilai dan apakah properti itu writable, enumerable, dan configurable.

Metode JavaScript Object.getOwnPropertyNames()

Metode ini mengembalikan array dari semua properti ( enumerabel atau tidak ) yang ditemukan secara langsung dalam objek yang diberikan. Itu seperti mendapatkan daftar semua fitur mobil Anda, bahkan yang tersembunyi!

let orang = {
nama: "John",
umur: 30
};

Object.defineProperty(orang, "ssn", {
value: "123-45-6789",
enumerable: false
});

console.log(Object.getOwnPropertyNames(orang));
// Output: ["nama", "umur", "ssn"]

Meskipun kita membuat ssn sebagai non-enumerable, getOwnPropertyNames() masih menampilkan nya dalam daftar.

Metode JavaScript Object.getPrototypeOf()

Metode ini mengembalikan prototype objek yang ditentukan. Itu seperti bertanya, "Siapa orang tua Anda?"

let hewan = {
makan: true
};

let kelinci = Object.create(hewan);

console.log(Object.getPrototypeOf(kelinci) === hewan); // Output: true

Di sini, kita menegaskan bahwa prototype kelinci adalah objek hewan.

Metode JavaScript Object.keys()

Object.keys() mengembalikan array dari semua nama properti yang dapat dienumerasikan milik objek yang diberikan. Itu seperti mendapatkan daftar semua fitur tampak mobil Anda.

let mobil = {
merek: "Toyota",
model: "Corolla",
tahun: 2020
};

console.log(Object.keys(mobil));
// Output: ["merek", "model", "tahun"]

Metode ini hanya mengembalikan properti yang dapat dienumerasikan, tidak seperti getOwnPropertyNames() yang mengembalikan semua properti.

Metode JavaScript Object.freeze()

Object.freeze() membekukan objek. Objek yang dibekukan tidak dapat lagi diubah. Itu seperti memasukkan mobil Anda di dalam blok es - Anda tidak dapat menambahkan, menghapus, atau memodifikasi propertinya!

let mobil = {
merek: "Toyota",
model: "Corolla"
};

Object.freeze(mobil);

mobil.tahun = 2020; // Ini tidak akan bekerja
mobil.merek = "Honda"; // Ini juga tidak akan bekerja

console.log(mobil); // Output: { merek: "Toyota", model: "Corolla" }

Setelah membekukan objek mobil, kita tidak dapat menambahkan properti tahun atau mengubah merek.

Metode JavaScript Object.seal()

Object.seal() menutup objek, mencegah properti baru ditambahkan dan menandai semua properti yang ada sebagai non-configurable. Itu seperti menutup mobil Anda - Anda tidak dapat menambahkan fitur baru, tetapi Anda masih dapat memodifikasi yang ada.

let orang = {
nama: "John",
umur: 30
};

Object.seal(orang);

orang.kelamin = "Pria"; // Ini tidak akan bekerja
orang.umur = 31; // Ini bekerja

delete orang.nama; // Ini tidak akan bekerja

console.log(orang); // Output: { nama: "John", umur: 31 }

Kita dapat mengubah umur, tetapi kita tidak dapat menambahkan kelamin atau menghapus nama.

Metode JavaScript Object.isFrozen()

Metode ini menentukan apakah objek dibekukan. Itu seperti memeriksa apakah mobil Anda benar-benar terjebak di dalam blok es!

let mobil = {
merek: "Toyota"
};

console.log(Object.isFrozen(mobil)); // Output: false

Object.freeze(mobil);

console.log(Object.isFrozen(mobil)); // Output: true

Metode JavaScript Object.isSealed()

Seperti isFrozen(), metode ini memeriksa apakah objek ditutup.

let orang = {
nama: "John"
};

console.log(Object.isSealed(orang)); // Output: false

Object.seal(orang);

console.log(Object.isSealed(orang)); // Output: true

Metode JavaScript Object.preventExtensions()

Metode ini mencegah penambahan properti baru ke objek. Itu seperti menaruh tanda "Tidak ada Fitur Baru" di mobil Anda.

let mobil = {
merek: "Toyota"
};

Object.preventExtensions(mobil);

mobil.model = "Corolla"; // Ini tidak akan bekerja

console.log(mobil); // Output: { merek: "Toyota" }

Setelah mencegah ekstensi, kita tidak dapat menambahkan properti model.

Metode JavaScript Object.isExtensible()

Metode ini menentukan apakah objek dapat diperluas (apaakah properti baru dapat ditambahkan kepadanya).

let mobil = {
merek: "Toyota"
};

console.log(Object.isExtensible(mobil)); // Output: true

Object.preventExtensions(mobil);

console.log(Object.isExtensible(mobil)); // Output: false

Berikut ini adalah rangkuman dari semua metode yang kita pelajari:

Metode	Deskripsi
Object.create()	Membuat objek baru dengan prototype yang ditentukan dan properti
Object.defineProperty()	Menambahkan properti yang dinamai sesuai deskripsi ke objek
Object.defineProperties()	Mendefinisikan properti baru atau memodifikasi properti yang ada secara langsung di objek
Object.getOwnPropertyDescriptor()	Mengembalikan deskripsi properti milik objek
Object.getOwnPropertyNames()	Mengembalikan array properti ( enumerabel atau tidak ) yang ditemukan secara langsung di objek
Object.getPrototypeOf()	Mengembalikan prototype objek yang ditentukan
Object.keys()	Mengembalikan array nama properti yang dapat dienumerasikan milik objek
Object.freeze()	Membekukan objek: kode lain tidak dapat menghapus atau mengubah propertinya
Object.seal()	Menutup objek, mencegah penambahan properti baru dan menandai semua properti yang ada sebagai non-configurable
Object.isFrozen()	Menentukan apakah objek dibekukan
Object.isSealed()	Menentukan apakah objek ditutup
Object.preventExtensions()	Mencegah penambahan properti baru ke objek
Object.isExtensible()	Menentukan apakah objek dapat diperluas

Dan begitu saja! Anda baru saja mengambil tur besar di dunia metode Object ES5. Ingat, latihan membuat ahli, jadi jangan ragu untuk mencoba metode ini dalam kode Anda sendiri. Selamat belajar, ahli JavaScript masa depan!

Credits: Image by storyset