BAB 18 — ES6+ Features Lengkap: Memanfaatkan JavaScript Modern Secara Optimal

BAB 18 — ES6+ Features Lengkap: Memanfaatkan JavaScript Modern Secara Optimal

ECMAScript 2015 (ES6) dan versi setelahnya memperkenalkan fitur modern yang membuat JavaScript lebih ekspresif, ringkas, dan maintainable. Menguasai ES6+ adalah kunci untuk pengembangan web modern, framework populer, dan clean code.

1. let & const

let dan const menggantikan var dengan scope lebih aman.

  • let → variabel yang bisa diubah, block scope.
  • const → variabel konstan, tidak bisa di-reassign, block scope.
let count = 1;
count = 2; // valid

const PI = 3.14;
PI = 3.15; // Error

Tips:

  • Gunakan const sebagai default → lebih aman.
  • Gunakan let jika nilainya akan berubah.

2. Arrow Function

Sintaks modern untuk fungsi, lebih ringkas dan lexical this.

// Biasa
function sum(a, b) {
    return a + b;
}

// Arrow function
const sum = (a, b) => a + b;

const greet = name => `Hello, ${name}`;

Keunggulan:

  • Tidak membuat own this → berguna di callback, event listener, dan class method.
  • Lebih ringkas untuk one-liner return.

3. Spread & Rest Operator

3.1 Spread (...)

Menyebarkan elemen array/object.

const arr1 = [1,2,3];
const arr2 = [...arr1, 4,5]; // [1,2,3,4,5]

const obj1 = {a:1, b:2};
const obj2 = {...obj1, c:3}; // {a:1, b:2, c:3}

3.2 Rest (...)

Mengumpulkan sisa parameter.

function sumAll(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sumAll(1,2,3,4)); // 10

Tips:

  • Spread → copy atau merge array/object.
  • Rest → flexible argument di function.

4. Template Literal

Menyederhanakan string concatenation dan multiline string.

const name = "John";
const age = 30;

console.log(`Halo, nama saya ${name} dan saya berusia ${age} tahun.`);

const multiline = `Ini baris pertama
Ini baris kedua`;

Keunggulan:

  • Mempermudah pembacaan kode.
  • Mendukung expression di dalam ${}.

5. Destructuring

Membongkar array atau object menjadi variabel langsung.

5.1 Array Destructuring

const arr = [1,2,3];
const [first, second] = arr;
console.log(first, second); // 1 2

5.2 Object Destructuring

const user = {name:"Alice", age:25};
const {name, age} = user;
console.log(name, age); // Alice 25

Tips:

  • Bisa digunakan di function parameter untuk lebih clean.
  • Bisa diberikan default value:
const {city = "Jakarta"} = user;

6. Class

Memperkenalkan syntactic sugar untuk prototype-based inheritance.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, nama saya ${this.name}`);
    }
}

const alice = new Person("Alice", 25);
alice.greet(); // Hello, nama saya Alice

Keunggulan:

  • Mendeklarasikan class, constructor, method, dan inheritance lebih jelas.
  • Mendukung extends untuk inheritance:
class Employee extends Person {
    constructor(name, age, position) {
        super(name, age);
        this.position = position;
    }
}

7. Module

ES6 Modules memungkinkan import/export untuk modularisasi kode.

// utils.js
export function sum(a,b){ return a+b; }

// main.js
import { sum } from './utils.js';
console.log(sum(2,3)); // 5

Tips:

  • Named export → banyak fungsi/fitur.
  • Default export → satu entitas utama.
  • Modular code → maintainable dan scalable.

8. Optional Chaining (?.)

Memudahkan akses properti nested tanpa error jika undefined/null.

const user = {name:"Bob", address:{city:"Bandung"}};
console.log(user?.address?.city); // Bandung
console.log(user?.contact?.phone); // undefined

Keunggulan:

  • Menghindari TypeError saat properti tidak ada.

9. Nullish Coalescing (??)

Memberikan nilai default hanya saat null atau undefined.

const input = null;
const value = input ?? "Default Value";
console.log(value); // Default Value

const input2 = 0;
console.log(input2 ?? 100); // 0 (tidak tergantikan karena bukan null/undefined)

Tips:

  • Bedakan dengan || yang menggantikan falsy value seperti 0, “”, false.
  • Cocok untuk default configuration dan optional parameter.

10. Insight & Praktik Terbaik

  1. Gunakan let & const → aman dari hoisting dan scope bug.
  2. Arrow function → untuk callback dan lexical this.
  3. Spread/rest → copy/merge array/object dan flexible parameter.
  4. Template literal → string lebih readable.
  5. Destructuring → cleaner assignment, terutama di function parameter.
  6. Class → struktur object-oriented lebih jelas dan readable.
  7. Modules → kode lebih modular, maintainable, dan reusable.
  8. Optional chaining → akses nested property aman.
  9. Nullish coalescing → default value lebih akurat.

💡 Insight: Menguasai ES6+ bukan hanya tentang sintaks, tapi mengubah cara menulis kode menjadi lebih modern, bersih, dan scalable, sangat penting di proyek nyata dan framework modern.

Related Posts