Fitur ES6 Modern

ECMAScript 2015 (ES6) memperkenalkan banyak fitur baru yang membuat JavaScript lebih powerful dan ekspresif.

Let dan Const

Deklarasi variabel dengan scope yang lebih jelas:

// let - bisa diubah
let name = 'John';
name = 'Doe'; // Valid

// const - tidak bisa diubah (immutable)
const PI = 3.14;
// PI = 3.14159; // Error

// Block scope
{
    let x = 1;
    const y = 2;
    var z = 3;
}
console.log(z); // 3
// console.log(x); // Error
// console.log(y); // Error

Arrow Functions

Syntax yang lebih ringkas untuk fungsi:

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

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

// Jika satu parameter, kurung bisa dihilangkan
const square = x => x * x;

// Jika tidak ada parameter
const greet = () => 'Hello World!';

// Jika perlu block body
const sum = (a, b) => {
    const result = a + b;
    return result;
};

// Perbedaan 'this'
const person = {
    name: 'John',
    traditional: function() {
        console.log(this.name); // John
    },
    arrow: () => {
        console.log(this.name); // undefined
    }
};

Template Literals

String dengan kemampuan lebih:

const name = 'John';
const age = 30;

// String biasa
const greeting = 'Hello ' + name + ', you are ' + age + ' years old.';

// Template literal
const greeting = `Hello ${name}, you are ${age} years old.`;

// Multi-line string
const letter = `
Dear ${name},

Thank you for your order.

Regards,
Company
`;

Destructuring

Ekstrak nilai dari array atau object:

// Array destructuring
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3

// Object destructuring
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name, age); // John 30

// Destructuring dengan nama berbeda
const { name: firstName, age: years } = person;
console.log(firstName, years); // John 30

// Default values
const { name = 'Anonymous', age = 0 } = {};
console.log(name, age); // Anonymous 0

Spread dan Rest Operator

Spread Operator

// Menggabungkan array
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Menggabungkan object
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

// Mengcopy array/object
const arrCopy = [...arr1];
const objCopy = { ...obj1 };

Rest Parameter

// Mengumpulkan sisa parameter
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

// Dengan destructuring
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]

Praktik: Konversi ke ES6

Konversi kode berikut ke ES6:

// Kode ES5
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function(num) {
    return num * 2;
});

var person = {
    firstName: 'John',
    lastName: 'Doe',
    getFullName: function() {
        return this.firstName + ' ' + this.lastName;
    }
};

function concatenate() {
    var parts = Array.prototype.slice.call(arguments);
    return parts.join(' ');
}

// Kode ES6 hasil konversi Anda:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

const person = {
    firstName: 'John',
    lastName: 'Doe',
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

const concatenate = (...parts) => parts.join(' ');