Top New Features in JavaScript ES6 You Need to Know💻

ECMAScript 6 (ES6), also known as ECMAScript 2015, introduced several new features to JavaScript that make the language more powerful and easier to use. Here are some key ES6 features along with examples:

• ECMAScript 2015 was the second major revision to JavaScript.

• This chapter describes the most important features of ES6.

1. Let and Const🔆

let and const are block-scoped variables, unlike var, which is function-scoped.

let x = 10;
const y = 20;

if (true) {
  let x = 30;
  const y = 40;
  console.log(x); // 30
  console.log(y); // 40
}

console.log(x); // 10
console.log(y); // 20

2. Arrow Functions🏹➡

Arrow functions provide a shorter syntax for writing functions and lexically bind the this value.

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

const square = n => n * n;
console.log(square(4)); // 16

3. Template Literals

Template literals allow embedding expressions inside string literals using backticks.

const name = "John";
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Hello, my name is John and I am 30 years old.

4. Default Parameters🥂

Default parameters allow setting default values for function parameters.

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

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

5. Destructuring Assignment

Destructuring assignment allows unpacking values from arrays or properties from objects into distinct variables.

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

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

6. Rest and Spread Operators ±±±

The rest operator (...) allows collecting all remaining elements into an array, while the spread operator allows spreading elements from an array.

// Rest operator
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

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

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

7. Classes🤨

ES6 introduces classes, which are syntactical sugar over JavaScript's existing prototype-based inheritance.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const john = new Person("John", 30);
console.log(john.greet()); // Hello, my name is John and I am 30 years old.

8. Promises🤝

Promises provide a 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!
});

9. Modules↔🔄

ES6 modules allow importing and exporting functionalities between different files.

// Exporting (in module.js)
export const greet = name => `Hello, ${name}!`;
export const farewell = name => `Goodbye, ${name}!`;

// Importing (in main.js)
import { greet, farewell } from './module.js';

console.log(greet('John')); // Hello, John!
console.log(farewell('John')); // Goodbye, John!

These features enhance JavaScript's functionality, making it more concise, readable, and easier to maintain.