ES6 JavaScript: Fitur Baru yang Wajib Dikuasai

JavaScript telah berkembang jauh dari sekadar bahasa pemrograman yang hanya digunakan untuk membuat elemen halaman web bergerak atau menampilkan alert sederhana. Dalam satu dekade terakhir, JavaScript berubah menjadi bahasa dengan ekosistem besar, digunakan di berbagai lingkungan — dari front-end, back-end, mobile development, hingga desktop app. Transformasi besar ini tidak terjadi begitu saja, melainkan melalui pembaruan standar ECMAScript yang membawa fitur modern, efisien, dan mudah digunakan. Salah satu revolusi terbesar dalam sejarah JavaScript adalah hadirnya ES6 (ECMAScript 2015).

Sebelum ES6 hadir, JavaScript memiliki banyak keterbatasan. Developer harus mengandalkan pola manual seperti function constructor, callback berlapis-lapis, string concatenation yang membingungkan, serta struktur kode yang sulit dikelola dalam skala besar. Kondisi ini menyebabkan JavaScript rentan terhadap bug, sulit di-maintain, dan tidak cocok untuk proyek besar.

Transisi menuju JavaScript modern sebenarnya sudah lama dibutuhkan. Penggunaan JavaScript semakin luas, tidak hanya untuk website sederhana, tetapi juga aplikasi kompleks yang membutuhkan struktur rapi dan fitur lebih canggih. Di sinilah ES6 menjadi angin segar yang mengubah wajah JavaScript sepenuhnya. ES6 memperkenalkan fitur yang membuat JavaScript lebih mudah dipahami, lebih kuat, serta lebih sejalan dengan praktik pengembangan modern.

Baca juga: Modular JavaScript: Menggunakan Import dan Export

Apa Itu ES6 JavaScript?

ES6, atau ECMAScript 2015, adalah pembaruan besar dari standar resmi bahasa JavaScript. ES6 menjadi salah satu rilis paling berpengaruh dalam sejarah JavaScript karena membawa banyak fitur baru yang mengubah cara developer menulis dan mengorganisir kode. Sebelum ES6 hadir, JavaScript telah lama menggunakan standar ECMAScript 5 (ES5) yang dirilis pada tahun 2009. Selama enam tahun itu, penggunaan JavaScript berkembang sangat cepat, namun fitur bahasanya tetap terbatas. Itulah alasan ES6 datang sebagai solusi untuk menyederhanakan, menstabilkan, dan memperkuat JavaScript.

Pada bagian ini, kita akan membahas apa itu ES6, kapan dirilis, kenapa pembaruan ini sangat penting, dan apa saja perubahan besar yang dibawa dibanding versi sebelumnya.

Penjelasan Singkat Standardisasi ECMAScript

JavaScript dikembangkan oleh Netscape pada tahun 1995, tetapi seiring bertambahnya pengguna dan implementasi di berbagai browser, dibutuhkan sebuah standar resmi agar JavaScript memiliki aturan yang sama di semua platform. Dari sinilah lahir ECMA International, organisasi yang menstandarkan bahasa JavaScript dengan nama resmi ECMAScript.

Jadi:

• JavaScript = implementasi
• ECMAScript = spesifikasi / standar bahasa

Setiap pembaruan ECMAScript mendefinisikan fitur baru yang nantinya diimplementasikan oleh browser dan engine JavaScript seperti V8 (Chrome), SpiderMonkey (Firefox), atau JavaScriptCore (Safari).

ES6 adalah versi ECMAScript yang membawa lompatan paling besar dalam sejarah JavaScript modern.

Kapan ES6 Dirilis?

ES6 dirilis pada tahun 2015, sehingga sering juga disebut ES2015. Sejak rilis tersebut, komunitas JavaScript berubah cara kerjanya. JavaScript tidak lagi mengikuti pola rilis yang lama (bertahun-tahun sekali), melainkan dirilis setiap tahun.

Setelah ES6/ES2015, ada ES7/ES2016, ES8/ES2017, sampai seterusnya.

Namun, meskipun pembaruan datang setiap tahun, ES6 tetap menjadi pembaruan paling penting karena skala dan jumlah fitur barunya luar biasa besar.

Dampak ES6 pada Development Modern

ES6 memiliki pengaruh yang sangat besar terhadap ekosistem JavaScript saat ini. Mulai dari cara penulisan sintaks, struktur aplikasi, hingga cara developer bekerja sehari-hari.

Beberapa dampaknya:

1. Penulisan kode menjadi lebih modern, ringkas, dan rapi

Fitur seperti arrow function, template literal, dan destructuring membuat kode lebih mudah dibaca dan lebih singkat.

2. Menjadi fondasi untuk framework modern

Framework populer seperti React, Vue, Svelte, Angular, serta library berbasis Node.js seluruhnya memanfaatkan fitur ES6.

Contohnya:

• React hooks dan functional component heavily menggunakan arrow function.
• Vue 3 composition API memanfaatkan destructuring dan spread operator.
• Node.js module system mulai mendukung ES6 Modules.

3. Modularisasi menjadi standar industri

Sebelum ES6, JavaScript tidak punya sistem modul resmi. ES6 memperkenalkan import/export yang membuat struktur project lebih profesional.

4. Kemampuan asynchronous makin mudah ditangani

Promise (diperkenalkan di ES6) menjadi langkah besar untuk meninggalkan callback hell.

5. Developer lebih produktif

Dengan fitur ES6, developer bisa menulis lebih sedikit kode untuk hasil yang sama—atau bahkan lebih baik.

6. Memperluas penggunaan JavaScript di luar browser

Karena ES6 meningkatkan kekuatan bahasa ini secara signifikan, JavaScript semakin sering digunakan di server, IoT, mobile, hingga AI tool.

Perubahan Besar dari Versi Sebelumnya (ES5)

ES6 membawa perubahan besar-besaran, jauh lebih signifikan dibanding pembaruan lain dalam sejarah ECMAScript.

Berikut beberapa perubahan paling penting:

1. Block scope dengan let & const

Sebelumnya, JavaScript hanya punya var yang memiliki function scope. Dengan ES6:

• let memperkenalkan block scope
• const memperkenalkan variable immutability

Ini meningkatkan keamanan kode secara signifikan.

2. Arrow Function

Salah satu fitur paling terkenal dari ES6.

Contoh:

const tambah = (a, b) => a + b;Code language: JavaScript (javascript)

Lebih ringkas dibanding syntax lama:

function tambah(a, b) {
    return a + b;
}Code language: JavaScript (javascript)

Arrow function juga memiliki perilaku lexical this, membuatnya sangat berguna.

3. Template Literal

Manipulasi string jadi lebih mudah.

Sebelum ES6:

var pesan = "Halo " + nama + ", selamat datang!";Code language: JavaScript (javascript)

Sesudah ES6:

const pesan = `Halo ${nama}, selamat datang!`;Code language: JavaScript (javascript)

4. Destructuring

Mempermudah ekstraksi data dari object atau array.

5. Spread Operator & Rest Parameter

Menyederhanakan penggabungan array, object, dan parameter function.

6. Class

JavaScript akhirnya punya class syntax seperti bahasa OOP lainnya, meskipun tetap berbasis prototype.

7. Module Import/Export

Fitur modularisasi resmi yang sebelumnya tidak ada.

8. Promise

Mengakhiri callback hell dan menjadi dasar async/await di versi selanjutnya.

Dengan perubahan besar tersebut, ES6 menjadi pondasi kuat yang membawa JavaScript ke era modern. Hampir semua tutorial, framework, dan artikel coding saat ini mengasumsikan bahwa developer sudah menguasai ES6. Itu sebabnya memulai belajar JavaScript modern harus dimulai dari ES6.

Perbedaan var, let, dan const

Salah satu perubahan paling fundamental dalam ES6 adalah hadirnya let dan const sebagai pengganti var. Ketiga keyword ini digunakan untuk mendeklarasikan variabel, namun masing-masing memiliki karakteristik yang berbeda dalam hal scope, hoisting, dan reassignability. Memahami perbedaannya sangat penting karena kesalahan penggunaan dapat menimbulkan bug yang sulit ditemukan—terutama di aplikasi skala besar.

Pada bagian ini, kita akan membahas:

• Konsep hoisting pada var vs let/const
• Perbedaan block scope vs function scope
• Contoh kasus error yang sering terjadi
• Best practice penggunaan di proyek modern

Konsep Hoisting

Hoisting adalah mekanisme JavaScript yang memindahkan deklarasi variabel dan fungsi ke bagian atas scope sebelum kode dijalankan.

Namun perilakunya berbeda antara var, let, dan const.

Hoisting pada var

• Di-hoist ke atas
• Diinisialisasi dengan undefined
• Dapat digunakan sebelum deklarasi tanpa error (meski hasilnya undefined)

Contoh:

console.log(nama);    // undefined
var nama = "Aris";Code language: JavaScript (javascript)

Hoisting pada let dan const

• Tetap di-hoist, tetapi masuk ke Temporal Dead Zone (TDZ)
• Tidak dapat diakses sebelum deklarasi
• Menghasilkan error jika digunakan sebelum dideklarasikan

console.log(umur);    // ReferenceError
let umur = 25;Code language: JavaScript (javascript)

Dengan kata lain:

• var → hoisted + initialized
• let / const → hoisted but not initialized (TDZ)

Block Scope vs Function Scope

Scope menentukan sejauh mana sebuah variabel dapat diakses.

var — function scoped

Variabel hanya dibatasi oleh fungsi, bukan oleh blok {}.

if (true) {
    var x = 10;
}

console.log(x);    // 10Code language: JavaScript (javascript)

let & const — block scoped

Hanya hidup di dalam blok {} tempat deklarasinya.

if (true) {
    let y = 20;
    const z = 30;
}

console.log(y);    // ReferenceError
console.log(z);    // ReferenceErrorCode language: JavaScript (javascript)

Ini membuat let dan const jauh lebih aman digunakan dibanding var.

Contoh Real Case Error

Kesalahan penggunaan var, let, dan const sering menyebabkan bug tak terduga. Berikut contoh kasus nyata.

Kasus 1 — Loop dengan var menyebabkan nilai tidak sesuai

for (var i = 1; i <= 3; i++) {
    setTimeout(() => {
        console.log(i);
    }, 100);
}Code language: JavaScript (javascript)

Output:

4
4
4

Karena i adalah var (function scope), setelah loop selesai nilainya menjadi 4, dan semua callback mengakses nilai akhir tersebut.

Solusi dengan let:

for (let i = 1; i <= 3; i++) {
    setTimeout(() => {
        console.log(i);
    }, 100);
}Code language: JavaScript (javascript)

Output:

1
2
3

Kasus 2 — Reassign const menyebabkan error

const user = "Aris";
user = "Budi";        // TypeErrorCode language: JavaScript (javascript)

Namun object pada const tetap bisa diubah (mutasi boleh, reassignment tidak).

const profile = {
    nama: "Aris",
    umur: 25
};

profile.umur = 30;    // BolehCode language: JavaScript (javascript)

Kasus 3 — Temporal Dead Zone (TDZ)

function tes() {
    console.log(a);   // ReferenceError (TDZ)
    let a = 5;
}Code language: JavaScript (javascript)

TDZ membantu mencegah accidental access terhadap variabel yang belum siap.

Arrow Function JavaScript

Arrow function adalah salah satu fitur ES6 yang paling terkenal dan paling sering digunakan dalam JavaScript modern. Fitur ini tidak hanya membuat penulisan kode menjadi lebih ringkas, tetapi juga membawa perilaku baru pada this yang sangat bermanfaat ketika digunakan dengan benar.

Pada bagian ini kita akan membahas:

• Sintaks dasar arrow function
• Perbandingan function biasa vs arrow function
• Konsep lexical this pada arrow function
• Kapan sebaiknya menggunakan arrow function

Semua disertai contoh kode yang mudah dipahami.

Sintaks Dasar Arrow Function

Arrow function pertama kali diperkenalkan di ES6 dan memungkinkan penulisan function yang jauh lebih pendek.

Struktur paling sederhana:

const namaFunction = () => {
    // kode di sini
};Code language: JavaScript (javascript)

Contoh paling sederhana:

const sapa = () => {
    console.log("Halo!");
};Code language: JavaScript (javascript)

Arrow function dengan parameter

const kaliDua = (angka) => {
    return angka * 2;
};Code language: JavaScript (javascript)

Arrow function dengan implicit return

Jika hanya satu ekspresi, kurung kurawal dan return bisa dihilangkan:

const kaliTiga = (angka) => angka * 3;Code language: JavaScript (javascript)

Arrow function dengan satu parameter

Kurung parameter boleh dihilangkan:

const tambahSatu = x => x + 1;Code language: JavaScript (javascript)

Tanpa parameter → gunakan ()

const hello = () => "Halo dunia!";Code language: JavaScript (javascript)

Hasilnya membuat kode jauh lebih singkat dan bersih.

Perbandingan Function Biasa vs Arrow Function

Untuk memahami keunggulan arrow function, mari bandingkan dengan function biasa.

Function Biasa

function tambah(a, b) {
    return a + b;
}Code language: JavaScript (javascript)

Menggunakan Arrow Function

const tambah = (a, b) => a + b;Code language: JavaScript (javascript)

Lebih ringkas, lebih modern, dan lebih mudah dibaca.

Function Biasa Mengikat this Secara Dinamis

function User() {
    this.nama = "Aris";

    setTimeout(function () {
        console.log(this.nama);     // undefined
    }, 100);
}Code language: JavaScript (javascript)

Karena function biasa memiliki dynamic this, maka this merujuk ke global object, bukan ke instance User.

Arrow Function Mengikat this Secara Lexical

function User() {
    this.nama = "Aris";

    setTimeout(() => {
        console.log(this.nama);     // "Aris"
    }, 100);
}Code language: JavaScript (javascript)

Arrow function tidak memiliki this sendiri, sehingga otomatis mengambil this dari scope di atasnya.

Lexical This — Perilaku this yang Konsisten

Salah satu fitur paling penting dari arrow function adalah lexical this, yaitu arrow function tidak membuat this baru.

Perilaku Arrow Function:

• Tidak memiliki this
• Tidak memiliki prototype
• Tidak dapat digunakan sebagai constructor (new)
• Tidak memiliki arguments (gunakan rest parameter)
• Nilai this diambil dari scope terdekat (lexical)

Contoh paling terkenal — Mengatasi masalah this di callback

Function biasa: salah referensi this

function Timer() {
    this.total = 0;

    setInterval(function () {
        this.total++;     // salah this
    }, 1000);
}Code language: JavaScript (javascript)

Arrow function: this selalu benar

function Timer() {
    this.total = 0;

    setInterval(() => {
        this.total++;     // benar!
    }, 1000);
}Code language: JavaScript (javascript)

Karena lexical this, arrow function menjadi pilihan terbaik untuk callback di:

• setTimeout
• setInterval
• event listener tertentu
• promise
• array methods (map, filter, reduce)

Kapan Sebaiknya Menggunakan Arrow Function

Arrow function tidak selalu lebih baik dari function biasa. Ada kasus-kasus tertentu di mana arrow function sangat cocok, dan ada yang sebaiknya tetap menggunakan function klasik.

Mari lihat panduannya.

Gunakan arrow function ketika:

1. Membuat function kecil / helper function

const genap = (n) => n % 2 === 0;Code language: JavaScript (javascript)

2. Menggunakan callback

data.map(item => item.nama);Code language: JavaScript (javascript)

3. Ingin this yang konsisten (lexical this)

setTimeout(() => this.load(), 100);Code language: JavaScript (javascript)

4. Ingin kode lebih ringkas dan mudah dibaca

Jangan gunakan arrow function ketika:

1. Membuat function constructor / class method yang butuh this sendiri

Arrow function tidak cocok:

const User = (nama) => { this.nama = nama; // tidak bisa };

2. Membuat method dalam object yang perlu this dinamis

const obj = {
    nama: "Aris",
    sayHi: () => console.log(this.nama)    // undefined
};Code language: JavaScript (javascript)

Sebaiknya gunakan function biasa.

3. Membutuhkan arguments object

Arrow function tidak memiliki arguments.

const tes = () => {
    console.log(arguments);    // error
};Code language: JavaScript (javascript)

Harus gunakan function biasa jika ingin arguments:

function tes() {
    console.log(arguments);
}Code language: JavaScript (javascript)

Berikut ini adalah tabel perbandingan function biasa dengan arrow function

Fitur	Function Biasa	Arrow Function
Sintaks	panjang	lebih singkat
this	dynamic this	lexical this
Dapat dijadikan constructor	Ya	Tidak
Cocok untuk	method, constructor	callback, helper
Memiliki arguments	Ya	Tidak

Dengan memahami arrow function secara menyeluruh—mulai dari sintaks, perbandingan, hingga lexical this—developer dapat menulis kode modern yang lebih bersih, efisien, dan minim bug.

Template Literal JavaScript

Template literal adalah salah satu fitur ES6 yang membuat penulisan string di JavaScript menjadi jauh lebih mudah, rapi, dan fleksibel. Jika sebelumnya kita sering menggunakan tanda kutip tunggal ' ' atau kutip ganda " ", ES6 memperkenalkan backtick ( ““ ) sebagai cara baru untuk membuat string yang lebih dinamis.

Pada bagian ini kita akan membahas tiga hal penting:

• String interpolation
• Multiline string
• Tag function (opsional, namun sangat berguna untuk kasus tertentu)

String Interpolation

String interpolation adalah kemampuan untuk menyisipkan variabel atau ekspresi langsung di dalam string tanpa harus melakukan concatenation manual.

Sebelum ES6:

const name = "Aris";
const age = 25;

const text = "Halo, nama saya " + name + " dan saya berusia " + age + " tahun.";
console.log(text);Code language: JavaScript (javascript)

Setelah ES6 (template literal):

const name = "Aris";
const age = 25;

const text = `Halo, nama saya ${name} dan saya berusia ${age} tahun.`;
console.log(text);Code language: JavaScript (javascript)

Keuntungan string interpolation:

• Lebih rapi
• Mengurangi typo saat concatenation
• Bisa memasukkan ekspresi, bukan hanya variabel

Contoh ekspresi di dalam template literal:

const a = 10;
const b = 5;

const result = `Hasil dari ${a} + ${b} = ${a + b}`;
console.log(result);Code language: JavaScript (javascript)

Multiline String

Sebelum ES6, membuat string lebih dari satu baris sangat menyakitkan. Kita harus menggunakan \n atau memecah menjadi banyak concatenation.

Contoh sebelum ES6:

const message = "Halo!\n" +
    "Ini adalah pesan dengan baris baru.\n" +
    "Menulisnya agak repot sebelum ES6.";Code language: JavaScript (javascript)

Dengan template literal, cukup gunakan backtick:

const message = `
Halo!
Ini adalah pesan dengan baris baru.
Menulisnya jauh lebih mudah dengan template literal.
`;
console.log(message);Code language: JavaScript (javascript)

Kelebihan multiline string menggunakan backtick:

• Format baris tetap sama seperti yang kita tulis
• Sangat membantu untuk HTML snippet, email template, atau teks panjang

Contoh HTML template menggunakan template literal:

const html = `
    <div class="card">
        <h2>Produk Terbaru</h2>
        <p>Harga: Rp 150.000</p>
    </div>
`;

console.log(html);Code language: HTML, XML (xml)

Tag Function (Opsional)

Tag function adalah fitur canggih dari template literal. Dengan teknik ini, template literal dapat diolah menggunakan fungsi sebelum menghasilkan output akhir.

Biasanya digunakan untuk:

• Sanitasi input (mencegah XSS)
• Memformat data
• Localization (i18n)
• Membuat DSL (domain specific language) sederhana

Contoh sederhana tag function:

function highlight(strings, ...values) {
    let result = "";

    strings.forEach((str, index) => {
        const value = values[index]
            ? `<mark>${values[index]}</mark>`
            : "";
        result += str + value;
    });

    return result;
}

const name = "Aris";
const skill = "JavaScript";

const output = highlight`Nama saya ${name} dan saya suka ${skill}`;
console.log(output);Code language: JavaScript (javascript)

Hasilnya:

Nama saya <mark>Aris</mark> dan saya suka <mark>JavaScript</mark>Code language: HTML, XML (xml)

Template literal adalah fitur ES6 yang sangat penting untuk dipelajari karena:

• Membuat string menjadi jauh lebih mudah ditulis dan dibaca
• Menghilangkan banyak boilerplate concatenation
• Membantu penulisan multiline string dengan cara yang natural
• Menyediakan fitur canggih seperti tagged templates untuk kebutuhan khusus

Setelah memahami template literal, kita siap melanjutkan ke fitur ES6 lainnya yang tidak kalah penting.

Destructuring JavaScript

Destructuring adalah fitur ES6 yang memungkinkan kita mengambil nilai dari array atau properti dari object dan menyimpannya ke dalam variabel dengan cara yang jauh lebih singkat dan rapi. Fitur ini menjadi salah satu hal paling populer dan sering digunakan dalam JavaScript modern—baik dalam frontend, backend, maupun struktur data yang kompleks.

Pada bagian ini kita membahas:

• Array destructuring
• Object destructuring
• Default value
• Nested destructuring

Array Destructuring

Array destructuring memungkinkan kita mengekstrak beberapa nilai dari sebuah array dalam satu baris.

Sebelum ES6:

const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];

console.log(a, b, c);Code language: JavaScript (javascript)

Dengan destructuring ES6:

const arr = [1, 2, 3];

const [a, b, c] = arr;

console.log(a, b, c); // 1 2 3Code language: JavaScript (javascript)

Skip nilai tertentu:

const arr = ["A", "B", "C"];

const [first, , third] = arr;

console.log(first, third); // A CCode language: JavaScript (javascript)

Destructuring dengan rest operator:

const numbers = [10, 20, 30, 40, 50];

const [first, second, ...others] = numbers;

console.log(first);   // 10
console.log(second);  // 20
console.log(others);  // [30, 40, 50]Code language: JavaScript (javascript)

Object Destructuring

Object destructuring digunakan untuk mengambil properti dari sebuah objek lalu menyimpannya dalam variabel dengan nama yang sama.

Sebelum ES6:

const user = { name: "Aris", age: 25 };

const name = user.name;
const age = user.age;

console.log(name, age);Code language: JavaScript (javascript)

Dengan destructuring:

const user = { name: "Aris", age: 25 };

const { name, age } = user;

console.log(name, age);Code language: JavaScript (javascript)

Rename saat destructuring

Kadang nama variabel berbeda dengan key objeknya:

const user = {
    fullName: "Aris Munandar",
    age: 25
};

const { fullName: name, age: umur } = user;

console.log(name); // "Aris Munandar"
console.log(umur); // 25Code language: JavaScript (javascript)

Destructuring dengan rest operator pada object

const user = {
    name: "Aris",
    age: 25,
    city: "Bandung",
    job: "Developer"
};

const { name, ...others } = user;

console.log(name);   // "Aris"
console.log(others); // { age: 25, city: 'Bandung', job: 'Developer' }Code language: JavaScript (javascript)

Default Value

Default value sangat berguna ketika data yang diterima mungkin undefined, sehingga kita bisa memberikan nilai fallback.

Default value pada array

const arr = [10];

const [a, b = 20] = arr;

console.log(a); // 10
console.log(b); // 20 (default)Code language: JavaScript (javascript)

Default value pada object

const user = {
    name: "Aris"
    // age tidak ada
};

const { name, age = 30 } = user;

console.log(name); // Aris
console.log(age);  // 30 (default)Code language: JavaScript (javascript)

Nested Destructuring

Destructuring juga dapat dilakukan pada struktur data yang bersarang (nested).

Nested array destructuring

const data = [1, [2, 3]];

const [a, [b, c]] = data;

console.log(a, b, c); // 1 2 3Code language: JavaScript (javascript)

Nested object destructuring

const user = {
    name: "Aris",
    address: {
        city: "Bandung",
        street: "Jl. Asia Afrika"
    }
};

const {
    name,
    address: { city, street }
} = user;

console.log(name);   // Aris
console.log(city);   // Bandung
console.log(street); // Jl. Asia AfrikaCode language: JavaScript (javascript)

Nested object + rename + default

const config = {
    server: {
        host: "localhost"
    }
};

const {
    server: {
        host: hostname,
        port = 8080
    }
} = config;

console.log(hostname); // localhost
console.log(port);     // 8080 (default)Code language: JavaScript (javascript)

Destructuring sangat membantu dalam:

• Penulisan kode yang lebih pendek dan bersih
• Pengambilan data dari API yang biasanya memiliki struktur kompleks
• Penanganan value default yang aman
• Membuat kode lebih mudah dibaca dan dipelihara

Fitur ini digunakan hampir di semua project modern, mulai dari React, Vue, Node.js, hingga Express.

Spread Operator & Rest Parameter

Spread operator (...) dan rest parameter (...) adalah dua fitur ES6 yang menggunakan simbol yang sama, tetapi memiliki fungsi berbeda tergantung konteksnya.

Keduanya sangat penting dalam JavaScript modern, terutama saat bekerja dengan array, object, dan function.

Spread Operator untuk Array

Spread operator digunakan untuk menyebarkan (expand) elemen array menjadi elemen tunggal. Biasanya dipakai untuk:

• Menggabungkan array
• Menyalin array
• Menambah elemen baru tanpa mengubah array asli (immutability)

Menggabungkan array sebelum ES6:

const a = [1, 2];
const b = [3, 4];

const result = a.concat(b);

console.log(result); // [1, 2, 3, 4]Code language: JavaScript (javascript)

Setelah ES6 dengan spread:

const a = [1, 2];
const b = [3, 4];

const result = [...a, ...b];

console.log(result); // [1, 2, 3, 4]Code language: JavaScript (javascript)

Menyalin array tanpa mengubah data asli

const original = [10, 20, 30];

const copy = [...original];

copy.push(40);

console.log(original); // [10, 20, 30]
console.log(copy);     // [10, 20, 30, 40]Code language: JavaScript (javascript)

Menambahkan elemen ke array secara immutability

const arr = [1, 2, 3];

const newArr = [0, ...arr, 4];

console.log(newArr); // [0, 1, 2, 3, 4]Code language: JavaScript (javascript)

Spread Operator untuk Object

Spread pada object digunakan untuk:

• Menyalin object
• Menggabungkan object
• Menambahkan atau mengubah properti dengan cara yang bersih

Menyalin object

const user = { name: "Aris", age: 25 };

const copy = { ...user };

console.log(copy);Code language: JavaScript (javascript)

Menggabungkan object

const a = { name: "Aris" };
const b = { age: 25 };

const result = { ...a, ...b };

console.log(result); 
// { name: 'Aris', age: 25 }Code language: JavaScript (javascript)

Override properti saat digabung

Properti yang berada paling belakang akan menimpa nilai sebelumnya.

const settings = {
    theme: "light",
    version: 1
};

const updated = {
    ...settings,
    theme: "dark"
};

console.log(updated);
// { theme: 'dark', version: 1 }Code language: JavaScript (javascript)

Menambahkan properti baru

const user = { name: "Aris" };

const updatedUser = {
    ...user,
    country: "Indonesia"
};

console.log(updatedUser);Code language: JavaScript (javascript)

Rest Parameter untuk Function

Rest parameter digunakan ketika kita ingin menerima jumlah argumen yang tidak terbatas ke dalam sebuah function.

Contoh:

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10Code language: JavaScript (javascript)

Rest parameter selalu berada di posisi terakhir

Salah:

function test(a, ...b, c) {} // ❌ errorCode language: JavaScript (javascript)

Benar:

function test(a, b, ...c) {} // ✔️Code language: JavaScript (javascript)

Rest parameter pada destructuring

Array destructuring:

const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]Code language: JavaScript (javascript)

Object destructuring:

const user = {
    name: "Aris",
    age: 25,
    job: "Developer"
};

const { name, ...info } = user;

console.log(name); // Aris
console.log(info); // { age: 25, job: 'Developer' }Code language: JavaScript (javascript)

Studi Kasus Pemakaian Spread & Rest

Agar lebih mudah memahami konsep ini, berikut beberapa kasus nyata.

Studi Kasus 1 — Mengupdate State ala React

Spread adalah teknik utama dalam manajemen state modern seperti React.

const state = {
    name: "Aris",
    age: 25,
    skill: "JavaScript"
};

const newState = {
    ...state,
    age: 26
};

console.log(newState);Code language: JavaScript (javascript)

Kenapa pakai spread?

Karena tidak mengubah state asli (immutability)—prinsip penting pada UI frameworks.

Studi Kasus 2 — Menggabungkan Data API

Bayangkan kita mendapat dua response API berbeda.

const profile = { name: "Aris", age: 25 };
const stats = { followers: 1200, likes: 300 };

const user = {
    ...profile,
    ...stats
};

console.log(user);Code language: JavaScript (javascript)

Studi Kasus 3 — Membuat Function dengan Argumen Bebas

function logMessages(prefix, ...messages) {
    messages.forEach(msg => console.log(`${prefix}: ${msg}`));
}

logMessages("INFO", "Server started", "Database connected", "Ready!");Code language: JavaScript (javascript)

Studi Kasus 4 — Clone & Modify Array secara Aman

const products = ["Keyboard", "Mouse", "Monitor"];

const newProducts = [...products, "Headset"];

console.log(products);     // tidak berubah
console.log(newProducts);  // array baruCode language: JavaScript (javascript)

Spread operator dan rest parameter adalah fitur wajib dalam JavaScript modern karena:

• Memudahkan manipulasi array dan object
• Mendukung konsep immutability
• Berguna dalam banyak framework seperti React, Vue, Svelte
• Mempermudah penulisan function dengan argumen fleksibel

Fitur ini sangat sering dipakai dalam development 2024–2025 ke atas, baik frontend maupun backend.

Class ES6 JavaScript

ES6 memperkenalkan class, sebuah cara baru yang lebih bersih dan intuitif untuk menulis konsep Object-Oriented Programming (OOP) dalam JavaScript.

Sebelum ES6, JavaScript menggunakan prototypal inheritance yang sintaksnya cukup rumit bagi pemula. Dengan adanya class, penulisan kode menjadi lebih mudah dipahami—mirip seperti bahasa pemrograman modern lainnya.

Pada bagian ini, kita akan membahas:

• OOP sederhana dalam JavaScript modern
• Constructor
• Method
• Inheritance (Pewarisan)

OOP Sederhana dalam JavaScript Modern

Class dalam JavaScript bukanlah pengganti prototypal inheritance, tetapi hanya syntactic sugar—artinya class hanyalah cara penulisan yang lebih rapi dan mudah, namun tetap menggunakan prototype di belakang layar.

Contoh object literal biasa:

const user = {
    name: "Aris",
    greet() {
        console.log(`Halo, saya ${this.name}`);
    }
};

user.greet();Code language: JavaScript (javascript)

Namun jika kita ingin membuat banyak object dengan struktur yang sama, object literal menjadi kurang fleksibel.

Di sinilah konsep class berguna.

Constructor

constructor adalah method khusus dalam class yang akan dijalankan setiap kali objek baru dibuat melalui new.

Contoh dasar class dengan constructor:

    class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
    }

    const user = new Person("Aris", 25);
    console.log(user);Code language: JavaScript (javascript)

Ketika kita memanggil:

new Person("Aris", 25)Code language: JavaScript (javascript)

maka constructor otomatis mengisi nilai:

• this.name = "Aris"
• this.age = 25

Method dalam Class

Method adalah fungsi yang berada di dalam class. Contoh:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

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

    getBirthYear() {
        return new Date().getFullYear() - this.age;
    }
}

const user = new Person("Aris", 25);
user.greet();
console.log(user.getBirthYear());Code language: JavaScript (javascript)

Kelebihan method di class:

• Otomatis masuk ke prototype
• Tidak memenuhi memori karena tidak dibuat ulang untuk setiap instance
• Lebih rapi dan mudah dibaca

Inheritance (Pewarisan)

Inheritance memungkinkan satu class untuk mewarisi properti dan method dari class lain. Ini sangat penting dalam OOP karena:

• Mengurangi duplikasi kode
• Memudahkan pembuatan struktur hierarki
• Lebih mudah untuk memperluas fungsionalitas dasar
• Dalam JavaScript, pewarisan dilakukan dengan kata kunci extends.

Contoh Inheritance:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Halo, saya ${this.name}.`);
    }
}

class Developer extends Person {
    constructor(name, age, programmingLanguage) {
        super(name, age); // memanggil constructor class induk
        this.programmingLanguage = programmingLanguage;
    }

    introduce() {
        console.log(
            `Halo, saya ${this.name}, seorang developer yang menggunakan ${this.programmingLanguage}.`
        );
    }
}

const dev = new Developer("Aris", 25, "JavaScript");
dev.greet();        // dari class Person
dev.introduce();    // dari class DeveloperCode language: JavaScript (javascript)

Penting:

• super() harus dipanggil sebelum this dalam constructor class turunan
• Semua method class induk bisa langsung dipakai oleh class turunan

Contoh Studi Kasus: Struktur OOP Sederhana

Misalnya kita membuat sistem data hewan peliharaan:

class Animal {
    constructor(name) {
        this.name = name;
    }

    eat() {
        console.log(`${this.name} sedang makan.`);
    }
}

class Cat extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

    meow() {
        console.log(`${this.name} berkata: Meow!`);
    }
}

const kitty = new Cat("Miko", "Persia");
kitty.eat();
kitty.meow();Code language: JavaScript (javascript)

Pada bagian ini kamu telah mempelajari:

• Konsep dasar class dalam JavaScript modern
• Cara kerja constructor
• Cara membuat method
• Teknik inheritance untuk membangun struktur OOP yang rapi

Fitur class ES6 membuat JavaScript lebih mudah dikelola pada aplikasi besar seperti aplikasi frontend modern, backend Node.js, maupun aplikasi full stack.

Module Import & Export ES6

Salah satu fitur paling berpengaruh dalam ES6 adalah sistem modul (ES Modules / ESM). Modul memungkinkan kita membagi kode menjadi beberapa file yang terpisah dan saling terhubung. Dengan modul, aplikasi menjadi:

• Lebih rapi
• Lebih scalable
• Mudah dirawat
• Lebih mudah diuji (testable)

ES Modules menghilangkan kebutuhan library lama seperti RequireJS, Browserify, atau sistem modul Node.js versi lama (CommonJS).

Pada bagian ini kita akan membahas:

1. export default
2. export named
3. import alias
4. dynamic import (ES2020, tapi tetap relevan untuk ESM modern)

Export Default

export default digunakan untuk mengekspor nilai utama dari sebuah modul. Dalam satu file modul, hanya boleh ada satu default export.

Contoh:

// file: utils.js

export default function greet(name) {
    console.log(`Halo, ${name}!`);
}Code language: JavaScript (javascript)

Cara mengimpornya:

// file: app.js

import greet from "./utils.js";

greet("Aris");Code language: JavaScript (javascript)

Ciri khas export default:

• Tidak perlu menggunakan { } saat import
• Nama fungsi/variabel dapat diubah bebas saat import

Contoh rename saat import (tetap valid):

import sayHello from "./utils.js";

sayHello("Aris");Code language: JavaScript (javascript)

Export Named

Dengan named export, kita bisa mengekspor beberapa variabel, fungsi, atau class dalam satu file.

Contoh:

// file: math.js

export const PI = 3.14;

export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}Code language: JavaScript (javascript)

Cara import:

import { PI, add, subtract } from "./math.js";

console.log(PI);
console.log(add(5, 3));Code language: JavaScript (javascript)

Ciri khas named export:

• Import harus menggunakan { }
• Nama harus sama persis dengan yang diekspor (kecuali memakai alias)
• Dalam satu modul bisa ada banyak named export

Named export digabungkan:

// file: strings.js

const upper = (text) => text.toUpperCase();
const lower = (text) => text.toLowerCase();

export { upper, lower };Code language: JavaScript (javascript)

Import Alias (Rename Imports)

Alias sangat berguna untuk:

• Menghindari konflik nama
• Memperjelas konteks
• Menyederhanakan nama yang panjang

Contoh alias pada named import:

import { add as tambah, subtract as kurang } from "./math.js";

console.log(tambah(10, 2));
console.log(kurang(10, 2));Code language: JavaScript (javascript)

Alias untuk default export:

Default export dapat diganti nama sesuka hati, tanpa as:

import greet from "./utils.js"; // bebas, greet bukan nama asli di fileCode language: JavaScript (javascript)

Alias pada namespace import (menggabungkan semua):

import * as MathUtil from "./math.js";

console.log(MathUtil.PI);
console.log(MathUtil.add(3, 4));Code language: JavaScript (javascript)

Dynamic Import (import()) — ES2020

Walaupun bukan ES6 langsung, dynamic import adalah bagian penting modul modern.

Dynamic import memungkinkan kita:

• Memuat modul hanya saat diperlukan (lazy loading)
• Mengurangi ukuran bundel awal
• Mengoptimalkan performa aplikasi SPA
• Memuat modul berdasarkan kondisi

Formatnya menggunakan fungsi import() yang mengembalikan Promise.

Contoh dasar dynamic import:

if (someCondition) {
    import("./math.js").then(module => {
        console.log(module.add(5, 4));
    });
}Code language: JavaScript (javascript)

Dengan async/await:

async function loadMath() {
    const math = await import("./math.js");

    console.log(math.PI);
    console.log(math.add(10, 20));
}

loadMath();Code language: JavaScript (javascript)

Kenapa dynamic import penting?

• Digunakan oleh React (lazy loading), Vue, dan Next.js
• Membuat aplikasi besar tetap cepat
• Cocok untuk memuat library besar yang jarang dipakai

Contoh kasus nyata:

Memuat editor WYSIWYG hanya saat user klik tombol “Edit Article”.

async function loadEditor() {
    const { default: Editor } = await import("./editor.js");
    const editor = new Editor("#content");
}Code language: JavaScript (javascript)

Pada bagian ini kamu telah mempelajari:

• export default — untuk satu ekspor utama
• export named — untuk banyak ekspor dalam satu file
• import alias — lebih fleksibel, bisa rename dan hindari konflik
• dynamic import() — memuat modul secara dinamis untuk optimasi performa

Semua konsep ini sangat penting dalam JavaScript modern, terutama pada framework modern seperti React, Vue, dan Svelte.

Promise ES6 JavaScript

JavaScript modern sangat identik dengan asynchronous programming, terutama ketika berhubungan dengan API, database, animasi, event, hingga proses yang membutuhkan waktu tertentu. Sebelum ES6 hadir, banyak developer mengandalkan callback, yang sering kali menyebabkan “callback hell” dan kode sulit dibaca.

ES6 memperkenalkan Promise, sebuah mekanisme asynchronous yang lebih rapi, mudah di-maintain, dan menjadi dasar lahirnya fitur modern seperti async/await.

Di bagian ini kita akan membahas:

• Gambaran asynchronous
• Promise states
• then(), catch(), finally()

Gambaran Asynchronous di JavaScript

JavaScript berjalan secara single-threaded, artinya hanya bisa menjalankan satu hal pada satu waktu. Namun, untuk operasi yang membutuhkan waktu (misalnya fetching data), JavaScript menggunakan mekanisme asynchronous agar proses lain tetap berjalan tanpa menunggu.

Contoh sederhana proses asynchronous menggunakan setTimeout():

console.log("Mulai");

setTimeout(() => {
    console.log("Proses berlangsung...");
}, 2000);

console.log("Selesai");Code language: JavaScript (javascript)

Output:

Mulai
Selesai
Proses berlangsung...

Artinya, JavaScript tidak menunggu proses selesai untuk melanjutkan baris berikutnya.

Namun callback seperti di atas sering menimbulkan callback hell ketika proses bertingkat.

Di sinilah Promise membantu.

Apa Itu Promise?

Promise adalah objek yang merepresentasikan proses asynchronous yang akan selesai di masa depan, baik berhasil maupun gagal.

Promise memiliki 3 state utama:

1. pending
   Proses asynchronous sedang berjalan.

2. fulfilled (resolved)
   Proses selesai berhasil.

3. rejected
   Proses selesai tetapi gagal.

Contoh Dasar Promise

const getData = () => {
    return new Promise((resolve, reject) => {
        const success = true;

        setTimeout(() => {
            if (success) {
                resolve("Data berhasil diambil!");
            } else {
                reject("Gagal mengambil data.");
            }
        }, 1500);
    });
};

getData()
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.log(error);
    })
    .finally(() => {
        console.log("Proses selesai (success atau error)");
    });Code language: JavaScript (javascript)

then(), catch(), finally()

then()

Digunakan untuk menerima hasil ketika Promise fulfilled.

getData().then(data => {
    console.log("Sukses:", data);
});Code language: JavaScript (javascript)

catch()

Dipanggil ketika Promise berada di state rejected.

getData()
    .catch(err => {
        console.log("Error:", err);
    });Code language: JavaScript (javascript)

finally()

Selalu dipanggil, baik berhasil atau gagal — cocok untuk menutup loading UI.

getData()
    .finally(() => {
        console.log("Selesai apapun hasilnya.");
    });Code language: JavaScript (javascript)

Promise Chaining

Promise bisa dirangkai agar tidak terjebak callback hell.

const step1 = () => {
    return Promise.resolve("Step 1");
};

const step2 = () => {
    return Promise.resolve("Step 2");
};

step1()
    .then(res => {
        console.log(res);
        return step2();
    })
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.log("Error:", err);
    });Code language: JavaScript (javascript)

Contoh Real Case: Fetch API

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => {
        console.log("Data:", data);
    })
    .catch(error => {
        console.log("Terjadi error:", error);
    })
    .finally(() => {
        console.log("Fetch selesai");
    });Code language: JavaScript (javascript)

Kesimpulan

ES6 menjadi tonggak penting dalam evolusi JavaScript karena menghadirkan fitur-fitur baru yang membuat proses development lebih modern, efisien, dan terstruktur. Mulai dari let dan const, arrow function, template literal, destructuring, hingga class dan modul, semuanya hadir untuk menjawab kebutuhan developer dalam membangun aplikasi yang scalable dan mudah di-maintain. Standarisasi ECMAScript juga memastikan bahwa JavaScript terus berkembang secara konsisten, mengikuti kebutuhan industri yang semakin kompleks.

Selain itu, fitur asynchronous seperti Promise dan dukungan modul import/export menjadikan JavaScript lebih fleksibel dalam menangani proses real-time dan integrasi API. Dengan menguasai seluruh fitur inti ES6, developer dapat meningkatkan kualitas kode, mempercepat workflow, serta menerapkan praktik modern yang digunakan pada framework besar seperti React, Vue, dan Node.js. ES6 bukan hanya pembaruan bahasa, tetapi pondasi utama JavaScript modern yang digunakan saat ini.