Home » Javascript » Properti Objek pada JavaScript: Cara Membuat dan Codenya

Properti Objek pada JavaScript: Cara Membuat dan Codenya

by Catur Kurnia Sari
by Catur Kurnia Sari

Properti adalah bagian terpenting dari objek JavaScript apa pun.

Properti JavaScript

Properti adalah nilai yang berkaitan dengan objek pada JavaScript.

Sedangkan objek JavaScript adalah kumpulan properti yang tidak berurutan.

Properti biasanya dapat diubah, ditambahkan, dan dihapus, tetapi beberapa hanya dapat dibaca.

Mengakses Properti JavaScript

Sintaks untuk mengakses properti suatu objek adalah sebagai berikut:

objectName.property         // person.age

atau

objectName["property"]      // person["age"]

atau

objectName[expression]      // x = "age"; person[x]

Ekspresi harus bernilai nama properti.

Contoh 1:

<!DOCTYPE html>
<html>
<body>

<h2> Properti Objek JavaScript </h2>
  
<p> Ada dua cara berbeda untuk mengakses properti objek: </p>
<p> Anda dapat menggunakan .property atau ["property"]. </p>

<p id="demo"></p>

<script>
var person = {
  firstname:"John",
  lastname:"Doe",
  age:50,
  eyecolor:"blue"
};

document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

Contoh 2:

<!DOCTYPE html>
<html>
<body>

<h2> Properti Objek JavaScript </h2>
  
<p> Ada dua cara berbeda untuk mengakses properti objek: </p>
<p> Anda dapat menggunakan .property atau ["property"]. </p>

<p id="demo"></p>

<script>
var person = {
  firstname:"John",
  lastname:"Doe",
  age:50,
  eyecolor:"blue"
};

document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>

</body>
</html>

JavaScript for…in Loop

Statement for…in pada JavaScript berulang melalui setiap properti suatu objek.

Sintaks:

for (variable in object) {
  
}

Blok kode di dalam for … in loop akan dijalankan sekali pada setiap properti.

Perulangan melalui properti suatu objek.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2> Properti Objek JavaScript </h2>

<p id="demo"></p>

<script>
var txt = "";
var person = {fname:"John", lname:"Doe", age:25}; 
var x;
for (x in person) {
  txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Menambahkan Properti Baru

Anda dapat menambahkan properti baru ke objek yang sudah ada hanya dengan memberinya nilai.

Asumsikan bahwa objek person sudah ada – Anda kemudian dapat memberikan properti baru.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2> Properti Objek JavaScript </h2>

<p> Anda dapat menambahkan properti baru ke objek yang sudah ada. </p>
<p id="demo"></p>

<script>
var person = {
  firstname:"John",
  lastname:"Doe",
  age:50,
  eyecolor:"blue"
};

person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>

</body>
</html>

Menghapus Properti

Kata kunci delete berguna untuk menghapus properti dari objek.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2> Properti Objek JavaScript </h2>

<p> Anda dapat menghapus properti objek. </p>
<p id="demo"></p>

<script>
var person = {
  firstname:"John",
  lastname:"Doe",
  age:50,
  eyecolor:"blue"
};

delete person.age;
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

Kata kunci delete akan menghapus nilai properti dan properti itu sendiri.

Setelah dihapus, properti tidak dapat digunakan sebelum ditambahkan kembali.

Operator delete dirancang untuk digunakan pada properti objek. Kata kunci ini tidak berpengaruh pada variabel atau fungsi.

Operator delete tidak boleh digunakan pada properti objek JavaScript yang telah ditentukan sebelumnya. Itu dapat merusak aplikasi Anda.

Atribut Properti

Semua properti memiliki nama. Selain itu mereka juga punya nilai.

Nilai adalah salah satu atribut properti.

Atribut lainnya adalah: enumerable, configurable, dan writable.

Atribut ini menentukan bagaimana properti dapat diakses (apakah dapat dibaca ? apakah dapat ditulis?)

Dalam JavaScript, semua atribut dapat dibaca, tetapi hanya atribut nilai yang dapat diubah (dan hanya jika properti dapat ditulis).

(ECMAScript 5 memiliki metode untuk mendapatkan dan mengatur semua atribut properti)

Properti Prototipe

Objek JavaScript mewarisi properti prototipe mereka.

Kata kunci delete tidak menghapus properti yang diwariskan, tetapi jika Anda menghapus properti prototipe, ini akan mempengaruhi semua objek yang diwarisi dari prototipe.

You may also like