# Day 8: ES6+ Features

Screenshot:-

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721491200445/e09cac8e-ba1f-4b5a-a862-4879e2e0f3e7.png align="center")

  
Introduction

ES6 (ECMAScript 2015) and subsequent versions introduced many powerful features to JavaScript, making it easier and more efficient to write code. Today, we will explore some of these features: template literals, destructuring, spread and rest operators, default parameters, and enhanced object literals.

### Activity 1: Template Literals

#### Task 1: String Interpolation with Template Literals

Template literals allow you to embed variables directly into strings using the `${}` syntax. This makes it much easier to create strings that include variables.

```javascript
const name = "John";
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Logs: "Hello, my name is John and I am 30 years old."
```

#### Task 2: Multi-line Strings with Template Literals

Template literals also make it easy to create multi-line strings

```javascript
const multiLineString = `This is a multi-line string.
It spans multiple lines.
Each line is preserved as it is.`;
console.log(multiLineString);
```

### Activity 2: Destructuring

#### Task 3: Array Destructuring

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

```javascript
const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers;
console.log(first); // Logs: 1
console.log(second); // Logs: 2
```

#### Task 4: Object Destructuring

```javascript
const book = {
  title: "The Catcher in the Rye",
  author: "J.D. Salinger",
  year: 1951,
};
const { title, author } = book;
console.log(title); // Logs: "The Catcher in the Rye"
console.log(author); // Logs: "J.D. Salinger"
```

### Activity 3: Spread and Rest Operators

#### Task 5: Spread Operator

The spread operator (`...`) allows you to spread out elements of an iterable (like an array) into a new array or to pass them as arguments to a function.

```javascript
const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4, 5];
console.log(newArray); // Logs: [1, 2, 3, 4, 5]
```

#### Task 6: Rest Operator

The rest operator (`...`) allows you to handle an arbitrary number of function arguments as an array.

```javascript
function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Logs: 10
```

### Activity 4: Default Parameters

#### Task 7: Function with Default Parameters

Default parameters allow you to set default values for function parameters.

```javascript
function multiply(a, b = 1) {
  return a * b;
}
console.log(multiply(5, 2)); // Logs: 10
console.log(multiply(5)); // Logs: 5 (since b defaults to 1)
```

### Activity 5: Enhanced Object Literals

### Task 8: Using Enhanced Object Literals

Enhanced object literals allow us to define methods and properties in a more concise way. Here’s how you can create an object with methods and properties using enhanced object literals:

```javascript
const name = "Alice";
const age = 30;

const person = {
  name,
  age,
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

console.log(person);
person.greet();
```

n this example:

* `name` and `age` are shorthand for `name: name` and `age: age`.
    
* The `greet` method is defined using shorthand syntax.
    

### Task 9: Creating an Object with Computed Property Names

Computed property names allow us to dynamically set property names using expressions. Here’s how you can create an object with computed property names based on variables:

```javascript
const propName1 = 'firstName';
const propName2 = 'lastName';

const user = {
  [propName1]: 'John',
  [propName2]: 'Doe',
  greet() {
    console.log(`Hello, my name is ${this[propName1]} ${this[propName2]}.`);
  }
};

console.log(user);
user.greet();
```

In this example:

* `[propName1]` and `[propName2]` use the values of `propName1` and `propName2` to create properties `firstName` and `lastName`.
    
* The `greet` method accesses these properties using the variables.