Widget HTML #1

Beranda / JavaScript / Learn Javascript

ES6 dan Teman-Temannya: Pesta Baru di Kota JavaScript!

Posting Komentar

Halo, teman-teman! 👋

Kali ini kita akan berbicara tentang ES6, atau yang lebih dikenal sebagai ECMAScript 2015. Ini adalah salah satu pembaruan terbesar dalam sejarah JavaScript, dan bisa dibilang seperti pesta keren yang membawa banyak fitur baru dan membuat JavaScript lebih modern, ringkas, dan menyenangkan untuk digunakan. Seperti upgrade dari ponsel jadul ke smartphone terbaru, ES6 benar-benar mengubah cara kita menulis JavaScript.

Buat teman-teman yang mungkin sudah pernah belajar JavaScript dengan gaya lama (ES5), artikel ini bakal jadi guide keren untuk mengenal fitur-fitur ES6 dan bagaimana mereka bisa bikin hidup kita sebagai developer lebih mudah.

1. Let dan Const: Pengganti Var yang Lebih Keren

Let: Variabel yang Fleksibel Tapi Aman


let nama = "Budi";
if (true) {
    let nama = "Ani";
    console.log(nama); // Output: Ani
}
console.log(nama); // Output: Budi

Const: Variabel Tetap yang Nggak Bisa Diubah


const API_URL = "https://api.example.com";
console.log(API_URL); // Output: https://api.example.com

// Tidak bisa diubah
// API_URL = "https://newapi.example.com"; // Ini akan menghasilkan error

2. Template Literals: Menggabungkan String Jadi Lebih Mudah


let nama = "Budi";
let pesan = `Halo, ${nama}! Selamat datang di website kami.`;
console.log(pesan); // Output: Halo, Budi! Selamat datang di website kami.

3. Arrow Function: Fungsi yang Lebih Ringkas dan Modern


let tambah = (a, b) => a + b;
console.log(tambah(3, 4)); // Output: 7

4. Destructuring: Cara Pintar Mengambil Data dari Objek dan Array

Destructuring Objek


let siswa = {
    nama: "Budi",
    umur: 17,
    kelas: "12 IPA"
};

let { nama, umur } = siswa;
console.log(nama); // Output: Budi
console.log(umur); // Output: 17

Destructuring Array


let warna = ["merah", "kuning", "hijau"];
let [pertama, kedua] = warna;
console.log(pertama); // Output: merah
console.log(kedua);   // Output: kuning

5. Default Parameters: Buat Fungsi Jadi Lebih Aman


function salam(nama = "Teman-teman") {
    return `Halo, ${nama}!`;
}

console.log(salam()); // Output: Halo, Teman-teman!
console.log(salam("Budi")); // Output: Halo, Budi!

6. Rest dan Spread Operator: Bikin Manipulasi Data Lebih Mudah

Rest Operator


function hitungTotal(...angka) {
    return angka.reduce((a, b) => a + b);
}

console.log(hitungTotal(1, 2, 3, 4)); // Output: 10

Spread Operator


let angka1 = [1, 2, 3];
let angka2 = [4, 5, 6];
let semuaAngka = [...angka1, ...angka2];
console.log(semuaAngka); // Output: [1, 2, 3, 4, 5, 6]

Membuat File index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar ES6</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Belajar ES6 dan Fitur-fitur Keren!</h1>

    <button id="tampilkan">Tampilkan Pengguna</button>
    <ul id="daftarPengguna"></ul>

    <script>
        // Template Literal
        let pesan = `Halo, teman-teman! Selamat belajar ES6!`;
        console.log(pesan);

        // Destructuring
        let siswa = { nama: "Budi", umur: 17 };
        let { nama, umur } = siswa;
        console.log(nama, umur);

        // Arrow Function & Spread Operator
        const pengguna = ["Ani", "Siti", "Dodi"];
        const tambahPengguna = (namaBaru) => [...pengguna, namaBaru];

        // Event listener
        document.getElementById('tampilkan').addEventListener('click', () => {
            let daftar = tambahPengguna("Rudi");
            const listEl = document.getElementById('daftarPengguna');
            listEl.innerHTML = '';
            daftar.forEach((user) => {
                let li = document.createElement('li');
                li.textContent = user;
                listEl.appendChild(li);
            });
        });
    </script>
</body>
</html>

Kesimpulan

Jadi, teman-teman, ES6 benar-benar membawa banyak fitur keren dan praktis yang bikin hidup kita sebagai developer lebih mudah. Dari let dan const yang lebih aman, hingga arrow function dan spread operator yang bikin kode lebih ringkas, ES6 adalah upgrade besar yang mengubah cara kita menulis JavaScript.

Selamat bereksperimen dengan ES6, dan semoga teman-teman makin semangat belajar JavaScript. Jangan lupa coba langsung fitur-fitur keren ini di proyek kalian. Happy coding! 👨‍💻👩‍💻

List Part Artikel

Posting Komentar untuk "ES6 dan Teman-Temannya: Pesta Baru di Kota JavaScript!"

Posting Komentar