JavaScript ES6 (ECMAScript 2015) introduced a wide range of features that made JavaScript more powerful, readable, and efficient. In this guide, we will explore the most important ES6 features with examples.

1. let & const: Block-scoped Variables

Before ES6, var was the only way to declare variables, but it had functional scope issues. ES6 introduced let and const to solve this problem.

let name = "John";
const age = 25;
name = "Doe"; // Allowed
age = 30; // Error: Assignment to constant variable

• let allows reassignment but has block scope.

• const is used for constants and cannot be reassigned.

2. Arrow Functions: Shorter Syntax for Functions

Arrow functions provide a concise way to write functions.

const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

3. Template Literals: Easier String Formatting

Template literals (``) allow embedding expressions inside strings.

const name = "Alice";
console.log(`Hello, ${name}!`); // Hello, Alice!

• Supports multi-line strings.

• Allows embedding variables and expressions.

4. Destructuring Assignment: Extracting Values Easily

Destructuring makes it easy to extract values from arrays and objects.

// Array destructuring
const [a, b] = [10, 20];
console.log(a, b); // 10, 20

// Object destructuring
const person = { name: "John", age: 30 };
const { name, age } = person;
console.log(name, age); // John, 30

5. Default Parameters: Setting Function Defaults

Default parameters allow setting default values for function parameters.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("Alice"); // Hello, Alice!

6. Rest & Spread Operators: Handling Multiple Values

• Spread (...) is used to expand arrays/objects.

• Rest (...) is used to group multiple values into an array.

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

// Rest Example
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

7. Promises: Better Handling of Asynchronous Code

Promises provide a cleaner way to handle asynchronous operations.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data received!"), 2000);
  });
};

fetchData().then(data => console.log(data)); // Data received! (after 2 seconds)

8. Classes: Object-Oriented Programming in JavaScript

Classes make JavaScript more structured and easy to use for OOP.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}
const john = new Person("John", 30);
john.greet(); // Hello, my name is John

9. Modules: Import & Export

ES6 introduced module support, allowing you to split code into multiple files.

// file: math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// file: main.js
import { add, subtract } from "./math.js";
console.log(add(5, 3)); // 8

10. Enhanced Object Literals

ES6 allows shorthand syntax for defining object properties and methods.

const name = "Alice";
const age = 25;
const person = { name, age, greet() { console.log("Hello!"); } };
person.greet(); // Hello!

Conclusion

ES6 introduced many powerful features that make JavaScript development more efficient, readable, and maintainable. By leveraging these features, developers can write cleaner and more modern JavaScript code.

Want to learn more JavaScript tricks? Follow Codercrafter for more updates! 🚀