ES6 Features Part-1
Tags: javascript, beginners, react, webdev
Published: 2023-02-23 12:21:38

### 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.
    

```javascript
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.
    
    ```javascript
    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:
    
    ```javascript
    (parameter1, parameter2, ..., parameterN) => { statements }
    ```
    
* An arrow function that takes two parameters and returns their sum:
    
    ```javascript
    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.
    
    ```javascript
    const sum = (a, b) => a + b;
    ```
    
* Arrow functions also have a shorter syntax when the function takes only one parameter.
    
    ```javascript
    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.
    
* **<mark>Array destructuring</mark>** 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
    ```
    
* **<mark>Object destructuring</mark>** 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.
    

If you enjoyed this article and would like to read more, Be sure to [***<mark>Follow me</mark>***](https://dev.to/amansingh) for regular updates.