Cara menggunakan OBJ.

Question

Semua tipe data primitif dalam JavaScript hanya dapat menampung satu nilai, sedangkan non-primitif dapat menampung lebih dari satu, termasuk objek

Table of Contents Show

Apa Itu Objek?
Cara Membuat Objek
Aturan Penamaan Properti Objek
Jenis Fungsi untuk Metode Objek
Cara Mengakses Properti Objek
Cara Menambahkan Properti Objek
Cara Menghapus Properti Objek
Apa itu objek dalam JavaScript?
Apa itu array dan objek dalam JavaScript?
Bagaimana cara membuat fungsi di JavaScript *?
Apa itu kelas dalam JavaScript?

Saat membuat aplikasi kita sering dihadapkan pada kondisi dimana kita perlu mengelompokkan sekelompok data menjadi satu entitas atau variabel

Misalnya kita ingin menyimpan data nama, jenis, dan harga sebuah mobil, kita tidak perlu membuat variabel untuk setiap data karena ini bisa merepotkan apalagi jika kita memiliki mobil lebih dari satu.

Contoh

// mobil lamborghini
const lamborghiniNama = 'Lamborghini';
const lamborghiniTipe = 'Aventador';
const lamborghiniHarga = 6000;

// mobil ferari
const ferariNama = 'Ferari';
const ferariTipe = 'GTC4Lusso';
const ferariHarga = 12000;

Lihat kode di atas, kita perlu menggunakan nama masing-masing mobil untuk membedakan nama variabel, ini hanya dua, bagaimana jika ada lebih, tentu merepotkan.

Mari kita lihat contoh penggunaan objek

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_

Dengan menggunakan objek, data menjadi lebih terstruktur dan mudah dibaca serta dipelihara

Karena Ferrari dan Lamborghini adalah objek mobil, kita sebenarnya tidak perlu menulis kunci (

const car = {
  name: 'Ferari',
};

2,

const car = {
  name: 'Ferari',
};

3, dan

const car = {
  name: 'Ferari',
};

4) berulang kali untuk setiap mobil

const car = {
  name: 'Ferari',
};

_5 dapat kita jadikan sebagai template atau blue print berbagai jenis mobil, karena semua mobil memiliki nama, tipe, dan harga

Ini ada kaitannya dengan paradigma OOP (Object Oriented Programming), tapi tidak akan kita bahas disini

Untuk saat ini kita hanya perlu mengetahui bahwa tipe data objek dapat digunakan untuk menampung lebih dari satu nilai, termasuk fungsi (method).

Berikut topik yang akan kita bahas

Apa Itu Objek?

Objek adalah kumpulan properti, properti adalah pasangan antara nama (kunci) dan nilai. Nilai properti dapat berupa data primitif atau non-primitif, termasuk fungsi dan objek

Jika sebuah objek memiliki lebih dari satu properti yang dipisahkan oleh koma, semua properti harus berada di antara kurung kurawal terbuka

const car = {
  name: 'Ferari',
};

6 dan tutup

const car = {
  name: 'Ferari',
};

7

Jika nilai properti berupa fungsi, biasanya disebut metode

Mari kita kupas satu per satu

Arti dari pasangan antara key dan value, lihat kode di bawah ini,

const car = {
  name: 'Ferari',
};

8 adalah nama (key) sedangkan

const car = {
  name: 'Ferari',
};

9 adalah value

const car = {
  name: 'Ferari',
};

Pasangan kunci dan nilai disebut properti (

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

0)

Kita tidak bisa menambahkan kunci tanpa nilai, begitu juga dengan nilai tanpa kunci (nama), harus sepasang (kunci dan nilai)

Untuk caranya, lihat kode di bawah ini

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

Properti dengan kunci

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

_1 disebut metode karena nilainya adalah fungsi

Karena di atas sudah kita sebutkan bahwa properti adalah pasangan key dan value, artinya semua metode pasti properti, sedangkan properti belum tentu metode.

Namun, agar lebih mudah dipahami, mari kita bedakan antara properti dan metode

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

Cara Membuat Objek

Ada tiga cara untuk membuat objek dalam JavaScript, Anda dapat menggunakan

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

2,

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

3, atau objek literal

Mari gunakan objek literal karena sebagian besar kondisi saat membuat aplikasi memang lebih baik menggunakan metode ini, metode ini paling banyak digunakan oleh programmer JavaScript

Untuk membuat objek literal sama dengan variabel

Kita dapat menggunakan kata kunci

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

4,

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

5, atau

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

6, diikuti dengan nama objek, lalu operator penugasan

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

7, serta sekelompok properti (kunci atau nama dan nilai) yang dipisahkan dengan koma dan dibungkus dengan kurung kurawal

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

8

const car = {
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

Aturan Penamaan Properti Objek

Konvensi dan aturan penamaan properti atau kunci objek umumnya sama dengan variabel

Tapi kita bisa membuat nama property yang tidak bisa dijadikan nama variabel dengan membungkusnya menggunakan tanda kutip

const car = {
  name: 'Ferari',
  start: function () {
    return 'started';
  },
};

9

Contoh penggunaan tanda hubung

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

0 dan angka di depannya

const car = {
  'nama-mobil': 'Ferari',
  '1nama': 'Ferari',
};

Hal ini sebenarnya jarang dilakukan bahkan tidak disarankan, biasanya nama properti dibuat dengan gaya CamelCase seperti variabel

Tapi kita perlu tahu ini

Alasannya adalah beberapa REST API pihak ketiga mengembalikan data JSON dengan nama properti yang tidak sesuai dengan aturan penamaan variabel JavaScript, termasuk penggunaan tanda hubung

Jenis Fungsi untuk Metode Objek

Nama properti dalam objek dapat berisi tipe data primitif atau non-primitif, termasuk fungsi. Properti dengan nilai fungsi disebut metode

Kita dapat menggunakan berbagai jenis fungsi untuk digunakan sebagai metode objek, yang paling umum adalah tiga fungsi berikut

Ekspresi Fungsi Anonim

const car = {
  name: 'Ferari',
  getName: function () {
    return this.name;
  },
};

console.log(car.getName()); // Ferari

Metode

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

_1 di atas dibuat menggunakan Anonymous Function Expression

Jika kita membutuhkan properti di luar metode untuk digunakan di dalam metode, kita dapat menggunakan kata kunci

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

2

Kata kunci

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

_2 mengacu pada objek saat ini

Contoh cara diatas untuk mengambil property

const car = {
  name: 'Ferari',
};

8, karena saya membutuhkan property

const car = {
  name: 'Ferari',
};

8 yang diluar method, saya menggunakan

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

6

Deklarasi Fungsi

const car = {
  name: 'Ferari',
  getName() {
    return this.name;
  },
};

console.log(car.getName()); // Ferari

Kita juga dapat menggunakan Deklarasi Fungsi dengan menghapus kata kunci

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

7 sebagai metode

Secara umum, perilakunya sama dengan Ekspresi Fungsi Anonim, kita juga dapat menggunakan kata kunci

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

2

Fungsi Panah Anonim

const car = {
  name: 'Ferari',
  getName: () => {
    return this.name;
  },
};

console.log(car.getName()); // undefined | ''

Jika metode menggunakan Fungsi Panah Anonim, kami tidak dapat menggunakan kata kunci

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

2

Ini tidak menyebabkan kesalahan dan masih mengembalikan nilai

Di browser (Chrome), kode di atas mengembalikan string kosong, sedangkan di Node. js mengembalikan nilai

const car = {
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

0

Oleh karena itu, jika Anda memerlukan akses ke properti di luar metode, jangan gunakan Fungsi Panah Anonim

Cara Mengakses Properti Objek

Untuk mengakses sebuah properti atau method di dalam sebuah objek, kita dapat menggunakan nama objek tersebut, diikuti notasi titik, kemudian nama properti yang ingin kita akses.

Sintaksis

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_0

Contoh

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_1

Selain notasi titik, kita juga bisa menggunakan tanda kurung siku

Dimulai dengan nama objek, kemudian nama properti dibungkus dengan tanda kurung siku dan tanda kutip pembuka dan penutup

Metode ini juga dapat digunakan untuk mengakses nama properti yang tidak sesuai dengan aturan penamaan variabel, termasuk yang mengandung tanda hubung seperti

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

0

Agar kode dalam metode dapat dieksekusi, kita perlu menulis tanda kurung kurawal setelah tanda kurung siku

Sintaksis

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_2

Contoh

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_3

Selain kedua metode di atas, kita juga bisa menggunakan nilai variabel yang berisi nama properti yang ingin kita akses.

Mirip dengan yang sebelumnya, tetapi kita perlu menghapus tanda kutip

Metode ini biasanya diperlukan dalam loop

Sintaksis

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_4

Contoh

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_5

Cara Menambahkan Properti Objek

Untuk alasan tertentu, terkadang kita juga perlu menambahkan properti atau metode baru ke objek yang sudah ada

Mirip dengan mengakses objek, kita bisa menggunakan notasi titik

Tapi kita perlu menggunakan operator penugasan dan menetapkan nilai yang ingin kita masukkan ke dalam properti

Sintaksis

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_6

Contoh

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_7

Untuk metode, kita dapat menggunakan berbagai jenis fungsi

Yang paling sering digunakan adalah Deklarasi Fungsi, Ekspresi Fungsi Anonim, dan Fungsi Panah Anonim

Fungsi bisa langsung dimasukkan seperti di atas atau bisa juga termasuk fungsi yang sudah dideklarasikan sebelumnya

Memasuki fungsi secara langsung

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_8

Atau, nyatakan fungsi terlebih dahulu lalu masukkan

// mobil lamborghini
const lamborghini = {
  nama: 'Lamborghini',
  tipe: 'Aventador',
  harga: 6000,
};

// mobil ferari
const ferari = {
  nama: 'Ferari',
  tipe: 'GTC4Lusso',
  harga: 12000,
};

_9

Saat dimasukkan ke dalam objek, Named Function Declaration dan Named Arrow Function akan diubah menjadi Anonymous

Sedangkan Deklarasi Fungsi akan tetap memiliki nama fungsi namun tetap harus diakses menggunakan nama properti

Oleh karena itu, apapun fungsi yang digunakan, metode tersebut hanya dapat diakses menggunakan nama properti, bukan nama fungsi

Selain itu, Fungsi Panah tidak bisa menggunakan kata kunci

const car = {
  // properti
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,

  // method
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

2, sementara yang lain bisa

Jika kami menyertakan properti dengan nama yang sudah ada, yang lama akan ditimpa

Cara Menghapus Properti Objek

Terkadang suatu objek memiliki properti yang tidak digunakan, atau nama properti objek tersebut telah diubah sehingga yang lama perlu dihapus untuk menghilangkan duplikasi

Untuk menghapus properti kita dapat menggunakan kata kunci

const car = {
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

3, diikuti dengan nama objek, notasi titik, kemudian nama properti

Sintaksis

const car = {
  name: 'Ferari',
};

0

Contoh

const car = {
  name: 'Ferari',
};

1

Saat menghapus sebuah method, kita tidak bisa menggunakan kurung kurawal

const car = {
  name: 'Ferari',
  type: 'GTC4Lusso',
  price: 12000,
  start: function () {
    return 'started';
  },
  stop: function () {
    return 'stoped';
  },
};

4 karena nantinya method tersebut tidak akan terhapus

Apa itu objek dalam JavaScript?

Nilai selain tipe data dasar secara otomatis dianggap sebagai objek . Objek di Javascript didefinisikan sebagai koleksi properti yang dapat diubah, yang berarti a sekelompok properti (karakteristik) yang nilainya dapat berubah.

Apa itu array dan objek dalam JavaScript?

Objek. kalau diterjemahkan ke dalam bahasa Indonesia adalah objek/tujuan/sasaran. Larik. jika diterjemahkan ke dalam bahasa Indonesia adalah susunan/urutan/baris . Himpunan[]. untuk menampilkan daftar nomor.

Bagaimana cara membuat fungsi di JavaScript *?

Ada 4 cara yang bisa kita lakukan untuk membuat sebuah fungsi di Javascript. .

Menggunakan cara biasa;

Menggunakan ekspresi;

Menggunakan panah ( => );

dan menggunakan Konstruktor

Apa itu kelas dalam JavaScript?

Dalam paradigma Pemrograman Berorientasi Objek (OOP), kelas adalah cetak biru yang dapat dikembangkan untuk membuat objek . Cetak biru ini adalah template yang menjelaskan apa perilaku objek (dalam bentuk properti atau metode).

kode javascript