JS101 | Operator assignment di Javascript

3 min readOct 25, 2021

Operator untuk mengisi nilai variabel, beserta teknik seperti destructuring variabel dari suatu object atau array.

Operator assignment

Operator ini digunakan untuk memberi nilai pada suatu variabel / constants, operator ini disimbolkan dengan sama dengan =. Cara penggunaannya adalah sebagai berikut:

let variabel;
console.log(variabel); // undefined

variabel = 1;
console.log(variabel); // 1

const konstanta = 'SATU';
console.log(konstanta); // 'SATU'

Destructure

Selain untuk mengisi nilai variabel, operator ini berguna pula untuk men-destruktur nilai dari suatu object atau array.

Mari kita praktekan (HAH~!, QITA?)

Tanpa menggunakan desctructure assignment

const makanan = ['siomay', 'bakso', 'nasi ayam bawang'];
const siomay = makanan[0];
const bakso = makanan[1];

console.log(siomay, bakso);

Menggunakan desctructure assignment

const [siomay, bakso] = ['siomay', 'bakso', 'nasi ayam bawang'];console.log(siomay, bakso);

kedua code diatas akan menghasilkan:

siomay bakso

Mengapa bisa begitu?

Mari kita ingat-ingat, array adalah kumpulan nilai yang bisa diakses nilainya melalui index, nah di code pertama dapat terliat ada assignment untuk mengisi nilai variabel siomay dengan nilai dari makanan dengan index nol (0), const siomay = makanan[0];, dan akan mencetak 'siomay' jika variabel siomay dipanggil.

Seperti statement assignment const [siomay, bakso] = makanan; yang merepresentasikan index dari array dengan menggunakan posisinya.

Variabel siomay di code kedua akan diisi dengan nilai dari index pertama dari array makanan karena siomay menempati posisi awal, dan bakso akan diisi dengan nilai dari index kedua variabel array makanan.

Mari lanjut ke contoh yang sedikit lebih kompleks:

const makanan = [
  {
    harga: 18000,
    nama: 'siomay',
  },
  {
    harga: 14500,
    nama: 'bakso',
  },
  {
    harga: 24000,
    nama: 'Nasi Ayam bawang',
  },
];

const [siomay, baso] = makanan;

console.log(siomay.nama, siomay.harga);
console.log(baso.nama, baso.harga);

ketika dijalankan akan menghasilkan output sebagai berikut:

siomay 18000
bakso 14500

Mengapa bisa begitu?

Sama seperti contoh code pertama. Karena variabel makanan berisikan array yang terdiri dari object makanan yang memiliki attribut harga dan nama, sehingga dapat di 'destructure' menjadi tuple [siomay, baso], siomay menjadi variabel yang akan terisi nilai dari index pertama variabel makanan: {harga: 18000, nama: 'siomay'}, dan bakso dari index kedua.

Selain array, object juga dapat didesctructure. Bedanya object didestructure dengan menggunakan key. mari kita praktekkan dengan code berikut:

const NASI_AYAM_BAWANG = {
    harga: 24000,
    nama: 'Nasi Ayam bawang',
  },

const { nama, harga } = NASI_AYAM_BAWANG;

console.log(nama, harga);

Dapat diperhatikan ketika destructure terjadi, kita menggunakan key nama, dan harga tanpa mempedulikan posisinya. Sehingga ketika dijalankan akan menghasilkan output sebagai berikut:

Nasi Ayam Bawang 24000

Mix Assignment with other operators

Operator assignment juga dapat dicampur dengan operator lainnya, sehinggan memudahkan untuk melakukan operasi yang membutuhkan nilai sebelumnya yang kemudian nilainya akan langsung disimpan.

let harga = 1000;harga += 1000; // harga + 1000
console.log('harga += 1000', harga);harga -= 1000; // harga - 1000
console.log('harga -= 1000', harga);harga *= 2; // harga * 2
console.log('harga *= 2', harga);harga /= 2; // harga / 2
console.log('harga /= 2', harga);

Output:

harga += 1000 = 2000;
harga -= 1000 = 1000;
harga *= 2 = 2000;
harga /= 2 = 1000;

Sederhananya, seperti ini:

harga = 1000: harga didefinisikan sebesar 1000.
harga += 1000 atau seperti ini harga = harga + 1000: harga akan diisi dengan harga sebelumnnya kemudian ditambahkan dengan 1000.

Sudah cukup mungkin ya untuk bahas operator assignment di javascript, jika ada yang mau ditanyakan silahkan mensyen gue di twitter @sadevva_.

Cheers 🥂

Originally published at https://hendrasadewa.site.