ES6 JAVASCRIPT

ES6 (ECMAScript 2015) introduced several new features and syntax improvements to JavaScript. Here’s a summary of the most important ES6 syntax with examples:

1. let and const Keywords

ES6 introduced let and const for block-scoped variables.

• let: Block-scoped variable that can be updated but not re-declared in the same scope.
• const: Block-scoped constant, cannot be updated or re-declared.

// let example
let age = 25;
age = 30; // allowed

// const example
const name = 'John';
name = 'Doe'; // error: Assignment to constant variable

2. Arrow Functions (=>)

Arrow functions provide a shorter syntax for writing functions and do not bind their own this.

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b; // implicit return

3. Template Literals

Template literals allow for embedding expressions and multi-line strings, using backticks (`).

const name = 'Alice';
const greeting = `Hello, ${name}!`; // string interpolation

console.log(greeting); // Hello, Alice!

4. Destructuring Assignment

Destructuring allows you to unpack values from arrays or properties from objects into distinct variables.

• Array Destructuring:

const numbers = [1, 2, 3];
const [first, second] = numbers;

console.log(first); // 1
console.log(second); // 2

• Object Destructuring:

const person = { name: 'John', age: 25 };
const { name, age } = person;

console.log(name); // John
console.log(age); // 25

5. Default Parameters

Functions can have default parameter values.

const greet = (name = 'Guest') => `Hello, ${name}!`;

console.log(greet()); // Hello, Guest!
console.log(greet('Alice')); // Hello, Alice!

6. Rest Parameters (...)

The rest operator (...) allows functions to accept an indefinite number of arguments as an array.

const sum = (...numbers) => numbers.reduce((acc, num) => acc + num, 0);

console.log(sum(1, 2, 3, 4)); // 10

7. Spread Operator (...)

The spread operator (...) allows an iterable (e.g., array, string) to be expanded into individual elements.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];

console.log(combined); // [1, 2, 3, 4, 5, 6]

8. Classes

ES6 introduced the class syntax to define constructors and methods.

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', 25);
john.greet(); // Hello, my name is John.

9. Modules (Export & Import)

ES6 provides native support for modules with export and import.

• Exporting:

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

• Importing:

// file: app.js
import { add, subtract } from './math';

console.log(add(2, 3)); // 5

10. Promises

Promises represent the eventual completion (or failure) of an asynchronous operation.

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

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

11. For-of Loop

The for-of loop allows you to iterate over iterable objects like arrays, strings, etc.

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
  console.log(fruit);
}
// apple
// banana
// cherry

12. Map and Set

ES6 introduced new collection types: Map (for key-value pairs) and Set (for unique values).

• Map:

const map = new Map();
map.set('name', 'John');
map.set('age', 25);

console.log(map.get('name')); // John

• Set:

const set = new Set([1, 2, 3, 3]); // duplicates are ignored
set.add(4);

console.log(set.has(3)); // true
console.log(set.size); // 4

---

These ES6 features significantly improve the readability, maintainability, and functionality of JavaScript code.