JavaScript punya "buku aturan" resmi bernama ECMAScript, dikelola komite TC39 di bawah Ecma International. Browser dan Node.js membaca buku aturan ini untuk tahu sintaks apa saja yang harus didukung.

Versi ke-6 dirilis Juni 2015, sehingga punya dua nama: ES6 dan ES2015. Ini pembaruan terbesar sepanjang sejarah JavaScript. Sebelumnya, versi besar terakhir adalah ES5 (2009). Sesudah 2015, TC39 merilis versi baru setiap tahun (ES2016, ES2017, dan seterusnya) dengan fitur yang lebih kecil-kecil.

• Framework modern memakainya. Tutorial React, Vue, dan Angular penuh dengan arrow function, destructuring, dan import. Tanpa paham ES6, kode mereka terasa seperti bahasa asing.
• Didukung di mana-mana. Semua browser modern dan Node.js sudah mendukung ES6 secara native.
• Kode lebih rapi dan aman. let/const mencegah bug scope klasik, module membuat kode terbagi per file, Promise merapikan kode asynchronous.

Anggap ES6 sebagai "bahasa sehari-hari" JavaScript sekarang. Kode gaya ES5 tetap jalan, tapi kamu akan jarang menulisnya.

Sebelum ES6, satu-satunya cara membuat variabel adalah var. Masalahnya, var punya perilaku yang sering bikin kaget. ES6 menambahkan let dan const dengan aturan lebih ketat.

Block scope

Block adalah apa pun yang diapit { }: isi if, for, atau sekadar kurung kurawal. Variabel let dan const hanya hidup di dalam block tempat ia dibuat. var mengabaikan block dan "bocor" ke seluruh fungsi.

if (true) {
  var a = "var bocor";
  let b = "let terkunci";
}
console.log(a); // var bocor
console.log(b); // ReferenceError: b is not defined

Contoh bug klasik dengan var di dalam loop:

const fnVar = [];
for (var i = 0; i < 3; i++) {
  fnVar.push(() => i);
}
console.log(fnVar.map((f) => f())); // [ 3, 3, 3 ]

const fnLet = [];
for (let j = 0; j < 3; j++) {
  fnLet.push(() => j);
}
console.log(fnLet.map((f) => f())); // [ 0, 1, 2 ]

Dengan var, hanya ada satu i untuk seluruh loop, dan saat fungsi dipanggil nilainya sudah 3. Dengan let, setiap putaran mendapat j baru.

const bukan berarti isinya beku

const melarang variabelnya diisi ulang, tapi isi objek atau array tetap bisa diubah.

const keranjang = ["kopi"];
keranjang.push("roti");     // boleh
console.log(keranjang);     // [ 'kopi', 'roti' ]
keranjang = [];             // TypeError: Assignment to constant variable.

Aturan praktis: pakai const sebagai default, ganti ke let hanya kalau nilainya memang perlu diganti, dan hindari var.

Hoisting artinya JavaScript sudah "mencatat" semua deklarasi variabel di sebuah scope sebelum menjalankan baris pertamanya. Ibarat guru yang sudah pegang daftar absen sebelum murid masuk kelas.

Bedanya ada di apa yang terjadi kalau variabel dipakai sebelum barisnya:

console.log(a); // undefined
var a = 10;
console.log(a); // 10

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

• var dicatat dan langsung diberi nilai undefined. Tidak error, tapi diam-diam salah.
• let dan const juga dicatat, tapi belum boleh disentuh sampai baris deklarasinya dijalankan. Rentang dari awal block sampai baris deklarasi itu disebut Temporal Dead Zone (TDZ).

TDZ sebenarnya membantu: error yang jelas jauh lebih baik daripada undefined yang menyusup ke perhitunganmu.

Arrow function adalah cara singkat menulis fungsi.

// ES5
var tambah = function (a, b) {
  return a + b;
};

// ES6
const tambah2 = (a, b) => a + b;
const kuadrat = (x) => x * x;      // satu parameter, kurung boleh dihapus: x => x * x
const halo = () => "Halo!";        // tanpa parameter, kurung wajib

console.log(tambah2(2, 3)); // 5
console.log(kuadrat(4));    // 16

Implicit return

Kalau badan fungsi hanya satu ekspresi tanpa kurung kurawal, hasilnya otomatis di-return. Begitu kamu memakai { }, kamu wajib menulis return sendiri.

const a = (x) => x * 2;          // return otomatis
const b = (x) => { x * 2; };     // TIDAK return apa-apa
console.log(a(5), b(5));         // 10 undefined

// Mengembalikan objek: bungkus dengan ( )
const buatUser = (nama) => ({ nama, aktif: true });
console.log(buatUser("Sari"));   // { nama: 'Sari', aktif: true }

this leksikal

Fungsi biasa menentukan this dari cara ia dipanggil. Arrow function tidak punya this sendiri; ia memakai this dari tempat ia ditulis. Ini sangat berguna untuk callback di dalam method.

const timer = {
  detik: 0,
  mulai() {
    [1, 2, 3].forEach(() => {
      this.detik++; // this = timer, karena arrow mewarisi dari mulai()
    });
    return this.detik;
  },
};
console.log(timer.mulai()); // 3

Kalau callback di atas ditulis dengan function () { ... }, this di dalamnya bukan timer lagi dan kodenya gagal. Sebaliknya, karena tidak punya this sendiri, arrow function jangan dipakai sebagai method objek yang butuh this. Arrow function juga tidak bisa dipanggil dengan new dan tidak punya objek arguments.

Template literal memakai backtick (`), bukan kutip.

const nama = "Mujahidin";
const kelas = "Kelas A";

const lama = "Halo " + nama + ", selamat datang di " + kelas + "!";
const baru = `Halo ${nama}, selamat datang di ${kelas}!`;
console.log(baru); // Halo Mujahidin, selamat datang di Kelas A!

// Di dalam ${} boleh ekspresi apa saja
const harga = 15000;
console.log(`Total: ${harga * 2}, ${harga > 20000 ? "mahal" : "murah"}`);
// Total: 30000, murah

// Multi-line tanpa \n
const puisi = `Baris satu
Baris dua`;
console.log(puisi);
// Baris satu
// Baris dua

Tagged template singkat

Kalau sebuah fungsi ditulis tepat di depan template literal, fungsi itu menerima potongan teks dan nilai sisipan secara terpisah, lalu bebas mengolahnya.

function tebal(strings, ...values) {
  return strings.reduce((hasil, str, i) => {
    const nilai = i < values.length ? `**${values[i]}**` : "";
    return hasil + str + nilai;
  }, "");
}

const mhs = "Dini";
const skor = 95;
console.log(tebal`Mahasiswa ${mhs} mendapat nilai ${skor}.`);
// Mahasiswa **Dini** mendapat nilai **95**.

Di sini strings berisi ["Mahasiswa ", " mendapat nilai ", "."] dan values berisi ["Dini", 95]. Library seperti styled-components dan graphql-tag memakai teknik ini.

• Memakai var di loop yang membuat callback, lalu heran semua hasilnya sama.
• Mengira const membuat objek tidak bisa diubah. Yang dikunci hanya variabelnya.
• Lupa return saat arrow function memakai { }.
• Mengembalikan objek tanpa kurung: () => { nama: "A" } dianggap block, hasilnya undefined.
• Memakai arrow function sebagai method yang butuh this.
• Menulis ${} di dalam kutip biasa. "Halo ${nama}" tetap tercetak apa adanya; harus pakai backtick.