Apa Itu Javascript ES6

 

ECMAScript

JavaScript

Sampai modul ini, kalian pasti sudah mengenal lebih dalam tentang JavaScript: bahasa pemrograman yang esensial dalam pengembangan aplikasi web interaktif. Hampir semua pengembang web mengenal bahasa ini, mulai dari syntax sampai fitur-fiturnya.

Tapi apa kalian tahu kalau syntax dan fitur bahasa JavaScript mengalami pembaruan setiap beberapa tahun?

Benar, JavaScript yang kalian kenal sekarang memiliki beberapa fungsi yang belum ada 5-10 tahun yang lalu:

• method .forEach() untuk array belum dikenal sebelum ES5 pada tahun 2009.
• sebelum ES6 pada tahun 2015, untuk melakukan operasi pangkat kita harus menggunakan Math.pow() tidak bisa langsung dengan operator eksponen **.

"ES5? ES6? Apa sih maksudnya? Baru denger"

ECMAScript

ES itu adalah singkatan dari ECMAScript. Jadi ES6 itu salah satu versi dari ECMAScript. ES sendiri bukan sebuah bahasa, melainkan sebuah spesifikasi, atau bahasa sederhananya, standar. Standar di sini adalah sekumpulan kriteria teknis yang harus dipenuhi. Dipenuhi oleh siapa? Tentunya dalam kasus ini adalah JavaScript.

Mengerti ya perbedaannya? Jadi kalau kalian ditanya "Apa bedanya ECMAScript dan JavaScript?", tahu jawabannya kan.

ECMAScript adalah sebuah spesifikasi, atau standar.

JavaScript adalah salah satu bahasa pemrograman yang mengikuti standar ECMAScript.

Asal kalian tahu saja, yang mengikuti standar ECMAScript itu bukan hanya JavaScript lho. Masih ada ActionScript dan JScript, tapi JavaScript itu tetap yang paling populer sampai saat ini.

Pada topik-topik berikutnya, kita akan membahas mengenai salah satu versi dari ECMAScript, lebih tepatnya ES6.

let vs const vs var

Dari topik-topik sebelumnya, kita tahu bahwa untuk mendeklarasikan sebuah variabel, kita bisa menggunakan kata kunci let atau const dan diikuti nama variabelnya.

Wah bedanya apa ya? Coba simak penjelasan di bawah ini.

Deklarasi Variabel Menggunakan let

Saat mendeklarasikan variabel menggunakan let, variabel tersebut masih bisa diberi nilai yang baru nantinya.

Contoh:

let bilanganPi = 3.14;
bilanganPi = 3.; 

console.log(bilanganPi); // Output: 3

bilanganPi = 3.2;
console.log(bilanganPi); // Output: 3.2

Penggunaan let cocok untuk variabel yang nilainya memang bisa berubah-ubah. Bagaimana kalau kita ingin variabel tersebut tidak bisa diubah nilainya?

Solusinya adalah menggunakan kata kunci const.

Deklarasi Variabel Menggunakan const

Syntax penggunaan const mirip dengan saat menggunakan let, yaitu diikuti nama variabelnya. Lalu apa bedanya const dengan let?

Nah, variabel yang dideklarasikan dengan const itu tidak bisa diberi nilai baru.

Contoh:

let bilanganPi = 3.14;
bilanganPi = 3.;  // Output TypeError: Assignment to constant variable

Karena variabel bilanganPi dideklarasikan menggunakan kata kunci const, kita tidak bisa memberi nilai baru pada variabel tersebut.

Deklarasi Object dan Array menggunakan const

Kesalahpahaman umum adalah const membuat sebuah variabel dengan nilai konstan. Ini pada umumnya benar, namun ada pengecualian. Untuk variabel dengan tipe objek atau array, variabel tersebut tidak bisa diganti nilainya, tetapi properti atau element-nya bisa.

Coba lihat contoh berikut:

const warna = ["merah", "kuning", "kelabu"];

// pemberian array baru pada variabel dengan `const` akan menampilkan error
warna = ["hijau", "abu", "biru"];  // Output TypeError: Assignment to constant variable

// namun jika perubahan pada arraynya sendiri masih bisa dilakukan
warna.push("nila", "ungu");

console.log(warna); // Output: ["merah", "kuning", "kelabu", "nila", "ungu"]

Kalau kita lihat contoh di atas, saat kita berusaha memberi array baru pada variabel warna, akan muncul error. Sebab seperti yang tadi kita bahas, variabel yang dideklarasikan dengan const tidak bisa diberi nilai baru.

Namun lihat pada saat kita menggunakan method push() pada variabel warna. Tidak ada error. Kenapa? Karena kita memang hanya mengubah nilai (menambah element baru) dari variabel warna, bukan memberinya nilai baru.

Deklarasi variabel menggunakan var

Dalam JavaScript, sebetulnya ada satu lagi cara mendeklarasikan variabel, yaitu dengan kata kunci var. Sudah hampir tidak ada yang memakai var kecuali untuk kode JavaScript lama yang tidak mendukung ES6.

Kenapa tidak dipakai lagi?

Deklarasi variabel menggunakan var tidak akan memunculkan error walaupun variabel dengan nama yang sama sudah pernah dideklarasikan. Jadi misalkan kita pernah membuat sebuah variabel, lalu entah karena lupa atau tidak sengaja kita membuat variabel dengan nama yang sama, nilai dari variabel yang pertama akan ditimpa dengan yang baru.

Contoh:

// deklarasi variabel bernama bahasaFavorit
var bahasaFavorit = "JavaScript";

// baris kode lain
// ...

// tidak sengaja kita membuat variabel dengan nama yang sama
var bahasaFavorit = "Python";

console.log(bahasaFavorit); // Output: Python

Pada kode di atas, kita tidak sengaja membuat variabel lagi bernama bahasaFavorit padahal sudah pernah ada variabel dengan nama tersebut. Yang menjadi masalah adalah kode tersebut tidak menghasilkan error sama sekali.

Bandingkan kalau kita menggunakan let atau const

// deklarasi variabel menggunakan const dan let
const nama = "Rafi";
let umur = 16;

// kalau kita coba deklarasi lagi dengan nama variabel yang sama
// akan muncul error
const nama = "Farhan"; // Output SyntaxError: Identifier 'nama' has already been declared
let umur = 21; // Output SyntaxError: Identifier 'nama' has already been declared

Dengan begini kita jadi tahu bahwa sudah pernah ada variabel dengan nama yang sama.

Scoping Variabel dengan var

Kelemahan lain dari deklarasi variabel menggunakan var adalah ia tidak memiliki block scoping.

Apa itu block scoping?

Sebuah variabel yang dideklarasikan di dalam blok if-else, switch-case, while, dan for seharusnya memang tidak bisa diakses dan diubah nilainya dari luar blok tersebut.

Contoh:

var judulBuku = "Harry Potter";

if (judulBuku === "Harry Potter") {
  var pengarang = "J.K. Rowling";
}

console.log(pengarang); // Output: J.K. Rowling

Pada kode di atas, variabel pengarang dideklarasikan di dalam blok if. Tapi dia tetap bisa diakses di luar blok tersebut (lihat output dari baris terakhir).

Bandingkan dengan contoh menggunakan let:

let judulBuku = "Harry Potter";

if (judulBuku === "Harry Potter") {
  let pengarang = "J.K. Rowling";
}

console.log(pengarang); // Output ReferenceError: pengarang is not defined

Template Literal

Masih ingat bagaimana cara menggabungkan string dengan nilai pada variabel lain (string concatenation)? Cukup dengan menggunakan operator + , kamu dapat melakukan proses penggabungan.

Contohnya seperti ini:

let nama = "sarah";
let umur = 24;

let kalimat = "Namanya " + nama + ". Umurnya " + umur + " tahun.";
console.log(kalimat);

/*
Output:
"Namanya sarah. Umurnya 24 tahun."
*/

Bayangkan jika variabelnya ada banyak, kemudian kalimatnya sangat panjang. Akan sangat capek sekali apabila kita harus menggunakan operator + untuk menggabungkan setiap variabelnya.

Di sinilah template literal berguna.

Template Literal

Template literal adalah cara untuk menanamkan ekspresi JavaScript ke dalam sebuah string. Template literal dibungkus dengan sepasang tanda `(backtick), dan ekspresi JavaScript-nya dibungkus dengan tanda ${ }.

Syntax-nya seperti berikut ini:

let namaVariabel = `${ekspresiJavaScript}`;

*"Ekspresi? Menanamkan? Pelan-pelan dong Mbak"*

Ekspresi dalam JavaScript adalah sesuatu yang jika dievaluasi akan menghasilkan sebuah nilai tunggal. Bisa itu variabel, operasi matematika, atau operasi logika.

*"Jadi di tengah-tengah string nanti bisa ada variabel atau operasi matematika gitu?"*

Iya, Benar sekali!

Coba kita ambil contoh pertama ya.

```javascript
let nama = "sarah";
let umur = 24;

let kalimat = `Namanya ${nama}. Umurnya ${umur} tahun.`

console.log(kalimat);

/*
Output:
"Namanya sarah. Umurnya 24 tahun."
*/

Pada contoh di atas, variabel nama dan umur akan dievaluasi nilainya menjadi "sarah" dan 24. Kedua nilai ini baru dimasukkan menjadi bagian dari string.

Seperti yang tadi dibahas, kita juga bisa memasukkan operasi matematika atau operasi logika dengan template literal. Contohnya seperti ini:

let umur = 16;

let kalimat = `Umur saya tahun depan adalah ${umur + 1}`;

console.log(kalimat); // Output: Umur saya tahun depan adalah 17

let kalimat2 = `Tahun depan saya ${umur + 1 >= 17 ? 'bisa' : 'tidak bisa'} ikut pemilu`;

console.log(kalimat2); // Output: Tahun depan saya bisa ikut pemilu

Pada kode di atas, umur + 1 di variabel kalimat akan dievaluasi menjadi 22 dulu sebelum ia menjadi bagian dari string. Begitu juga kode umur + 1 >= 17 ? 'bisa' : 'tidak bisa' akan dievaluasi menjadi 'bisa' sebelum ia menjadi bagian dari string di kalimat2.

Jangankan variabel dan operasi matematika, fungsi pun bisa. Perhatikan contoh berikut:

// fungsi yang mengembalikan sebuah string
function namaSaya() {
  return "Krishna";
}

let kalimatPerkenalan = `Halo nama saya adalah ${namaSaya()}`;

console.log(kalimatPerkenalan); // Output: Halo nama saya adalah Krishna

Begitulah kegunaan template literal. Kamu dapat menanamkan semua jenis ekspresi JavaScript ke dalam sebuah string, tanpa perlu menggunakan string concatenation satu persatu lagi.

Arrow Function

Menggunakan Arrow Function

Masih ingat cara mendeklarasikan fungsi?

Untuk mengingat kembali, mari lihat contoh di bawah ini:

function ucapkanSalam() {
  return "Selamat Pagi";
};

Di Javascript ES6, ada cara baru dalam penulisan sebuah fungsi, yaitu menggunakan arrow function. Kelebihan menggunakan arrow function adalah penulisan fungsi menjadi lebih singkat dan lebih mudah dibaca.

Syntax menggunakan arrow function adalah sebagai berikut:

// Arrow function
const namaFungsi = (parameter1, ..., parameterX) => {
  // kode yang ingin dijalankan dalam fungsi
};

// atau bila fungsi tersebut tidak memiliki parameter sama sekali
const namaFungsiTanpaParameter = () => {
  // kode yang ingin dijalankan dalam fungsi
};

Contoh:

// fungsi dengan parameter
const operasiPenjumlahan = (bilangan1, bilangan2) => {
  const hasil =  bilangan1 + bilangan2;
  return hasil;
};

console.log(operasiPenjumlahan(3, 4)); // Output: 7

// fungsi yang tidak memiliki parameter
const namaJenisAnjing = () => {
  const anjing = ["Pug", "Bulldog", "Poodle"];
  return anjing[Math.floor(Math.random()*(anjing.length))];
}

console.log(namaJenisAnjing()); // Output: Pug (hasil random)

Implicit Return Value

Yang dimaksud dengan implicit return value adalah suatu kondisi di mana sebuah fungsi langsung mengembalikan nilai tanpa ada deklarasi variabel atau operasi lainnya di dalamnya.

Misalnya kita mempunyai satu fungsi seperti berikut ini:

function greeting(nama) {
   return `Hi ${nama}`;
}

console.log(greeting('Einstein')); // Output: Hi Einstein

Kode di atas bisa disingkat dengan menggunakan arrow function sebagai berikut:

const greeting = (nama) => `Hi ${nama}`;

console.log(greeting('Einstein')); // Output: Hi Einstein

Untuk fungsi yang tidak memiliki parameter, syntax arrow function untuk implicit return value adalah sebagai berikut:

const namaFungsi = () => nilaiReturn;

Jadi kita tidak lagi perlu capek-capek menulis kurung kurawal {} dan kata return lagi.

Default Parameter

Kalian masih ingat tidak apa itu parameter dan argument? Biar tidak lupa, mari kita coba bahas sedikit yuk.

Parameter adalah syarat input yang harus dimasukkan ke dalam suatu fungsi dan dideklarasikan bersama dengan deklarasi fungsi.

Sementara argument adalah nilai yang dimasukkan ke dalam suatu fungsi, sesuai dengan persyaratan parameter, di mana argument dituliskan bersamaan dengan pemanggilan fungsi.

Contoh

function panggang(bahan, durasi, suhu) {
  return `Panggang ${bahan} selama ${durasi} pada suhu ${suhu}`;
}

panggang("Roti", "10 menit", "100 C"); // Output: Panggang Roti selama 10 menit pada suhu 100 C

Pada contoh di atas, (bahan, durasi, suhu) itu merupakan parameter dari fungsi panggang. Artinya saat kita memanggil fungsi tersebut, ia akan menantikan argument yang sesuai dengan parameternya. Dalam kode di atas, argumentnya adalah "Roti", "10 menit", dan "100 C".

Apa yang terjadi kalau kita lupa memberinya argument yang sesuai dengan parameternya?

Misalnya kita hanya memberinya 2 buah argument: panggang("Roti", "10 menit").

Atau bahkan tidak sama sekali: panggang().

Hasilnya akan seperti ini:

console.log(panggang("Roti", "10 menit"));
// Output: Panggang Roti selama 10 menit pada suhu undefined 

console.log(panggang());
// Output: Panggang undefined selama undefined pada suhu undefined

Pada dasarnya jika kita tidak memberi argument padahal fungsi tersebut menantikan sebuah argument, nilai default yang akan dipakai adalah undefined..

Pada contoh kode di atas mungkin tidak ada error, tapi bagaimana jika kodenya seperti di bawah ini:

function cetakNama(orang) {
  return orang.nama;
}

cetakNama(); // Output TypeError: Can't read the property 'nama' of undefined

Kode di atas akan menghasilkan error. Karena saat kita tidak memberikan argument untuk parameter orang, nilai defaultnya adalah undefined. Dan saat fungsi cetakNama ingin membaca properti nama dari orang, di situlah muncul error karena orang bernilai undefined.

Bagaimana cara menangani masalah seperti ini?

Bagaimana caranya kita memastikan kalau parameter pada fungsi yang kita buat tidak bernilai undefined?

Solusinya adalah menggunakan default parameter.

Default Parameter

Default parameter adalah nilai pengganti yang akan diberikan ke sebuah fungsi apabila fungsi tersebut tidak diberikan argument yang cocok dengan parameter fungsi tersebut (atau argument yang diberikan bernilai undefined).

Syntax-nya adalah seperti ini:

function namaFungsi(parameter1 = defaultParameter1) {
  // kode yang akan dijalankan di dalam fungsi
}

Jadi kalau misalnya fungsi tersebut tidak menerima argument yang seharusnya menjadi nilai parameter1, nilai default yang akan diambil oleh parameter1 adalah defaultParameter1.

Kita ambil contoh fungsi yang pertama tadi.

function panggang(bahan = "makanannya", durasi = "yang diperlukan", suhu = "yang cocok") {
  return `Panggang ${bahan} selama ${durasi} pada suhu ${suhu}`;
}

Sehingga kalau kita memanggil fungsi tersebut tanpa argument yang lengkap, hasilnya akan seperti ini:

panggang("Risoles", "5 menit"); // Output: Panggang Risoles selama 5 menit pada suhu yang cocok

panggang(); // Output: Panggang makanannya selama yang diperlukan pada suhu yang cocok

Rest Parameter & Spread Operator

Rest parameter dan spread operator itu bisa kita bilang kembar: mirip tapi tidak sama. Sebab keduanya sama-sama menggunakan tanda ... (elipsis atau tiga buah titik) sebagai bagian dari syntaxnya, namun fungsinya sangat berbeda.

Penasaran tidak kegunaannya? Mari kita bahas satu per-satu.

Rest Parameter

Rest Parameter adalah parameter yang mewakili nilai dari semua (atau sisa) argument yang diberikan kepada suatu fungsi.

Contoh:

const foo = (...params) => {
  console.log(params);
};

foo("A", "B", "C"); // Output: ["A", "B", "C"]

Kalau kalian perhatikan kode di atas, nilai dari parameter params berisi semua nilai argument yang kita berikan pada saat pemanggilan fungsi foo.

Kok bisa gitu?

Coba cermati parameter params. Ada ... (elipsis) di depannya kan? Parameter yang diawali dengan elipsis menandakan ia adalah sebuah rest parameter. Jika sebuah fungsi dengan satu parameter berupa rest parameter dipanggil dan diberikan satu atau lebih argument, rest parameter-nya akan mewakili semua argument-argument tersebut.

Rest Parameter Sebagai Parameter Terakhir

Rest parameter juga bisa digunakan saat ada parameter lain pada fungsi yang sama. Dalam kasus ini, rest parameter akan mewakili sisa argument yang belum "dipetakan" ke parameter-parameter sebelumnya.

Contoh:

const bar = (param1, param2, ...params) => {
  console.log("Argument pertama ", param1);
  console.log("Argument pertama ", param2);
  console.log("Sisa argument ", params);
}

bar("A", "B", "C", "D", "E");
// Output:
// Argument pertama  A
// Argument pertama  B
// Sisa argument ["C", "D", "E"]

Pada kode di atas,

• param1 mewakili argument pertama, yaitu "A",
• param2 mewakili argument pertama, yaitu "B",
• params mewakili sisa argument, yaitu "C", "D", dan "E".

Paham ya, kalau rest parameter ditaruh sebagai parameter terakhir, ia akan mengambil sisa dari argument yang kita berikan pada fungsi tersebut.

Pada dasarnya, hanya bisa ada satu rest parameter dalam sebuah fungsi. Dan dia harus ditempatkan di paling belakang. Kalau tidak, akan muncul error saat kita mendeklarasikan fungsinya.

Contohnya:

// Tempatkan rest parameter di tengah-tengah parameter lainnya
const buzz = (param1, ...params, param2) => {
  console.log(param1);
  console.log(params);
  console.log(param2);
}

// Output: SyntaxError: Rest parameter must be last formal parameter

Spread Operator

Berlawanan dengan rest parameter, sifat dari spread operator justru memisahkan/memecahkan. Ia memecah sebuah array menjadi element-elementnya (atau dalam kasus objek, memecah objek menjadi pasangan properti-nilai yang membentuknya).

Spread Operator Dengan Array

let arrayBilangan = [1, 2, 3, 4, 5];

// tanpa spread operator
console.log(arrayBilangan); // Output: [1, 2, 3, 4, 5]

// kalau pakai spread operator
console.log(...arrayBilangan); // Output: 1, 2, 3, 4, 5

Saat menggunakan spread operator, outputnya bukan lagi array, melainkan element-element pembentuknya secara individu.

Spread operator pada array memiliki beberapa kegunaan:

• membuat array duplikat

  let arrayAsli = [1, 2, 3];
  
  let arrayDuplikat = [...arrayAsli];

  Sekarang arrayDuplikat adalah array baru yang memiliki element-element yang sama dengan arrayAsli.

  Kalian mungkin bertanya "Kenapa tidak langsung seperti ini saja?"

  let arrayAsli = [1, 2, 3];
  
  let arrayDuplikat = arrayAsli;

  Dalam kode di atas, arrayAsli dan arrayDuplikat itu menunjuk pada array yang sama, sehingga kalau kita membuat perubahan pada arrayDuplikat, arrayAsli juga ikut berubah. Sebaliknya juga begitu.

• menggabungkan array (concatenate)

  let array1 = ["foo", "bar"];
  let array2 = ["fizz", "buzz"];
  
  // menggunakan spread operator
  array1 = [...array1, ...array2];
  
  console.log(array1); // Output: ["foo", "bar", "fizz", "buzz"]

Spread Operator Dengan Objek

Mirip pada array, spread operator memecah objek menjadi pasangan properti-nilai yang membentuknya. Hal ini memiliki beberapa kegunaan:

• menambah beberapa properti sekaligus

  let orang = {
    nama: "Yudistya",
    umur: 32
  };

  Untuk menambahkan beberapa properti lainnya, kita bisa melakukan ini:

  orang.pekerjaan = "arsitek";
  orang.pendidikan = "S1";

  atau bisa juga lebih singkat dengan menggunakan spread operator seperti ini:

  orang = {...orang, pekerjaan: "arsitek", pendidikan: "S1"};

• menggabungkan objek

  Spread operator juga memungkinkan kita untuk menggabungkan dua (atau lebih) objek.

  Sebelum ES6, kita harus menggunakan method .assign() dari Object seperti ini:

  const objek1 = {a: 1, b: 2};
  const objek2 = {c: 3, d: 4};
  const objekGabungan = Object.assign({}, objek1, objek2);
  
  console.log(objekGabungan); // Output: {a: 1, b: 2, c: 3, d: 4}

  Tapi dengan spread operator, kita cukup menambahkan elipsis di depan nama arraynya lalu membungkus semuanya dengan sepasang kurung kurawal.

  const objek1 = {a: 1, b: 2};
  const objek2 = {c: 3, d: 4};
  const objekGabungan = {...objek1, ...objek2};
  
  console.log(objekGabungan); // Output: {a: 1, b: 2, c: 3, d: 4}

Destrukturisasi

Destrukturisasi adalah cara untuk membongkar isi dari array atau objek dan menyimpan hasilnya ke dalam variabel-variabel lain.

Mari kita bahas lebih lanjut!

Destrukturisasi Array

Sebelum ES6, cara untuk menyimpan nilai dari masing-masing element dari sebuah array ke dalam variabel adalah sebagai berikut:

let buah = ["mangga", "pisang", "anggur"];

let buah1 = buah[0];
let buah2 = buah[1];
let buah3 = buah[2];

console.log(buah1); // Output: mangga
console.log(buah2); // Output: pisang
console.log(buah3); // Output: anggur

Selain tidak efisien karena harus menulis assignment untuk tiap variabel, kita juga harus menghitung nilai yang kita ingin ambil itu ada di index keberapa.

Untungnya ES6 menyediakan cara untuk mendapatkan hasil yang sama dengan cara yang lebih singkat.

Syntax-nya mirip dengan cara mendeklarasikan sebuah array, namun kali ini nama array-nya ada di sebelah kanan dan variabel untuk menyimpan element-element yang ingin dibongkar ada di sebelah kiri.

Contoh:

// cara mendeklarasikan variabel berupa array
let namaArray = [element1, element2, element3];

// cara melakukan destrukturisasi array
let [variabel1, variabel2, variabel3] = namaArray;

Kita ambil contoh array yang pertama ya:

let buah = ["mangga", "pisang", "anggur"];

// lakukan destrukturisasi array
let [buah1, buah2, buah3] = buah;

console.log(buah1); // Output: mangga
console.log(buah2); // Output: pisang
console.log(buah3); // Output: anggur

Lebih singkat bukan kalau menggunakan destrukturisasi array?

Kalian juga bisa memilih element mana saja yang tidak ingin disimpan di dalam variabel dengan menggunakan "koma kosong", atau tidak menyebutkan element tersebut saat destrukturisasi.

Contoh:

// gunakan koma kosong untuk melewati element kedua dan keempat
let [namaDepan, , namaBelakang, , buku] = ["Joanne", "K", "Rowling", "pengarang", "Harry Potter"];

console.log(namaDepan); // Output: Joanne
console.log(namaBelakang); // Output: Rowling
console.log(buku); // Output: Harry Potter

Pada kode di atas, karena kita mengosongkan tempat kedua dan keempat pada saat destrukturisasi array, element kedua ("K") dan element keempat ("Pengarang") tidak akan ikut disimpan dalam variabel seperti element pertama, ketiga, dan kelima.

Kalian ingin menukar nilai dari dua variabel (atau lebih) dengan lebih cepat dan tanpa menggunakan variabel tambahan? Bisa pakai destrukturisasi array.

Sebelumnya mungkin kita harus melakukan ini:

let a = 10;
let b = 15;

// variabel tambahan sementara
let temp = a;
a = b; // nilai a sekarang adalah 15
b = temp; // nilai b sekarang adalah 10

Sekarang kita cukup melakukan ini:

let a = 10;
let b = 15

[a,b] = [b,a];
// nilai a sekarang adalah 15, dan nilai b adalah 10

Destrukturisasi Objek

Sama seperti destukturisasi array, sebelum ES6, kita harus menulis assignment satu per satu untuk tiap nilai dalam objek yang kita ingin bongkar. Seperti ini:

let orang = {
  nama: "Joko",
  umur: 18,
  sudahMenikah: false
};

let nama = orang.nama;
let umur = orang.umur;
let sudahMenikah = orang.sudahMenikah;

console.log(nama); // Output: Joko
console.log(umur); // Output: 22
console.log(sudahMenikah); // Output: false

Pada Javascript ES6, caranya lebih singkat, yaitu dengan destrukturisasi.

Syntax untuk destrukturisasi objek adalah seperti ini:

let { namaProperti1, namaProperti2, namaProperti3 } = namaObjek;

Cara di atas hanya bekerja jika nama variabel baru untuk destrukturisasi itu sama dengan nama properti pada objek yang akan didestrukturisasi ya. Kalau tidak nanti isi dari variabelnya adalah undefined.

Misalnya:

let orang = {
  nama: "Joko",
  umur: 22,
  sudahMenikah: false
};

// Destrukturisasi Objek
let { nama, umur, statusMenikah } = orang;

console.log(nama); // Output: Joko
console.log(umur); // Output: 22
console.log(statusMenikah); // Output: undefined karena nama variabel dan properti berbeda

Tapi kalau kalian ingin agar nama variabelnya berbeda dari nama properti, kalian bisa menambahkan titik dua setelah nama properti dan diikuti nama variabel yang baru, seperti ini:

let {
  namaProperti1: namaVariabelBaru1,
  namaProperti2: namaVariabelBaru2
} = namaObjek;

Contoh:

let orang = {
  name: "Joko",
  age: 22,
};

// buat variabel nama berisi nilai dari properti name pada orang
// buat variabel age berisi nilai dari properti umur pada orang
let { name: nama, age: umur } = orang;

console.log(nama); // Output: Joko
console.log(umur); // Output: 22

Destrukturisasi Objek Bertingkat

Jika objek-nya bertingkat (ada objek di dalam objek) apa tetap bisa didestrukturisasi?

Bisa!

Contohnya seperti ini:

let murid = {
  kelas: "12a",
  nama: ["ani", "yahya", "sinto"],
  prestasi: {
    olahraga: "juara 1",
    akademik: "juara 2"
  }
};

let {
  prestasi: { olahraga }
} = murid;

console.log(olahraga); // Output: juara 1

Kalau kalian cermati, nilai "juara 1" adalah nilai dari properti "olahraga", yang mana adalah properti dari objek prestasi. Maka saat melakukan destrukturisasi, kita juga harus mengikuti struktur objek tersebut.

Object Shorthand

Object Shorthand di Variabel

Object shorthand di variabel sebenarnya kebalikan dari destrukturisasi objek. Jika destrukturisasi objek menyimpan nilai properti objek di variabel, maka object shorthand menyimpan nilai variabel di properti objek.

Jika ada beberapa variabel yang nilainya ingin dijadikan sebagai properti sebuah objek, maka cara mendeklarasikan objek tersebut adalah sebagai berikut:

let suaraKucing = "Meow";
let suaraAnjing = "Gukguk";
let suaraTikus = "Citcitcit";

let suaraHewan = {
  suaraKucing: suaraKucing,
  suaraAnjing: suaraAnjing,
  suaraTikus: suaraTikus
};

console.log(suaraHewan); // Output:  { suaraKucing: 'Meow', suaraAnjing: 'Gukguk', suaraTikus: 'Citcitcit' }
console.log(suaraHewan.suaraKucing); // Output: Meow
console.log(suaraHewan.suaraAnjing); // Output: Gukguk
console.log(suaraHewan.suaraTikus); // Output: Citcitcit

Coba bayangkan, bagaimana kalau variabel yang mau disimpan di dalam properti objeknya ada banyak?

Ada cara lebih singkat ketika menuliskan objek di atas, yaitu dengan menggunakan object shorthand. Aturan utama ketika menggunakan cara object shorthand adalah nama variabel dan nama properti di objek yang bersangkutan harus sama.

Contoh:

let suaraKucing = "Meow";
let suaraAnjing = "Gukguk";
let suaraTikus = "Citcitcit";

let suaraHewan = { suaraKucing, suaraAnjing, suaraTikus };

console.log(suaraHewan); // Output:  { suaraKucing: 'Meow', suaraAnjing: 'Gukguk', suaraTikus: 'Citcitcit' }
console.log(suaraHewan.suaraKucing); // Output: Meow
console.log(suaraHewan.suaraAnjing); // Output: Gukguk
console.log(suaraHewan.suaraTikus); // Output: Citcitcit

Object Shorthand di Parameter Fungsi

Object shorthand bisa juga digunakan untuk mengambil parameter dari sebuah fungsi dan dijadikan sebagai nilai properti di objek yang dideklarasikan di dalam fungsi tersebut.

Sama seperti di variabel, object shorthand hanya bisa digunakan apabila nama parameter pada fungsi sama dengan nama properti dari objek yang bersangkutan.

Contoh:

// Pada JavaScript ES5 (tanpa object shorthand)
function membuatBiodata(nama, umur, jenisKelamin) {
  return {
    nama: nama,
    umur: umur,
    jenisKelamin: jenisKelamin
  };
}

console.log(membuatBiodata("Andi", 22, "pria")); // Output: { nama: 'Andi', umur: 22, jenisKelamin: 'pria' }

Dengan menggunakan object shorthand maka akan menjadi seperti ini:

// Di sini selain menggunakan object shorthand, kita juga akan menggunakan arrow function dari ES6
let membuatBiodata = (nama, umur, jenisKelamin) => {
   return { nama, umur, jenisKelamin };
};

console.log(membuatBiodata("Andi", 22, "pria")); // Output: { nama: 'Andi', umur: 22, jenisKelamin: 'pria' }

Object Shorthand untuk Mendeklarasikan Method

Masih ingat method kan? Method adalah fungsi yang menjadi nilai properti di suatu objek.

Masih ingat juga kan bagaimana cara mendeklarasikan method di objek?

Lihatlah contoh di bawah ini:

let operasiMatematika = {
  nama: "Penjumlahan",
  operasi: function(angka1, angka2) {
    let hasil = angka1 + angka2;
    return `${this.nama} dari ${angka1} dan ${angka2} adalah ${hasil}`;
  }
};

console.log(operasiMatematika.operasi(3, 5)); // Output: Penjumlahan dari 3 dan 5 adalah 8

Namun dengan object shorthand, objek di atas bisa ditulis dengan cara berikut:

let operasiMatematika = {
  nama: "Penjumlahan",
  operasi(angka1, angka2) {
    let hasil = angka1 + angka2;
    return `${this.nama} dari ${angka1} dan ${angka2} adalah ${hasil}`;
  }
};

console.log(operasiMatematika.operasi(3, 5)); // Output: Penjumlahan dari 3 dan 5 adalah 8

Perhatikan perbedaan cara mendeklarasikan method operasi di kedua contoh di atas. Dengan cara object shorthand, kita tidak perlu lagi menulis nama properti secara spesifik selama nama fungsi sama dengan nama properti di objek yang bersangkutan.