Belajar Javascript : Tipe Data Object Pada Javascript

Object merupakan tipe data yang terdiri dari kumpulan pasangan key dan value. Seperti halnya array, object juga bersifat non-primitif, artinya di dalam sebuah object dapat menyimpan tipe data yang berbeda.

Gambar di atas merupakan contoh dari sebuah object dengan nama cat, dimana di dalamnya terdiri dari kumpulan key dan value serta dapat memiliki berbagai tipe data di dalamnya. Value di dalam object dapat berupa tipe data primitif maupun non-primitif, termasuk fungsi dan object lainnya. Pasangan key dan value di dalam object disebut properti, jika value / nilai di dalam object berupa fungsi biasanya disebut dengan method.

const cat = {
  // properti
  name: 'Chiko',
  age: 2,
  
  // method
  eat: function () {
    return 'Chiko eating...'
  }
}

Pada contoh kode di atas properti dengan key eat disebut method karena value-nya adalah sebuah fungsi.

1. Membuat Object

Ada beberapa cara yang dapat kita gunakan untuk membuat object:

1. Menggunakan Object Literal
2. Menggunakan Object Constructor
3. Menggunakan Object.create

Mari kita lihat masing-masing cara di atas.

1.1 Menggunakan Object Literal

Membuat object menggunakan object literal merupakan cara yang paling mudah dilakukan, untuk membuat sebuah object cukup dengan menulis kurung kurawal {}. Membuat object dengan cara ini paling sering digunakan oleh kebanyakan programmer javascript.

// object kosong
const fish = {}

// object dengan properti
const cat = {
  name: 'Chiko',
  age: 2
}

Properti yang ada di dalam object dapat ditambah dan dihapus sesuai kebutuhan.

1.2 Menggunakan Object Constructor

Kita dapat membuat sebuah object dengan menggunakan sintaks new Object().

const cat = new Object()
console.log(cat)

// OUTPUT: {}

Pada contoh kode di atas kita sudah berhasil membuat sebuah object kosong dengan nama variabel cat. Kita juga dapat langsung memasukkan initial value ke dalam constrctor object.

const cat = new Object({ name: 'Chiko' })
console.log(cat)

// OUTPUT: { name: 'Chiko' }

1.3 Menggunakan Object.create

Sintaks Object.create akan membuat sebuah object baru menggunakan object lainnya sebagai prototype.

const animal = {
  eat: function () {
    console.log('Eating...')
  },
  sleep: function () {
    console.log('Sleeping...')
  }
}

const cat = Object.create(animal)

Pada contoh di atas kita menggunakan object animal sebagai prototype untuk membuat sebuah object baru dengan nama cat.

2. Mengakses Properti Di Dalam Object

Properti di dalam object dapat diakses menggunakan key dari properti yang ingin diakses.

const cat = {
  name: 'Chiko',
  eat: function () {
    console.log(`${this.name} is eating...`)
  }
}

console.log(cat.eat())
// OUTPUT: Chiko is eating...

Selain itu kita juga dapat mengakses properti di dalam object dengan kurung siku [].

const website = {
  name: 'Depot Kode',
  'site url': 'https://depotkode.com',
  reload: function () {
    console.log(`${this.name} is reloading...`)
  }
}

console.log(website['name'])
// OUTPUT: Depot Kode
console.log(website['site url'])
// OUTPUT: https://depotkode.com
console.log(website['reload']())
// OUTPUT: Depot Kode is reloading...

Ketika mengakses method dari object harus menggunakan tanda kurung (), jika tidak maka fungsi atau method yang di akses tidak akan dieksekusi, dengan menggunakan kurung siku kita dapat mengakses key yang menggunakan spasi sekalipun, hal ini tidak bisa dilakukan menggunakan cara yang pertama.

3. Modifikasi Properti Di Dalam Object

Ada kondisi dimana terkadang kita perlu mengubah atau menambahkan properti baru ke dalam object ketika program berjalan, untuk mengubah ataupun menambahkan properti baru ke dalam sebuah object hampir mirip seperti cara kita mengakses properti tersebut, hanya saja kita perlu menambahkan operator assignment.

const cat = {
  name: 'Chiko'
}

// Menambahkan properti baru bernama age
cat.age = 2
// Mengubah nilai dari properti name
cat.name = 'Chiki'

console.log(cat)
// OUTPUT: { name: 'Chiki', age: 2 }

Pada contoh di atas kita menambahkan sebuah properti baru dengan key age dan value 2, serta mengubah nilai dari key name menjadi Chiki. Selain menggunakan notasi titik / dot (.), kita juga dapat menggunakan kurung siku untuk menambahkan atau merubah nilai dari properti di dalam object.

const cat = {
  name: 'Chiko'
}

cat['age'] = 2
console.log(cat)

// OUTPUT: { name: 'Chiko', age: 2 }

Menghapus Properti Di Dalam Object

Ada kalanya properti di dalam sebuah object tidak digunakan lagi dan kita ingin menghapusnya, untuk menghapus properti di dalam object kita dapat menggunakan perintah delete.

const cat = {
  name: 'Chiko',
  age: 2,
  eat: function () {
    console.log(`${this.name} is eating...`)
  }
}

delete cat['age']
delete cat.eat
console.log(cat)
// OUTPUT: { name: 'Chiko' }

Berbeda ketika ingin mengakses method di dalam object dimana kita harus menggunakan tanda kurung (), ketika menghapus method dari sebuah object kita tidak boleh menggunakan tanda kurung karena nantinya method tidak akan terhapus. Kita juga dapat menggunakan kurung siku [] ketika menghapus properti di dalam object seperti pada contoh di atas.

Kesimpulan

Implementasi dari object akan sangat sering kita jumpai ketika kita sudah mulai membuat program menggunakan javascript, untuk itu kita perlu paham bagaimana untuk berinteraksi dengan object tersebut. Kali ini kita hanya membahas sedikit tentang object pada javascript mulai bagaimana cara membuat, mengakses dan memodifikasi properti yang ada di dalam object. Javascript sendiri menyediakan built-in method yang dapat mempermudah kita ketika bekerja dengan object, untuk lebih detailnya kalian bisa lanjut baca disini tentang object pada javascript.

Semoga materi ini bermanfaat dan sampai jumpa di materi-materi berikutnya... 😄