Study modern JavaScript features introduced in ECMAScript 2015 (ES6) and later versions. These features include template literals, destructuring, modules, classes, and spread/rest operators.

Template Literals

Template literals allow for embedded expressions and multi-line strings. They are enclosed in backticks (`) rather than single or double quotes.

  let name = "Alice";
let age = 25;

// Embedded expressions
let message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message); // "Hello, my name is Alice and I am 25 years old."

// Multi-line strings
let multiLine = `This is a string
that spans multiple
lines.`;
console.log(multiLine);

Destructuring

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

Array Destructuring: 

  let [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// Skipping elements
let [first, , third] = [1, 2, 3];
console.log(first); // 1
console.log(third); // 3

Object Destructuring: 

  Copy code
let person = {
    name: "Bob",
    age: 30
};

let { name, age } = person;
console.log(name); // "Bob"
console.log(age);  // 30

// Assigning to new variable names
let { name: fullName, age: years } = person;
console.log(fullName); // "Bob"
console.log(years);    // 30

Modules

JavaScript modules allow you to export and import code between files, making it easier to organize and reuse code.

Exporting: 

  // file: math.js
export const PI = 3.14;
export function add(x, y) {
    return x + y;
}

Importing: 

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

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

Classes

Classes in JavaScript provide a more formal and syntactically clearer way to create objects and handle inheritance.

Basic Class: 

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

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

let person = new Person("Alice", 25);
person.greet(); // "Hello, my name is Alice"

Inheritance: 

  class Employee extends Person {
    constructor(name, age, jobTitle) {
        super(name, age);
        this.jobTitle = jobTitle;
    }

    describe() {
        console.log(`${this.name} is a ${this.jobTitle}`);
    }
}

let employee = new Employee("Bob", 30, "Developer");
employee.describe(); // "Bob is a Developer"

Spread/Rest Operators

The spread operator (…) allows you to expand an array or object into individual elements or properties. The rest operator (…) is used to collect multiple elements into an array.

Spread Operator: 

  let numbers = [1, 2, 3];
let moreNumbers = [...numbers, 4, 5];
console.log(moreNumbers); // [1, 2, 3, 4, 5]

let person = { name: "Alice", age: 25 };
let extendedPerson = { ...person, job: "Engineer" };
console.log(extendedPerson); // { name: "Alice", age: 25, job: "Engineer" }

Rest Operator: 

  function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

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

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]