JavaScript ES6+

 JavaScript ES6+ 

1. Arrow Functions

Arrow functions provide a more concise way to write function expressions in JavaScript. They are particularly useful in React, especially when dealing with functional components and callback functions.

Syntax:

// Traditional Function function add(a, b) {     return a + b; } // Arrow Function const add = (a, b) => a + b;

 Key Points:

1. No function keyword: Replaced by an arrow (=>).
2. Implicit return: If the function body contains only one expression, the result is returned automatically without the return keyword.
3. Lexical this: Arrow functions do not have their own this; they inherit this from the surrounding scope. This is beneficial in React when working with callbacks.

2. Destructuring Assignment

Destructuring allows you to unpack values from arrays or properties from objects into distinct variables. This feature is heavily used in React to extract values from props and state.

Syntax for Arrays:

const numbers = [1, 2, 3];

const [first, second, third] = numbers;

console.log(first); // 1

Syntax for Objects:

const person = {

    name: 'John',

    age: 30

};

const { name, age } = person;

console.log(name); // John

Key Points:

1. Array Destructuring: Unpacks elements from an array based on their position.
2. Object Destructuring: Extracts properties from an object based on their names.

3. Spread and Rest Operators

The ... operator can either expand or collect values, depending on how it’s used.

1. Spread Operator: Expands an array or object into individual elements.
2. Rest Operator: Collects all remaining elements into an array.

Spread Operator Example:

const arr1 = [1, 2, 3];

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

Rest Operator Example:

function sum(...numbers) {

    return numbers.reduce((acc, curr) => acc + curr, 0);

}

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

Key Points:

1. Spread Operator (...): Used to split arrays/objects, and in React, it is often used to pass props or create new state objects.
2. Rest Operator (...): Used to gather arguments into an array, which is useful for working with variable numbers of function arguments.

4. Modules (Import/Export)

Modules allow you to break your code into smaller, reusable files. In React, each component typically resides in its own file and is imported where needed.

Exporting from a Module:

// utils.js

export const square = (x) => x * x;

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

Importing into Another File:

// main.js

import { square, add } from './utils';

console.log(square(4)); // 16

Default Export Example:

// math.js

export default function multiply(a, b) {

    return a * b;

}

// main.js

import multiply from './math';

console.log(multiply(2, 3)); // 6

Key Points:

1. Named Exports: You can export multiple functions, variables, or classes from a module.
2. Default Export: There can be only one default export per file. Importing a default export doesn't require curly braces.

5. Template Literals

Template literals allow you to embed expressions into strings, which is useful in React when you need to dynamically include variables in JSX.

Syntax:

const name = 'John';

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

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

Key Points:

1. Multiline Strings: You can write multiline strings easily.
2. Interpolation: Embed variables or expressions directly into strings using ${}.

6. Let and Const

The let and const keywords are used to declare variables in a block-scoped manner, replacing the older var keyword. They provide more control over variable mutation and scoping.

Let Example:

let x = 10;

x = 20; // Allowed

Const Example:

const y = 30;

y = 40; // Error: Assignment to constant variable

Key Points:

Let: Allows variable reassignment, but is block-scoped.

Const: Variables declared with const cannot be reassigned and are also block-scoped. However, for objects and arrays, the properties or elements can be changed.