Cara menggunakan manipulasi array javascript

Semua tipe data primitif di JavaScript hanya bisa menampung satu nilai, sementara non-primitif bisa lebih dari satu, termasuk objek.

Saat membuat aplikasi kita seringkali dihadapkan pada kondisi dimana kita perlu mengelompokkan sekumpulan data ke dalam satu entitas atau variabel.

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

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 diatas, kita perlu menggunakan nama masing-masing mobil untuk membedakan nama variabel, ini baru dua bagaimana kalau 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 serta mudah dibaca dan dipelihara.

Karena Ferari dan Lamborghini adalah sebuah objek mobil, kita sebetulnya tidak perlu menulis kunci (nama, tipe, dan harga) secara berulang-ulang untuk masing-masing mobil.

Kita bisa membuat class Mobil {} sebagai template atau blue print untuk beragam 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 tahu bahwa tipe data objek bisa kita gunakan untuk menampung lebih dari satu nilai, termasuk fungsi (method).

Berikut topik yang akan kita bahas:

1. Apa Itu Objek
2. Cara Membuat Objek
   1. Aturan Penamaan Properti Objek
   2. Jenis Fungsi untuk Method Objek
3. Cara Mengakses Properti Objek
4. Cara Menambahkan Properti Objek
5. Cara Menghapus Properti Objek

Apa Itu Objek?

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

Jika objek memiliki lebih dari satu properti dapat dipisahkan dengan koma, semua properti harus berada di antara kurung kurawal buka { dan tutup }.

Jika nilai properti berupa fungsi biasanya disebut method.

Mari kita kupas satu per satu...

Maksud dari pasangan antara kunci dan nilai, lihat kode di bawah, name adalah nama (kunci) sedangkan Ferari adalah nilainya.

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

Sepasang kunci dan nilai disebut properti (name: 'Ferari').

Kita tidak bisa menambahkan kunci tanpa nilai, begitu pula nilai tanpa kunci (nama), harus berpasangan (kunci dan nilai).

Untuk method, lihat kode di bawah:

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

Properti dengan kunci start disebut method karena nilainya adalah sebuah fungsi.

Karena di atas kita menyebutkan properti adalah sepasang kunci dan nilai, itu artinya semua method sudah pasti properti, sementara properti belum tentu method.

Tapi, untuk memudahkan pemahaman, mari kita bedakan antara properti dan method.

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 di JavaScript, bisa menggunakan new Object(), Object.create(), atau objek literal.

Mari kita 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 seperti variabel.

Kita bisa menggunakan kata kunci var, let, atau const, diikuti dengan nama objek, lalu operator penugasan =, serta sekumpulan properti (kunci atau nama dan nilai) yang dipisahkan dengan koma dan dibungkus dengan kurung kurawal { ... }.

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 secara umum sama seperti variabel.

Tapi kita bisa membuat nama properti yang tidak bisa digunakan sebagai nama variabel dengan membungkuasnya menggunakan tanda Petik 'namaProperti'.

Contoh penggunaan tanda hubung - dan angka didepan:

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

Ini sebetulnya jarang dilakukan bahkan tidak direkomendasikan, biasanya nama properti dibuat menggunakan gaya CamelCase seperti variabel.

Tapi kita perlu tau hal ini.

Pasalnya beberapa REST API pihak ketiga yang mengambalikan data JSON dengan nama properti yang tidak sesuai dengan aturan penamaan variabel JavaScript, termasuk penggunaan tanda hubung.

Jenis Fungsi untuk Method Objek

Nama properti di dalam objek dapat berisi tipe data primitif maupun non-primitif, termasuk fungsi. Properti dengan nilai fungsi disebut method.

Kita bisa menggunakan beragam jenis fungsi untuk dijadikan sebagai method objek, yang paling umum adalah tiga fungsi berikut:

Anonymous Function Expression

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

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

Method getName di atas dibuat menggunakan Anonymous Function Expression.

Jika kita membutuhkan properti yang ada di luar method untuk digunakan di dalam method, kita bisa menggunakan kata kunci this.

Kata kunci this mengacu pada objek saat ini.

Contoh method di atas untuk mengambil properti name, karena saya membutuhkan properti name yang berada di luar method, saya menggunakan this.name.

Function Declaration

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

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

Kita juga bisa menggunakan Function Declaration dengan menghilangkan kata kunci function sebagai method.

Secara umum perilakunya sama seperti Anonymous Function Expression, kita juga bisa menggunakan kata kunci this.

Anonymous Arrow Function

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

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

Jika method menggunakan Anonymous Arrow Function, kita tidak bisa menggunakan kata kunci this.

Ini tidak menyebabkan kesalahan dan tetap mengembalikan nilai.

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

Oleh karena itu, jika Anda membutuhkan akses ke properti di luar method, jangan gunakan Anonymous Arrow Function.

Cara Mengakses Properti Objek

Untuk mengakses properti atau method di dalam objek kita bisa menggunakan nama objek, diikuti notasi titik, lalu nama properti yang ingin dikases.

Sintaks:

namaObjek.namaProperti

Contoh:

const mahasiswa = {
  nama: 'ucup',
  umur: 30,
  getBio() {
    return 'nama: ' + this.nama + ' | umur: ' + this.umur;
  },
};

const nama = mahasiswa.nama;
console.log(nama); // ucup

const bio = mahasiswa.getBio();
console.log(bio); // nama: ucup | umur: 30

Selain notasi titik, kita juga bisa menggunakan kurung siku.

Diawali dengan nama objek, lalu nama properti yang dibungkus dengan kurung siku dan tanda Petik pembuka serta penutup.

Metode ini juga bisa kita gunakan untuk mengakses nama properti yang tidak sesuai dengan aturan penamaan variabel, termasuk yang mengandung tanda hubung seperti -.

Agar kode di dalam method dieksekusi, kita perlu menulis kurung lengkung setelah kurung siku.

Sintaks:

namaObject['namaProperti']

Contoh:

const mahasiswa = {
  nama: 'ucup',
  umur: 30,
  'umur-nya': 33,
  getBio() {
    return 'nama: ' + this.nama + ' | umur: ' + this.umur;
  },
};

const umur = mahasiswa['umur'];
console.log(umur); // 30

const umurnya = mahasiswa['umur-nya'];
console.log(umurnya); // 33

const bio = mahasiswa['getBio']();
console.log(bio); // nama: ucup | umur: 30

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

Mirip dengan yang sebelumnya, tapi kita perlu menghilangkan tanda Petik.

Metode ini biasanya dibutuhkan di dalam perulangan.

Sintaks:

namaObjek[namaVariabel]

Contoh:

const mahasiswa = {
  nama: 'ucup',
  umur: 30,
  getBio() {
    return 'nama: ' + this.nama + ' | umur: ' + this.umur;
  },
};

const key = 'nama';
const nama = mahasiswa[key];
console.log(nama); // ucup

const keyMethod = 'getBio';
const bio = mahasiswa[keyMethod]();
console.log(bio); // nama: ucup | umur: 30

Cara Menambahkan Properti Objek

Karena alasan tertentu terkadang kita juga perlu menambahkan properti atau method baru ke dalam sebuah objek yang sudah ada.

Mirip seperti mengakses objek, kita bisa menggunakan notasi titik.

Tapi kita perlu menggunakan operator penugasan dan menetapkan nilai yang ingin dimasukkan ke dalam properti tersebut.

Sintaks:

namaObjek.namaProperti = nilai;

Contoh:

const mahasiswa = {
  nama: 'ucup',
};

mahasiswa.umur = 19;

mahasiswa.getBio = function () {
  return 'nama: ' + this.nama + ' | umur: ' + this.umur;
};

console.log(mahasiswa.umur); // 19
console.log(mahasiswa.getBio()); // nama: ucup | umur: 19

Untuk method, kita bisa menggunakan beragam jenis fungsi.

Yang paling sering digunakan adalah Function Declaration, Anonymous Function Expression, dan Anonymous Arrow Function.

Fungsi dapat dimasukkan secara langsung seperti di atas atau bisa juga memasukkan fungsi yang sudah dideklarasikan sebelumnya.

Memasukkan fungsi secara langsung:

const mahasiswa = {
  nama: 'ucup',
};

mahasiswa.functionDeclaration = function namaFunction() {};
mahasiswa.anonymousFunctionExpression = function () {};
mahasiswa.anonymousArrowFunction = () => {};

Atau, deklarasikan fungsi terlebih dahulu lalu masukkan:

const mahasiswa = {
  nama: 'ucup',
};

function functionDeclaration() {}
const namedFunctionExpression = function () {};
const namedArrowFunction = () => {};

mahasiswa.functionDeclaration = functionDeclaration;
mahasiswa.namedFunctionExpression = namedFunctionExpression;
mahasiswa.namedArrowFunction = namedArrowFunction;

Ketika di masukkan ke dalam objek, Named Function Declaration dan Named Arrow Function akan diubah menjadi Anonymous.

Sedangkan Function Declaration akan tetap memiliki nama fungsi tapi tetap harus diakses menggunakan nama properti.

Oleh karena itu, apa pun fungsi yang digunakan, method hanya bisa diakses menggunakan nama properti, bukan nama fungsi.

Selain itu, Arrow Function tidak bisa menggunakan kata kunci this, sedangkan yang lain bisa.

Jika kita memasukkan properti dengan nama yang sudah ada, yang lama akan ditimpa.

Cara Menghapus Properti Objek

Terkadang sebuah objek memiliki properti yang tidak digunakan, atau nama properti objek sudah diubah sehingga yang lama perlu dihapus untuk menghilangkan duplikasi.

Untuk menghapus properti kita bisa menggunakan kata kunci delete, diikuti dengan nama objek, notasi titik, lalu nama properti.

Sintaks:

delete namaObjek.namaProperti;

Contoh:

const mahasiswa = {
  nama: 'ucup',
  umur: 19,
  getBio: function () {
    return 'nama: ' + this.nama + ' | umur: ' + this.umur;
  },
};

delete mahasiswa.umur;
delete mahasiswa.getBio;

console.log(mahasiswa); // { nama: "ucup" }

Saat menghapus method, kita tidak boleh menggunakan kurung lengkung () karena nantinya method tidak akan terhapus.