Pelatihan ES6 JavaScript: Kuasai Masa Depan Coding Hari Ini!

Daftar Isi

Pengantar ES6 dan Manfaatnya
Variabel dengan let dan const
Arrow Functions
Template Literals
Destructuring Assignment
Spread dan Rest Operator
Modules (Import & Export)
Promise dan Async/Await
Class dan Inheritance
Sumber Belajar dan Source Code

1. Pengantar ES6 dan Manfaatnya

ES6 (ECMAScript 2015) adalah versi besar dari bahasa JavaScript yang membawa banyak fitur baru yang membuat penulisan kode lebih efisien, mudah dibaca, dan powerful. Dengan menguasai ES6, Anda akan siap menghadapi pengembangan aplikasi modern, baik di frontend maupun backend.

Ilustrasi seorang programmer sedang menulis kode JavaScript ES6 di laptop dengan latar belakang kode dan ikon JavaScript

Manfaat utama ES6:

Penulisan kode lebih singkat dan jelas
Mendukung pemrograman modular dengan import/export
Memudahkan pengelolaan asynchronous dengan Promise dan async/await
Meningkatkan performa dan keamanan kode

2. Variabel dengan let dan const

ES6 memperkenalkan let dan const sebagai pengganti var untuk deklarasi variabel. Ini membantu menghindari masalah hoisting dan scope yang membingungkan.

Step by Step:

let: Variabel yang nilainya bisa diubah dan memiliki scope blok.
```
let nama = "Andi";
nama = "Budi"; // diperbolehkan
```
const: Variabel konstan yang nilainya tidak bisa diubah setelah deklarasi.
```
const PI = 3.14;
// PI = 3.15; // error
```

Scope:

let

dan


       const

hanya berlaku di dalam blok tempat mereka dideklarasikan.

{
  let x = 10;
  const y = 20;
  console.log(x, y); // 10 20
}
// console.log(x); // error

Tampilan editor kode dengan contoh penggunaan let dan const dalam JavaScript ES6

3. Arrow Functions

Arrow functions adalah cara singkat menulis fungsi anonim yang juga mengikat this secara leksikal.

Step by Step:

Fungsi biasa:

function tambah(a, b) {
  return a + b;
}

Arrow function lengkap:

const tambah = (a, b) => {
  return a + b;
};

Arrow function dengan return implisit (tanpa kurung kurawal):
```
const tambah = (a, b) => a + b;
```

Arrow function tanpa parameter:

const halo = () => console.log("Halo!");

Tampilan kode JavaScript yang menunjukkan contoh arrow function dengan berbagai variasi

4. Template Literals

Template literals memungkinkan Anda membuat string dengan ekspresi yang disisipkan dan multiline string dengan mudah menggunakan backticks ( ` ).

Step by Step:

String biasa:

const nama = "Andi";
const pesan = "Halo, " + nama + "!";

Template literal dengan ekspresi:

const nama = "Andi";
const pesan = `Halo, ${nama}!`;

Multiline string:

const paragraf = `Ini adalah
string yang
multiline.`;

5. Destructuring Assignment

Destructuring memungkinkan Anda mengekstrak nilai dari array atau properti dari objek ke dalam variabel dengan sintaks yang ringkas.

Step by Step:

Destructuring array:

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

Destructuring objek:

const user = { nama: "Andi", umur: 25 };
const { nama, umur } = user;
console.log(nama, umur); // Andi 25

Destructuring dengan default value:

const { nama, pekerjaan = "Developer" } = { nama: "Budi" };
console.log(pekerjaan); // Developer

Kode JavaScript yang menunjukkan contoh destructuring array dan objek dengan default value

6. Spread dan Rest Operator

Spread dan Rest operator menggunakan tiga titik ( ... ) tapi memiliki fungsi berbeda. Spread untuk menyebarkan elemen, Rest untuk mengumpulkan elemen.

Step by Step:

Spread pada array:

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

Spread pada objek:

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

Rest pada parameter fungsi:

function jumlahkan(...angka) {
  return angka.reduce((a, b) => a + b, 0);
}
console.log(jumlahkan(1, 2, 3)); // 6

Kode JavaScript yang menampilkan contoh penggunaan spread dan rest operator pada array, objek, dan fungsi

7. Modules (Import & Export)

ES6 memperkenalkan sistem modul yang memungkinkan Anda memecah kode menjadi file-file terpisah dan mengimpor ekspor antar file.

Step by Step:

Export named:

// math.js
export function tambah(a, b) {
  return a + b;
}
export const PI = 3.14;

Import named:

// app.js
import { tambah, PI } from './math.js';
console.log(tambah(2, 3)); // 5
console.log(PI); // 3.14

Export default:

// greeting.js
export default function halo() {
  console.log("Halo!");
}

Import default:

// app.js
import halo from './greeting.js';
halo(); // Halo!

Kode JavaScript yang menunjukkan contoh penggunaan import dan export modul ES6

8. Promise dan Async/Await

Promise dan async/await memudahkan penanganan operasi asynchronous agar kode lebih mudah dibaca dan dikelola.

Step by Step:

Membuat Promise:

const janji = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Sukses!");
  }, 1000);
});

Menggunakan then/catch:

janji
  .then((hasil) => console.log(hasil))
  .catch((error) => console.error(error));

Async/Await:

async function jalankan() {
  try {
    const hasil = await janji;
    console.log(hasil);
  } catch (error) {
    console.error(error);
  }
}
jalankan();

9. Class dan Inheritance

ES6 memperkenalkan sintaks class yang memudahkan pembuatan objek dan pewarisan (inheritance) dalam JavaScript.

Step by Step:

Membuat class:

class Hewan {
  constructor(nama) {
    this.nama = nama;
  }
  suara() {
    console.log(`${this.nama} bersuara.`);
  }
}

Membuat instance:

const kucing = new Hewan("Kucing");
kucing.suara(); // Kucing bersuara.

Pewarisan class:

class Anjing extends Hewan {
  suara() {
    console.log(`${this.nama} menggonggong.`);
  }
}
const doggy = new Anjing("Doggy");
doggy.suara(); // Doggy menggonggong.

Kode JavaScript yang menunjukkan contoh pembuatan class, instance, dan inheritance dengan method override

10. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan channel yang sangat direkomendasikan untuk memperdalam ES6 dan JavaScript modern:

Source Code Contoh Lengkap

Berikut contoh source code lengkap yang menggabungkan beberapa fitur ES6 yang telah dipelajari:

class Mahasiswa {
  constructor(nama, umur) {
    this.nama = nama;
    this.umur = umur;
  }

  perkenalan = () => {
    console.log(`Halo, nama saya ${this.nama} dan saya berumur ${this.umur} tahun.`);
  }
}

const mhs1 = new Mahasiswa("Andi", 21);
mhs1.perkenalan();

const angka = [1, 2, 3, 4, 5];
const jumlah = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(`Jumlah angka: ${jumlah(...angka)}`);

const user = {
  nama: "Budi",
  pekerjaan: "Developer",
  umur: 30,
};

const { nama, pekerjaan, umur } = user;
console.log(`User: ${nama}, Pekerjaan: ${pekerjaan}, Umur: ${umur}`);

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data berhasil diambil!");
    }, 1500);
  });
};

async function tampilkanData() {
  const data = await fetchData();
  console.log(data);
}

tampilkanData();