Object JavaScript

1 Permasalahan

Terkadang, untuk membuat suatu fitur pada web, kita butuh menyimpan data yang memiliki banyak property didalamnya. Misalnya kita ingin membuat web yang dapat menampilkan list kontak. Dimana satu data kontak ini sebenarnya memiliki dua property, yaitu name, dan phone.

2. Penjelasan Materi Sebagai Solusi

Untuk membuat data yang memiliki banyak property didalamnya, kita bisa menggunakan object

3. Penjelasan Detail Materi

3.1 Penjelasan Object

Objek memiliki banyak properti didalamnya, misalnya kita ambil contoh objek laptop memiliki properti seperti merk, jenis processor, ukuran layar, jumlah RAM, warna, dan sebagainya.

Objek adalah sebuah variabel yang menyimpan nilai (properti) yang dibuat dengan tanda kurung kurawal dengan isi berupa key dan value.

var laptop = {
  merk: 'Asus',
  processor: 'intel',
}

merk : merupakan key Asus : merupakan value

3.2 Perbedaan Array dan Object

Array dan object sama - sama dapat menyimpan lebih dari satu data pada satu variable. Namun keduanya memiliki perbedaan, yaitu array menyimpan kumpulan data yang bersifat sama. Misalnya :

Daftar nama kontak
Daftar nama buah

// daftar nama kontak
var daftar_nama_kontak = ['amir', 'budi', 'joko']
// daftar nama buah
var daftar_nama_buah = ['mangga', 'jeruk', 'lemon']

Sedangkan object dapat menyimpan data yang sifatnya tidak sama, misalnya pada object laptop terdiri dari beberapa data yang berbeda, yaitu :

Merk
Jenis processor
Warna

var laptop = {
  merk: 'Asus',
  processor: 'intel',
  warna: 'merah',
}

Walaupun berbeda, array dan object dapat dikombinasikan, misalnya untuk membuat daftar object laptop seperti berikut

var daftar_laptop = [
  {
    merk: 'Asus',
    processor: 'intel',
    warna: 'merah',
  },
  {
    merk: 'Samsung',
    processor: 'amd',
    warna: 'hitam',
  },
]

Pada contoh diatas, kita memiliki sebuah array yang bernama daftar_laptop yang berisi kumpulan object laptop

3.3 Cara Membuat Object

Kita dapat menggunakan kurang kurawal { } untuk membuat sebuah object, contohnya seperti berikut

// cara membuat objek
var kontak = {
  nama: 'Doni',
  notelp: '081322928088',
}

var kontak2 = {
  nama: 'Abi',
  notelp: '082176789829',
}

var kontak3 = {
  nama: 'Reza',
  notelp: '087812890938',
}

3.4 Mengakses Object

Untuk mengakses data pada object, kita tinggal memanggil nama objectnya diikuti dengan property dari object tersebut

// cara memanggil nilai dari objek
console.log(kontak.nama) // Doni
console.log(kontak['notelp']) // 081322928088
console.log(kontak.nama + kontak.notelp) //Doni 081322928088

3.5 Mengubah Object

// cara mengubah nilai dari objek
kontak.nama = 'Yusda'
kontak['notelp'] = '087812304333'

// menampilkan perubahan
console.log(kontak.nama) // Yusda
console.log(kontak['notelp']) // 087812304333

4. Contoh Kasus

Untuk contoh kasus, mirip dengan topik array, hanya saja data yang disimpan bukan berupa array of string, melainkan array of object.

Akan diberikan langkah - langkah untuk membuat website list kontak. Data yang disimpan berupa array of object, dan object tersebut memiliki property name dan phone. Web tersebut dapat menampilkan list kontak (menggunakan <ul /> atau <ol />), dan sebuah form untuk menambahkan data kontak (untuk menambahkan data pada array menggunakan array.push).

4.1 Membuat Struktur HTML

Pada html, kita akan membuat struktur dari web yang akan kita buat, dimana disini terdapat sebuah form untuk menginputkan data kontak baru dan sebuah div yang nantinya akan digunakan untuk menampilkan daftar kontak

<html>
  <head>
    <title>Contact App</title>
  </head>

  <body>
    <div>
      <h3>Add Contact</h3>
      <input type="text" placeholder="Name" id="input_name" /><br />
      <input type="text" placeholder="Phone" id="input_phone" /><br />
      <button type="submit" id="input_submit">
        Submit
      </button>
    </div>

    <div id="contact"></div>
    <script src="index.js"></script>
  </body>
</html>

4.2 Membuat Script Javascript

var data = [
  {
    name: '',
    phone: '',
  },
]

var contact = document.getElementById('contact')
var input_name = document.getElementById('input_name')
var input_phone = document.getElementById('input_phone')
var input_submit = document.getElementById('input_submit')

input_submit.onclick = addContact

function addContact() {
  var nameValue = input_name.value
  var phoneValue = input_phone.value

  data.push({ name: nameValue, phone: phoneValue })
  renderContacts()
}

function renderContacts() {
  contact.innerHTML = ''

  for (var i = 0; i < data.length; i++) {
    contact.innerHTML += `
    <div class="contact__item">
        <p class="contact__name">${data[i].name}</p>
        <p class="contact__phone">${data[i].phone}</p>
    </div>
    `
  }
}
renderContacts()

PreviousFetch API NextUI Component Lanjutan

Last updated 2 years ago

Was this helpful?