JavaScript ES6

Overview.

ECMAScript 2015, also known as ES6, was a major update to the JavaScript language. It introduced several new features that make it more powerful and expressive.

One of the most significant changes in ES6 was the introduction of class syntax. Classes provide a more intuitive way to create objects with properties and methods, and are based on JavaScript's existing prototype-based inheritance. They offer a simpler syntax and make object-oriented programming in JavaScript more approachable.

Arrow functions were also introduced in ES6, providing a concise way to write functions. They are especially useful for writing callback functions or with higher-order functions like map, reduce, and filter.

Destructuring assignments are another addition to ES6, which allow you to extract values from arrays or objects and assign them to variables in a readable way. Additionally, the let and const keywords were introduced to provide new ways to declare variables in JavaScript, offering more control over scope and preventing accidental reassignment.

Other new features introduced in ES6 include template literals, which enable embedding expressions inside string literals, and the spread operator, which allows you to spread the elements of an array or object into another array or object.

Overall, ES6 greatly enhanced the JavaScript language, making it more expressive and efficient for developers.

Arrow functions:

// Normal function
function multiply(a, b) {
  return a * b;
}

// Arrow function
const multiply = (a, b) => a * b;

`let` and `const` keywords:

let count = 0;
count = 1;

const name = "John";
name = "Jane"; // TypeError: Assignment to constant variable.

Template literals:

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

Destructuring:

const person = {
  name: "John",
  age: 30,
  gender: "male",
};

// Destructuring assignment
const { name, age, gender } = person;
console.log(name, age, gender);

Spread operator:

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

const arr3 = [...arr1, ...arr2];
console.log(arr3);

Rest parameter:

function sum(...nums) {
  return nums.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3));
console.log(sum(4, 5, 6, 7, 8));

Default parameter:

function greet(name = "John") {
  console.log(`Hello ${name}!`);
}

greet(); // "Hello John!"
greet("Jane"); // "Hello Jane!"

`class` keyword:

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

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

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