The ...spread operator and the rest parameters

Avinesh — Tue, 15 Dec 2020 09:49:13 +0000

Spread operator

As the name suggests the spread operator spreads or expands an iterable such as an array or string into individual elements.

Few use cases

Adding elements of one array to new array.
Passing an array as argument to a function.
Array concatenation.
Array copy.

Adding elements of one array to new array

var arr1 = [3,4,5];
var arr2 = [1,2,...arr1,6,7];
console.log(arr2); // output -> [1,2,3,4,5,6,7]

Passing an array as argument to a function

function addAll(a,b,c,d){
console.log(a+b+c+d); // output -> 10
}
var arr = [1,2,3,4];
addAll(...arr);

Array concatenation

var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1 = [...arr1,...arr2];
console.log(arr1); // output -> [1,2,3,4,5,6]

Array copy

var arr1 = [1,2,3,4];
var arr2 = [...arr1];
console.log(arr2); // output -> [1,2,3,4]

Rest parameters

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

function findProduct(...args){
var result = 1;
args.map((arg)=>{
result = result * arg;
});
return result;
}

console.log(findProduct(2,4,6)); // output -> 48

Points to take away

Spread operator unpacks an iterable into individual elements.
Rest parameter collects multiple individual elements and packs them into an array.

Functions: The bread and butter of JavaScript programming

Avinesh — Sat, 12 Dec 2020 18:52:11 +0000

Function

A function in JavaScript is a piece of code contained within a block with a name associated to it. These are building blocks for almost every program that one tends to write. In simple words a function is a subprogram which is capable of performing a specific task.

There are a couple of ways by which we can create a function in JavaScript and we will go through each one them.

Function declaration

To create a function using function declaration you must use the function keyword followed by a name, followed by parenthesis which can have zero to any number of parameters and then followed by a pair of curly braces which holds the code to be executed.
Note: Function declarations are hoisted.

function square(x){
return x*x;
}

Function expression

To create a function using function expression you must follow the same steps as function declaration but you assign the function to a variable with a name which is the name of the function.
Note: Function expressions are not hoisted.

const square = function(x){
return x*x;
}

Arrow functions

These were introduced in ES6. Arrow functions helps you write shorter syntax by omitting the function keyword and replacing it with an arrow (=>) symbol which is made up of an equal to and a greater than symbol.

const square = (x) => { return x*x; }

Just in case if there is only one parameter then you can even omit the parenthesis. If there is only a single expression to be returned then you can even omit the curly braces and the return keyword.
Note: There is a difference between an expression and a statement.

const square = x => x*x;

Points to take away

Function declaration is declared as a separate statement.
Function expression is a part of another expression or a syntax.
Arrow functions are handy for one-liners.

Reference: Eloquent JavaScript

DEV Community: Avinesh

The ...spread operator and the rest parameters

Spread operator

Few use cases

Adding elements of one array to new array

Passing an array as argument to a function

Array concatenation

Array copy

Rest parameters

Points to take away

Functions: The bread and butter of JavaScript programming

Function

Function declaration

Function expression

Arrow functions

Points to take away