JavaScript ES6 Features

ES6 (ECMAScript 2015) introduced several powerful features that make JavaScript more modern and easier to work with. Below are some of the key features:

1. Let and Const

let: Block-scoped variable declaration, used for variables that can be reassigned.
const: Block-scoped variable declaration for variables that should not be reassigned.

2. Arrow Functions

A shorter syntax for writing functions. It lexically binds the this context, which is useful in callbacks.

3. Template Literals

Template strings that allow embedding expressions and multiline strings using backticks (`).

4. Destructuring Assignment

Simplifies extracting values from arrays or objects into distinct variables.

5. Default Parameters

Allows parameters to have default values if no value is passed.

6. Spread and Rest Operators

Spread (...): Expands an array or object into individual elements.
Rest (...): Collects all remaining elements into an array.

7. Classes

A syntactic sugar for constructor functions and prototype-based inheritance.

8. Promises

Provides a cleaner way to handle asynchronous operations.

9. Modules

ES6 introduced a native module system for importing and exporting code between files.

10. Enhanced Object Literals

Shorthand for defining properties and methods in objects.

These ES6 features greatly improve code readability, maintainability, and ease of use.

1let name = "John"; // Can be reassigned
2const age = 25; // Cannot be reassigned

1const add = (a, b) => a + b;

1const greeting = `Hello, ${name}!`;

1// Array destructuring
2const [x, y] = [1, 2];
3
4// Object destructuring
5const { name, age } = { name: 'John', age: 25 };

1function greet(name = 'Guest') {
2    return `Hello, ${name}`;
3}

1// Spread
2const arr = [1, 2, 3];
3const newArr = [...arr, 4, 5];
4
5// Rest
6function sum(...numbers) {
7    return numbers.reduce((a, b) => a + b, 0);
8}

1class Person {
2    constructor(name, age) {
3        this.name = name;
4        this.age = age;
5    }
6
7    greet() {
8        console.log(`Hello, my name is ${this.name}.`);
9    }
10}
11
12const john = new Person('John', 25);
13john.greet(); // Hello, my name is John.

1const fetchData = new Promise((resolve, reject) => {
2    setTimeout(() => resolve('Data fetched!'), 1000);
3});
4
5fetchData.then((data) => console.log(data)).catch((error) => console.error(error));

1// Exporting (file: math.js)
2export const add = (a, b) => a + b;
3
4// Importing (file: app.js)
5import { add } from './math';
6console.log(add(2, 3)); // 5

1const name = 'John';
2const person = {
3    name, // Shorthand for name: name
4    greet() { // Shorthand for greet: function() {}
5        console.log('Hello');
6    }
7};

# JavaScript ES6 Features