ES6 Features Part-1

#javascript #webdev #react #beginners

Block-scoped variables

Variables that are declared with the let or const keywords are block-scoped.
It allow us to declare variables within a block, such as a loop or an if statement, which are only accessible within that block.
This can be useful for preventing naming collisions and for keeping variables local to a specific block of code.
The let keyword is used to declare block-scoped variables that can be reassigned.

function myFunction() {
  let x = 5; // block-scoped variable
  if (true) {
    let x = 10; // another block-scoped variable with the same name
    console.log(x); // 10
  }
  console.log(x); // 5
}

In the above example, there are two block-scoped variables with the same name x. The inner variable is only accessible within the if statement block, and the outer variable is only accessible within the myFunction block. This prevents any naming collisions between the two variables.

The const keyword is used to declare block-scoped variables that cannot be reassigned.
```
function myFunction() {
  const x = 5; // block-scoped variable that cannot be reassigned
  if (true) {
    const x = 10; // another block-scoped variable with the same name
    console.log(x); // 10
  }
  console.log(x); // 5
}
```
In this example, both x variables are constants, which means that they cannot be reassigned. This can be useful for defining values that should not change within a block of code, such as a mathematical constant.
block-scoped variables provide more flexibility and control over variable scope and can help to prevent naming collisions and bugs in your code.

Arrow Function

Arrow functions are a shorthand way to define functions in JavaScript.
Arrow functions have a more concise syntax than traditional function expressions and can be more readable in certain situations.
To define an arrow function, you can use the arrow (=>) notation, which consists of the parameter list (if any) and the function body.

The basic syntax for an arrow function is:

(parameter1, parameter2, ..., parameterN) => { statements }

An arrow function that takes two parameters and returns their sum:
```
const sum = (a, b) => {
  return a + b;
};
```
If the function body contains only a single expression, you can omit the curly braces and the return keyword, and the expression will be automatically returned.
```
const sum = (a, b) => a + b;
```
Arrow functions also have a shorter syntax when the function takes only one parameter.
```
const square = x => x * x;
```
NOTE: Arrow functions have some important differences from traditional function expressions. One of the most significant differences is that arrow functions do not have their own this keyword.
they inherit the this value from the enclosing context.

Template literals

It provides a more concise and expressive way to define string literals in JavaScript.
It allows you to embed expressions and variables directly in a string by using backticks (`) instead of single or double quotes.
To define a template literal, you can use the backtick notation and enclose the expression or variable in ${}.

javascript const name = 'Aman'; const message =Hello, ${name}!; console.log(message); // prints "Hello, Aman!"

Destructuring

It allows you to extract individual values from an array or object and assign them to variables using a shorthand syntax.
Array destructuring allows you to extract values from an array and assign them to variables using a square bracket notation.
For example, the following code extracts the first two values from an array and assigns them to the a and b variables

javascript const arr = [1, 2, 3, 4, 5]; const [a, b] = arr; console.log(a); // prints 1 console.log(b); // prints 2
Object destructuring allows you to extract values from an object and assign them to variables using a curly bracket notation.
For example, the following code extracts the name and age properties from an object and assigns them to the name and age variables

javascript const person = { name: 'Aman', age: 30, gender: 'male' }; const { name, age } = person; console.log(name); // prints "Aman" console.log(age); // prints 30
Destructuring also allows you to provide default values for variables in case the value being destructured is undefined.

javascript const person = { name: 'Aman', gender: 'male' }; const { name, age = 18 } = person; console.log(name); // prints "Aman" console.log(age); // prints 18

In this example, the age variable is assigned a default value of 18 using the = operator.