Blog

Rest parameters and spread syntax

Both rest parameter and spread syntax in JavaScript programming were first introduced in ES6 ECMAScript 2015, and by defining them with proper syntax, rest and spread syntax can deal with parameter array object in the program. JavaScript programmers can apply rest parameter and spread syntax in multiple program contexts. Where rest parameter and spread are used to fulfill multiple programming purposes.

Rest parameter in JavaScript programming.

Rest parameter syntax in any JavaScript program allows programmers to display indefinite number of arguments in an array format. Rest parameter is used in JavaScript function definition to group and display all remaining function arguments created in a function in an array order.

Syntax of JavaScript rest parameter.

function functionName(…args) {

// Here in the JavaScript program the declare ‘args’ will be an array element of all arguments

}

….args – Here args … element is used to group and display all the remaining arguments created in the function in an array named args. Where the programmer can provide names to these arguments as per his wish.

Where the rest parameter should always be the last parameter in the current function definition.

Example of rest parameter in JavaScript.

Example of JavaScript basic rest parameter.

function total(…integer) {

return integer.reduce((value, int) => value + int, 1);

}

console.log(total(4, 9, 2, 7)); // Result – 23

console.log(total(3, 1, 8)); // Result – 13

console.log(total()); // Result – 1

Explanation of rest parameters.

Here in the function named total(), all the args are grouped into an integer array and displayed. Then here reduce() method is used to total all the integers.

Javascript rest parameters with other named parameters.

Rest parameters can be used with other named function parameters in a JavaScript function program, but they must be displayed at the end.

function displayCourse(prefix, …courses) {

console.log(prefix);

courses.forEach(course => console.log(course));

}

displayCourse(“Javascript”, “Python”, “CSS”, “Php”);

Explanation of rest parameters with other named parameters.

In this program prefix parameter is a regular function parameter, here …course displays all the arguments in the current function by grouping them into an array.

Rest parameters with JavaScript object or array.

function displayinfo(info, …values) {

console.log(info + ” ” + values.join(“, “));

}

displayinfo(“C++”, “Java”, “Python”, “Html”); // Result – C++, Java, Python, Html

Explanation of Rest parameters with JavaScript object or array.

Here displayinfo is a basic parameter argument in function, while values displays the remaining arguments by grouping them into an array.

Javascript spread syntax.

In JavaScript programming, spread syntax is used for a repeated task, such as separating the elements of an array or object and spreading them into multiple elements. Where the spread parameter works opposite to the rest parameter.

Syntax of spread in JavaScript.

let newArrayelement = […oldArray]; // This is an array spread element

let newObjectarray = {…oldObject}; // This object is the spread element

Here in spread syntax … a repeated element is extracted into its multiple elements or properties.

Example of spread syntax.

Program of array spread.

const arrayelement1 = [9, 8, 7, 4];

const arrayelement2 = […arrayelement1, 1, 2, 3, 4];

console.log(arrayelement2);

// Result –

[

9, 8, 7, 4,

1, 2, 3, 4

]

Explanation of spread syntax.

In this program, spread syntax …arrayelement1 inputs all array elements from arrayelement1 and stores them in arrayelement2.

JavaScript object spread.

const employee = { empname: “Siddhi”, age: 32 };

const newemployee = { …employee, city: “London”, contact:9414 };

console.log(newemployee);

// Result – { empname: ‘Siddhi’, age: 32, city: ‘London’, contact: 9414 }

Explanation of JavaScript object spread.

Here in this program, the spread syntax copies all the properties of the …employee, employee object to the new newemployee object, and you can also add new properties like contact elements.

Merging arrays in JavaScript.

const arrayelement1 = [9, 8, 7];

const arrayelement2 = [1, 3, 0];

const groupArrayelement = […arrayelement1, …arrayelement2];

console.log(groupArrayelement); // Result – [ 9, 8, 7, 1, 3, 0 ]

Explanation of Merging arrays in JavaScript.

Through the use of spread syntax in this program, programmers can create a new groupArrayelement by combining arrayelement1 and arrayelement2.

Copying an array or object in JavaScript.

const arrayelement = [9, 8, 7, 4];

const arrayCopy = […arrayelement];

console.log(arrayCopy); // Result – [ 9, 8, 7, 4 ]

const object = { name: “Vcahelpsu”, course:”javascript”, price: 999 };

const objectCopy = { …object };

console.log(objectCopy); // Result – { name: ‘Vcahelpsu’, course: ‘javascript’, price: 999 }

Explanation of Copying an array or object in JavaScript.

In this program, the spread syntax can be used to group an array or an object together and create a copy.

Javascript function arguments.

You can use spread syntax in JavaScript program to pass values of an array as separate arguments to a function which expects multiple function arguments at a time.

function add(p, q, r) {

return p + q + r;

}

const integer = [9, 2, 8];

console.log(add(…integer)); // Result is – 19

Explanation of JavaScript function arguments.

In this program, spread syntax spreads the elements of integer array as separate arguments to the add() function.

Combination of Rest and Spread syntax in JavaScript.

JavaScript programmers can apply both Rest and Spread syntax together in their program code, but here you have to apply it in some particular condition.

Example of Rest and Spread parameters together in JavaScript.

function countinteger(one, two, …remaning) {

const total = one + two + remaning.reduce((acc, integer) => acc + integer, 0);

console.log(total);

}

const integer = [7, 8, 9, 1, 4, 3];

countinteger(…integer); // Result is – 32

Explanation of Combination of Rest and Spread syntax.

When calling the above program function, the array integer is separated and divided into arguments. Firstly, two values 1 and 2 are applied to the first and second arguments, after which the remaining array elements (1, 4, 3) are grouped into other arguments and displayed.

Javascript Rest Parameters vs Spread Syntax

Explanation of Rest parameters and Spread syntax.

JavaScript Rest Parameter (…).

Used to group multiple arguments in a function declaration into a single array and display them in a program.

Function provides a method to manage functions with an unknown or variable number of arguments in a program.

JavaScript spread syntax (…).

Used to expand arrays or objects in function parameters into separate elements or properties.

Commonly used in function calls, array and object creation, and merge operations.