JavaScript ES6+: Arrow Function, Destructuring, Spread, Map, Set, dan Promises

1
// Fungsi biasa
2
function tambah(a, b) {
3
  return a + b;
4
}
5

6
// Arrow function — sama persis
7
const tambah = (a, b) => a + b;
8

9
// Satu parameter — tanpa kurung
10
const kuadrat = x => x ** 2;
11

12
// Tanpa parameter
13
const halo = () => "Hello World!";
14

15
// Multiple baris — pakai kurung kurawal + return
16
const proses = (x, y) => {
17
  let hasil = x * y;
18
  return hasil + 10;
19
};
20

21
console.log(tambah(3, 4));   // 7
22
console.log(kuadrat(5));     // 25
23
console.log(halo());         // "Hello World!"

1
// Perbedaan utama: `this` binding
2
const obj = {
3
  nama: "Budi",
4

5
  // Regular function — this merujuk ke obj
6
  sapa: function() {
7
    return "Halo, " + this.nama;
8
  },
9

10
  // Arrow function — this merujuk ke scope luar (bukan obj)
11
  sapaArrow: () => {
12
    return "Halo, " + this.nama; // undefined!
13
  }
14
};
15

16
console.log(obj.sapa());       // "Halo, Budi"
17
console.log(obj.sapaArrow());  // "Halo, undefined"

1
const nama = "Siti";
2
const umur = 22;
3

4
// ES5 — string concatenation
5
const pesan1 = "Halo, " + nama + "! Kamu berumur " + umur + " tahun.";
6

7
// ES6 — template literal (backtick)
8
const pesan2 = `Halo, ${nama}! Kamu berumur ${umur} tahun.`;
9

10
// Ekspresi dalam template literal
11
console.log(`2 + 3 = ${2 + 3}`);        // "2 + 3 = 5"
12
console.log(`${umur >= 18 ? "Dewasa" : "Anak-anak"}`); // "Dewasa"
13

14
// Multiline
15
const html = `
16
  <div class="card">
17
    <h2>${nama}</h2>
18
    <p>Umur: ${umur}</p>
19
  </div>
20
`;

1
const buah = ["apel", "mangga", "jeruk", "anggur"];
2

3
// Cara lama
4
const b1 = buah[0];
5
const b2 = buah[1];
6

7
// Destructuring
8
const [pertama, kedua, ketiga] = buah;
9
console.log(pertama); // "apel"
10
console.log(kedua);   // "mangga"
11

12
// Skip elemen
13
const [, , tiga] = buah;
14
console.log(tiga); // "jeruk"
15

16
// Rest — ambil sisa
17
const [head, ...tail] = buah;
18
console.log(head); // "apel"
19
console.log(tail); // ["mangga", "jeruk", "anggur"]
20

21
// Default value
22
const [a = "default", b = "lainnya"] = ["ada"];
23
console.log(a); // "ada"
24
console.log(b); // "lainnya"
25

26
// Swap variabel
27
let x = 1, y = 2;
28
[x, y] = [y, x];
29
console.log(x, y); // 2 1

1
const orang = { nama: "Budi", umur: 25, kota: "Jakarta" };
2

3
// Destructuring
4
const { nama, umur, kota } = orang;
5
console.log(nama); // "Budi"
6
console.log(umur); // 25
7

8
// Rename variabel
9
const { nama: fullName, umur: age } = orang;
10
console.log(fullName); // "Budi"
11

12
// Default value
13
const { nama: n, hp = "tidak ada" } = orang;
14
console.log(hp); // "tidak ada"
15

16
// Nested destructuring
17
const user = {
18
  name: "Siti",
19
  address: { city: "Bandung", zip: "40111" }
20
};
21
const { name, address: { city } } = user;
22
console.log(city); // "Bandung"
23

24
// Destructuring di parameter fungsi
25
function tampilkan({ nama, umur }) {
26
  console.log(`${nama}, ${umur} tahun`);
27
}
28
tampilkan(orang); // "Budi, 25 tahun"

1
// Spread — menyebarkan elemen
2
const arr1 = [1, 2, 3];
3
const arr2 = [4, 5, 6];
4

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

8
// Copy array
9
const copy = [...arr1];
10

11
// Spread object
12
const obj1 = { a: 1, b: 2 };
13
const obj2 = { c: 3, d: 4 };
14
const merged = { ...obj1, ...obj2 };
15
console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }
16

17
// Override property
18
const updated = { ...obj1, b: 99 };
19
console.log(updated); // { a: 1, b: 99 }
20

21
// Rest — kumpulkan argumen
22
function jumlah(...angka) {
23
  return angka.reduce((total, n) => total + n, 0);
24
}
25
console.log(jumlah(1, 2, 3, 4, 5)); // 15

1
const map = new Map();
2

3
// Set nilai
4
map.set("nama", "Budi");
5
map.set(1, "satu");
6
map.set(true, "benar");
7

8
// Get nilai
9
console.log(map.get("nama")); // "Budi"
10
console.log(map.get(1));      // "satu"
11

12
// Cek & size
13
console.log(map.has("nama")); // true
14
console.log(map.size);        // 3
15

16
// Delete
17
map.delete("nama");
18

19
// Iterasi
20
for (let [key, value] of map) {
21
  console.log(`${key}: ${value}`);
22
}
23

24
// Map dari array of pairs
25
const map2 = new Map([["a", 1], ["b", 2], ["c", 3]]);

1
const set = new Set([1, 2, 3, 2, 1]);
2
console.log(set);       // Set {1, 2, 3} — duplikat dihapus
3
console.log(set.size);  // 3
4

5
set.add(4);
6
set.delete(1);
7
console.log(set.has(2)); // true
8

9
// Iterasi
10
for (let val of set) {
11
  console.log(val);
12
}
13

14
// Hapus duplikat dari array
15
const arr = [1, 2, 2, 3, 3, 4];
16
const unique = [...new Set(arr)];
17
console.log(unique); // [1, 2, 3, 4]

1
const angka = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2

3
// map() — transformasi setiap elemen
4
const kuadrat = angka.map(x => x ** 2);
5
// [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
6

7
// filter() — filter berdasarkan kondisi
8
const genap = angka.filter(x => x % 2 === 0);
9
// [2, 4, 6, 8, 10]
10

11
// reduce() — akumulasi
12
const total = angka.reduce((acc, x) => acc + x, 0);
13
// 55
14

15
// find() — elemen pertama yang cocok
16
const pertama = angka.find(x => x > 5);
17
// 6
18

19
// findIndex() — index elemen pertama yang cocok
20
const idx = angka.findIndex(x => x > 5);
21
// 5
22

23
// some() — ada yang memenuhi kondisi?
24
console.log(angka.some(x => x > 9));  // true
25
// every() — semua memenuhi kondisi?
26
console.log(angka.every(x => x > 0)); // true
27

28
// flat() — ratakan array bersarang
29
const nested = [[1,2],[3,4],[5,6]];
30
console.log(nested.flat()); // [1,2,3,4,5,6]
31

32
// includes()
33
console.log(angka.includes(5)); // true

1
class Hewan {
2
  constructor(nama, suara) {
3
    this.nama = nama;
4
    this.suara = suara;
5
  }
6

7
  bicara() {
8
    return `${this.nama} berkata: ${this.suara}`;
9
  }
10

11
  static info() {
12
    return "Ini adalah class Hewan";
13
  }
14
}
15

16
class Anjing extends Hewan {
17
  constructor(nama, ras) {
18
    super(nama, "Woof!");
19
    this.ras = ras;
20
  }
21

22
  // Override method
23
  bicara() {
24
    return `${this.nama} (${this.ras}) menggonggong: ${this.suara}`;
25
  }
26
}
27

28
const anjing = new Anjing("Rex", "Labrador");
29
console.log(anjing.bicara());
30
// "Rex (Labrador) menggonggong: Woof!"
31
console.log(Hewan.info());
32
// "Ini adalah class Hewan"

1
// Promise — handle operasi async
2
const fetchData = new Promise((resolve, reject) => {
3
  setTimeout(() => {
4
    const sukses = true;
5
    if (sukses) {
6
      resolve({ nama: "Budi", umur: 25 });
7
    } else {
8
      reject(new Error("Gagal mengambil data"));
9
    }
10
  }, 1000);
11
});
12

13
// Consume dengan .then()
14
fetchData
15
  .then(data => console.log("Data:", data))
16
  .catch(err => console.error("Error:", err.message))
17
  .finally(() => console.log("Selesai"));
18

19
// Async/Await — lebih bersih
20
async function ambilData() {
21
  try {
22
    const data = await fetchData;
23
    console.log("Data:", data);
24
  } catch (err) {
25
    console.error("Error:", err.message);
26
  } finally {
27
    console.log("Selesai");
28
  }
29
}
30

31
ambilData();
32

33
// Fetch API (browser) dengan async/await
34
async function getUsers() {
35
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
36
  const users = await response.json();
37
  console.log(users);
38
}

1
const str = "  Hello World  ";
2

3
// includes, startsWith, endsWith
4
console.log(str.includes("World"));     // true
5
console.log(str.trim().startsWith("H")); // true
6
console.log(str.trim().endsWith("d"));   // true
7

8
// repeat
9
console.log("ha".repeat(3));  // "hahaha"
10

11
// padStart, padEnd
12
console.log("5".padStart(3, "0"));  // "005"
13
console.log("5".padEnd(3, "0"));    // "500"
14

15
// replaceAll (ES2021)
16
const text = "satu dua satu tiga satu";
17
console.log(text.replaceAll("satu", "1"));
18
// "1 dua 1 tiga 1"