Mastering JavaScript ES6+ Features

1. let and const

Block-scoped variable declarations, providing better control over variable lifecycle than var.

// var (function-scoped)
function varExample() {
  if (true) {
    var x = 10;
    console.log(x); // 10
  }
  console.log(x); // 10 (accessible outside block)
}

// let (block-scoped)
function letExample() {
  if (true) {
    let y = 20;
    console.log(y); // 20
  }
  // console.log(y); // ReferenceError: y is not defined
}

// const (block-scoped, cannot be reassigned)
const PI = 3.14159;
// PI = 3.14; // TypeError: Assignment to constant variable.
                

2. Arrow Functions (=>)

A concise syntax for writing functions and a lexical this binding.

// Traditional function expression
const addTraditional = function(a, b) {
  return a + b;
};

// Arrow function
const addArrow = (a, b) => a + b; // Implicit return for single expression

const greet = name => `Hello, ${name}!`; // Single parameter, no parentheses needed

const multiply = (a, b) => { // Multi-line body requires explicit return
  const result = a * b;
  return result;
};

// Lexical 'this'
class Timer {
  constructor() {
    this.seconds = 0;
  }

  start() {
    // 'this' inside setInterval using traditional function would be different
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
}
const timer = new Timer();
timer.start();
                

3. Template Literals

String literals allowing embedded expressions, multi-line strings, and tag functions.

const name = "Alice";
const age = 30;

// Traditional concatenation
const messageTraditional = "Hello, " + name + "! You are " + age + " years old.";

// Template literal
const messageTemplate = `Hello, ${name}! You are ${age} years old.
This is a multi-line string.`;

console.log(messageTemplate);
                

4. Destructuring Assignment

Easily extract values from arrays or properties from objects into distinct variables.

// Array Destructuring
const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors;
console.log(firstColor, secondColor); // red green

const [,,thirdColor] = colors; // Skip elements
console.log(thirdColor); // blue

// Object Destructuring
const person = {
  firstName: "Bob",
  lastName: "Smith",
  age: 25
};

const { firstName, lastName } = person;
console.log(firstName, lastName); // Bob Smith

const { age: personAge } = person; // Rename variable
console.log(personAge); // 25

// Default values
const { city = "Unknown" } = person;
console.log(city); // Unknown
                

5. Default Parameters

Set default values for function parameters.

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

greetUser();       // Hello, Guest!
greetUser("Charlie"); // Hello, Charlie!
                

6. Rest and Spread Operators (...)

The rest parameter gathers arguments into an array, while the spread operator expands iterables into individual elements.

// Rest Parameter
function sum(...numbers) {
  return numbers.reduce((acc, current) => acc + current, 0);
}
console.log(sum(1, 2, 3));      // 6
console.log(sum(10, 20, 30, 40)); // 100

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

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

7. Classes

Syntactic sugar over JavaScript's existing prototype-based inheritance.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // Call parent constructor
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // Buddy barks.
                

8. Modules (import / export)

A way to organize code into reusable pieces.

// --- utils.js ---
export const PI = 3.14;
export function square(x) {
  return x * x;
}

// --- main.js ---
import { PI, square } from './utils.js';

console.log(PI);
console.log(square(5));
                

9. Promises

Represent the eventual result of an asynchronous operation.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchData() {
  console.log('Fetching data...');
  await delay(2000);
  console.log('Data fetched!');
  return { data: "sample" };
}

fetchData()
  .then(result => console.log('Processing:', result))
  .catch(error => console.error('Error:', error));
                

10. Async/Await

Syntactic sugar for working with Promises, making asynchronous code look more synchronous.

async function performAsyncTask() {
  try {
    console.log("Starting task...");
    const result = await fetchData(); // Using fetchData from Promise example
    console.log("Task completed with result:", result);
  } catch (error) {
    console.error("Task failed:", error);
  }
}

performAsyncTask();