[Go Make Things] Rest parameters in vanilla JavaScript

By rahmat hidayat

Wednesday, March 15, 2023

​

⏰🦉 Early Bird Sale! Today through Monday, get 40% off registration in the next session of the Vanilla JS Academy.

In JavaScript, a rest parameter is a function parameter that gets assigned an array with all of the arguments that are passed from that point on in a function.

You define a rest parameter by creating a parameter prefixed with .... Any arguments provided at or beyond the rest parameter on a function get combined into an array that's assigned to the rest parameter's name.

You can only have one rest parameter on a function. In the example below, ...moreArgs is a rest parameter.

function logStuff (arg1, arg2, ...moreArgs) {    	// Logs arg1  	console.log(arg1);    	// Logs arg2  	console.log(arg2);    	// Logs an array of any other arguments you pass in after arg2  	console.log(moreArgs);    }    // In this example...  // arg1 = 'chicken'  // arg2 = 'tuna'  // moreArgs = ['chips', 'cookie', 'soda', 'delicious']  logStuff('chicken', 'tuna', 'chips', 'cookie', 'soda', 'delicious');  

In yesterday's article on default function parameters, we looked at an add() function for adding numbers together.

/**   * Add two numbers together   * @param  {Number} num1 The first number   * @param  {Number} num2 The second number   * @return {Number}      The sum of both numbers   */  function add (num1, num2) {  	return num1 + num2;  }  

If you wanted to add two or more numbers together, you could use a rest parameter to capture all numbers passed in, regardless of how many there were.

Here's our add() function rewritten with a rest parameter.

function add (...nums) {    	// Set a starting total  	let total = 0;    	// Add each number to the total  	for (let num of nums) {  		total += num;  	}    	// Return to the total  	return total;    }  

Cheers,
Chris

​

Want to share this with others or read it later? View it in a browser.​

​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Unsubscribe from Daily Developer Tips.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+ Lintasme