ES6 Programming Basics

This document explains ES6 features with examples.
👉 Baca dalam Bahasa Indonesia

Table of Contents

1. Introduction
2. Let and Const
3. Arrow Functions
4. Template Literals
5. Destructuring Assignment
6. Default Parameters
7. Rest and Spread Operators
8. Classes
9. Modules
10. Promises and Async/Await
11. Map and Set in ES6
12. Generator
13. Conclusion

---

Introduction

ES6 (ECMAScript 6) is the sixth version of JavaScript, released in 2015. It introduced many new features that make JavaScript easier and cleaner to write, enhancing development experience and application performance. Frameworks like React, Angular, and Vue heavily rely on ES6 features.

---

1. Let and Const

let

let allows variable declaration within a block scope.

let animal = "Tiger";
animal = "Elephant"; // Allowed
console.log(animal); // Elephant

const

const declares a constant variable that cannot be reassigned.

const kingOfJungle = "Lion";
// kingOfJungle = "Wolf"; // Error: Assignment to constant variable
console.log(kingOfJungle);

---

2. Arrow Functions

Arrow functions provide a shorter syntax for writing functions.

const roar = (animal) => `${animal} is roaring!`;
console.log(roar("Bear")); // Bear is roaring!

---

3. Template Literals

Template literals allow expressions and multiline strings.

const animal = "Deer";
const message = `The ${animal} runs fast in the forest.`;
console.log(message);

---

4. Destructuring Assignment

Array Destructuring

const jungleAnimals = ["Monkey", "Tiger", "Owl"];
const [first, second, third] = jungleAnimals;
console.log(first); // Monkey
console.log(second); // Tiger

Object Destructuring

const bird = { name: "Eagle", speed: "Fast" };
const { name, speed } = bird;
console.log(name); // Eagle
console.log(speed); // Fast

---

5. Default Parameters

const animalSound = (animal = "Wolf") => `${animal} howls at night.`;
console.log(animalSound()); // Wolf howls at night.
console.log(animalSound("Fox")); // Fox howls at night.

---

6. Rest and Spread Operators

Spread Operator

const jungleAnimals = ["Tiger", "Snake", "Jaguar"];
const allAnimals = ["Elephant", ...jungleAnimals, "Deer"];
console.log(allAnimals);

Rest Operator

const describeAnimals = (first, ...others) => {
  console.log(`First animal: ${first}`);
  console.log(`Other animals: ${others.join(", ")}`);
};
describeAnimals("Leopard", "Crocodile", "Eagle", "Bear");

---

7. Classes

class Animal {
  constructor(name, habitat) {
    this.name = name;
    this.habitat = habitat;
  }
  description() {
    return `${this.name} lives in ${this.habitat}.`;
  }
}

const panda = new Animal("Panda", "Bamboo Forest");
console.log(panda.description());

---

8. Modules

Export

// file: animal.js
export const jungleBird = "Parrot";
export function fly(animal) {
  return `${animal} is flying high!`;
}

Import

// file: main.js
import { jungleBird, fly } from "./animal.js";
console.log(jungleBird); // Parrot
console.log(fly("Hawk")); // Hawk is flying high!

---

9. Promises and Async/Await

Promises

const findFood = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Bear found honey!"), 2000);
});

findFood.then((message) => console.log(message));

Async/Await

const findWater = async () => {
  return "Deer found a river!";
};

findWater().then(console.log);

---

10. Map and Set in ES6

Map

const animalSpeed = new Map();
animalSpeed.set("Cheetah", "Fastest");
animalSpeed.set("Turtle", "Slow");
console.log(animalSpeed.get("Cheetah")); // Fastest

Set

const uniqueAnimals = new Set(["Wolf", "Fox", "Wolf"]);
console.log(uniqueAnimals.size); // 2

---

11. Generator

function* animalGenerator() {
  yield "Elephant";
  yield "Tiger";
  yield "Giraffe";
}

const animals = animalGenerator();
console.log(animals.next().value); // Elephant
console.log(animals.next().value); // Tiger
console.log(animals.next().value); // Giraffe

---

12. Conclusion

ES6 introduced numerous powerful features that simplify JavaScript development. Mastering these concepts will significantly enhance your coding efficiency.

👉 Baca dalam Bahasa Indonesia