Tutorial Belajar JavaScript Bagian 14 : Penjelasan Tipe Data Object di JavaScript

Pada tutorial sebelumnya, kita sudah mempelajari tentang Tutorial Belajar JavaScript Bagian 13 : Penjelasan Tipe Data String di JavaScript. Dalam tutorial ini, kita akan belajar tentang tipe data object JavaScript dan cara memanipulasi properti object secara efektif.

Pengantar object JavaScript

Dalam JavaScript, object adalah kumpulan pasangan key-value yang tidak diurutkan. Setiap pasangan nilai kunci disebut properti.

Kunci dari sebuah properti bisa berupa string. Dan nilai properti dapat berupa nilai apa pun, misalnya string, number, array, dan bahkan function.

JavaScript memberi Anda banyak cara untuk membuat object. Yang paling umum digunakan adalah dengan menggunakan notasi literal object.

Contoh berikut membuat object kosong menggunakan notasi literal object :

let kosong = {};

Untuk membuat object dengan properti, Anda menggunakan key:value di dalam kurung kurawal. Misalnya, berikut ini membuat object person baru :

let person = {
     namaDepan: 'Johan',
     namaBelakang: 'Budi'
};

Object person memiliki dua properti namaDepan dan namaBelakang dengan nilai yang sesuai ‘Johan’ dan ‘Budi’.

Saat object memiliki banyak properti, Anda menggunakan koma (,) untuk memisahkannya seperti contoh di atas.

Mengakses properti

Untuk mengakses properti object, Anda menggunakan salah satu dari dua notasi: notasi titik dan notasi seperti array.

1) Notasi titik (.)

Berikut ini mengilustrasikan cara menggunakan notasi titik untuk mengakses properti object:

objectName.propertyName

Misalnya, untuk mengakses properti namaDepan dari object person, Anda menggunakan ekspresi berikut:

person.namaDepan

Contoh ini membuat objek person dan menampilkan nama depan dan nama belakang ke konsol :

let person = {
     namaDepan: 'Johan',
     namaBelakang: 'Budi'
};
console.log(person.namaDepan);
console.log(person.namaBelakang);

2) Notasi array ( [])

Berikut ini mengilustrasikan cara mengakses nilai properti object melalui notasi array :

objectName['propertyName']

Sebagai contoh :

let person = {
     namaDepan: 'Johan',
     namaBelakang: 'Budi'
};
console.log(person['namaDepan']);
console.log(person['namaBelakang']);

Saat nama properti berisi spasi, Anda harus menempatkannya di dalam tanda kutip. Misalnya, objek address berikut memiliki properti ‘no gedung’ :

let address = {
     'no gedung': 3960,
     jalan: 'Jalan 1 Utara',
     kabupaten: 'Sipiongot',
     negara: 'Indonesia'
};

Untuk mengakses properti ‘no gedung’, Anda perlu menggunakan notasi seperti array :

address['no gedung'];

Jika Anda menggunakan notasi titik, Anda akan mendapatkan pesan kesalahan :

address.'no gedung';

Kesalahan:

SyntaxError: Unexpected string

Perhatikan bahwa bukanlah praktik yang baik untuk menggunakan spasi dalam nama properti suatu object.

Membaca properti yang tidak ada akan menghasilkan undefined. Sebagai contoh:

console.log(address.distrik);

Hasil :

undefined

Memodifikasi nilai properti

Untuk mengubah nilai properti, Anda menggunakan operator penugasan (=). Sebagai contoh :

let person = {
     namaDepan: 'Johan',
     namaBelakang: 'Budi'
};
person.namaDepan = 'Jane';
console.log(person);

Hasil :

{ namaDepan: 'Jane', namaBelakang: 'Budi' }

Dalam contoh ini, kita mengubah nilai properti namaDepan object person dari ‘Johan’ menjadi ‘Jane’.

Menambahkan properti baru ke objek

Tidak seperti object dalam bahasa pemrograman lain seperti Java dan C#, Anda dapat menambahkan properti ke object setelah pembuatan object.

Pernyataan berikut menambahkan properti umur ke object person dengan nilai 25 untuknya :

person.umur = 25;

Menghapus properti dari suatu object

Untuk menghapus properti object, Anda menggunakan operator delete :

delete objectName.propertyName;

Contoh berikut menghapus properti umur dari object person :

delete person.umur;

Jika Anda mencoba mengakses ulang properti umur, Anda akan mendapatkan nilai undefined.

Memeriksa apakah ada properti

Untuk memeriksa apakah properti ada di object, Anda menggunakan operator in :

propertyName in objectName

Operator in mengembalikan nilai true jika propertyName ada di objectName.

Contoh berikut kita membuat objek karyawan dan menggunakan operator in untuk memeriksa apakah properti ssn dan employeeId ada di object :

let karyawan = {
     namaDepan: 'Peter',
     namaBelakang: 'Parker',
     employeeId: 1
};
console.log('ssn' in karyawan);
console.log('employeeId' in karyawan);

Hasil:

false
true

Kesimpulan

• Objek adalah kumpulan pasangan key-value.
• Gunakan notasi titik (.) atau notasi seperti array ([]) untuk mengakses properti objek.
• Operator delete menghapus properti dari objek.
• Operator in memeriksa apakah properti ada di objek.

Itu dia tutorial penjelasan tentang tipe data object di JavaScript. Semoga tutorial ini membantu Anda memahami tentang tipe data object pada JavaScript.