More Modern JS Concepts

 1. Spread Operator

The Spread Operator is used to unpack an iterable (e.g. an array, object, etc.) into individual elements.

1.1 Spread Operator with Arrays

1

2

3

4

let arr1 = [2, 3];

let arr2 = [1, ...arr1, 4];

console.log(arr2); // [1, 2, 3, 4]

JAVASCRIPT

1.1.1 Creating a Copy

1

2

3

4

let arr1 = [2, 3];

let arr2 = [...arr1];

console.log(arr2); // [2, 3]

JAVASCRIPT

1.1.2 Concatenation

1

2

3

4

5

let arr1 = [2, 3];

let arr2 = [4, 5];

let arr3 = [...arr1, ...arr2];

console.log(arr3); // [2, 3, 4, 5]

JAVASCRIPT

1.2 Spread Operator with Objects

1

2

3

4

let person = { name: "Rahul", age: 27 };

let personDetails = { ...person, city: "Hyderabad" };

console.log(personDetails); // Object {name: "Rahul", age: 27, city: "Hyderabad"}

JAVASCRIPT

1.2.1 Creating a Copy

1

2

3

4

let person = { name: "Rahul", age: 27 };

let personDetails = { ...person };

console.log(personDetails); // Object {name: "Rahul", age: 27}

JAVASCRIPT

1.2.2 Concatenation

1

2

3

4

5

let person = { name: "Rahul", age: 27 };

let address = { city: "Hyderabad", pincode: 500001 };

let personDetails = { ...person, ...address };

console.log(personDetails); // Object {name: "Rahul", age: 27, city: "Hyderabad", pincode: 500001}

JAVASCRIPT

1.3 Spread Operator with Function Calls

The Spread Operator syntax can be used to pass an array of arguments to the function. Extra values will be ignored if we pass more arguments than the function parameters.

1

2

3

4

5

6

function add(a, b, c) {

return a + b + c;

}

let numbers = [1, 2, 3, 4, 5];

console.log(add(...numbers)); // 6

JAVASCRIPT

Try out the spread operator with arrays, objects, and function calls in the JavaScript Code Playground.

2. Rest Parameter

With Rest Parameter, we can pack multiple values into an array.

1

2

3

4

5

function numbers(...args) {

console.log(args); // [1, 2, 3]

}

numbers(1, 2, 3);

JAVASCRIPT

2.1 Destructuring arrays and objects with Rest Parameter Syntax

2.1.1 Arrays

1

2

3

4

5

let [a, b, ...rest] = [1, 2, 3, 4, 5];

console.log(a); // 1

console.log(b); // 2

console.log(rest); // [3, 4, 5]

JAVASCRIPT

2.1.2 Objects

1

2

3

4

5

6

7

8

let { firstName, ...rest } = {

firstName: "Rahul",

lastName: "Attuluri",

age: 27

};

console.log(firstName); // Rahul

console.log(rest); // Object {lastName: "Attuluri", age: 27}

JAVASCRIPT

Note

The Rest parameter should be the last parameter.

1

2

3

4

5

6

function numbers(a, b, ...rest) {

console.log(a); // 1

console.log(b); // 2

console.log(rest); // [3, 4, 5]

}

numbers(1, 2, 3, 4, 5);

JAVASCRIPT

1

2

3

4

5

6

function numbers(a, ...rest, b) {

console.log(a);

console.log(rest);

console.log(b);

}

numbers(1, 2, 3, 4, 5); // Uncaught SyntaxError: Rest parameter must be last formal parameter

JAVASCRIPT

3. Functions

3.1 Default Parameters

The Default Parameters allow us to give default values to function parameters.

1

2

3

4

5

6

function numbers(a = 2, b = 5) {

console.log(a); // 3

console.log(b); // 5

}

numbers(3);

JAVASCRIPT

Try out the Rest Parameter and Default Parameters in the JavaScript Code Playground.

4. Template Literals (Template Strings)

The Template Literals are enclosed by the backticks.

They are used to: 1. Embed variables or expressions in the strings 2. Write multiline strings

We can include the variables or expressions using a dollar sign with curly braces

${ }

.

1

2

3

let firstName = "Rahul";

console.log(`Hello ${firstName}!`); // Hello Rahul!

JAVASCRIPT

Try out including the variables, expressions, and multiline strings using the Template Literals in the JavaScript Code Playground.