REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Rest Parameters (...)

AI & DATA SCIENCE // rest-parameters

Rest parameters collect remaining function arguments into a real array. Uses the same ... syntax as spread but in a different context.

Syntax

function sum(first, ...rest) {
  return rest.reduce((a, b) => a + b, first);
}
sum(1, 2, 3, 4); // 10

Deep Dive Course

**Rest parameters** collect all remaining arguments into a real Array. They must be the **last parameter** in the function signature. Unlike the old `arguments` object, rest parameters are a true Array with all array methods, and they work in arrow functions.

1Understanding Rest Parameters (...)

Rest parameters collect all remaining arguments into a real Array. They must be the last parameter in the function signature. Unlike the old arguments object, rest parameters are a true Array with all array methods, and they work in arrow functions.

💡

Rest parameters replace the 'arguments' object. Use rest parameters in all new code.

editor.html

// Rest collects remaining arguments
function logMessages(level, ...messages) {
  messages.forEach(msg => {
    console.log(`[${level}] ${msg}`);
  });
}

logMessages('INFO', 'Server started', 'Listening on port 3000');

localhost:3000

2Practical Example

Here is a real-world application of Rest Parameters (...) showing how it is used in production JavaScript code.

editor.html

// Rest in arrow functions (unlike arguments!)
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4, 5)); // 15

// Destructuring with rest
const [first, second, ...remaining] = [1, 2, 3, 4, 5];
console.log(first, second, remaining); // 1 2 [3,4,5]

localhost:3000

3Best Practices

Follow these guidelines when working with Rest Parameters (...):

1. Rest must be the last parameter

2. Use rest instead of arguments for better clarity and arrow function support

3. Combine with regular params for the first few fixed arguments

⚠️

Tip: Rest parameters replace the 'arguments' object. Use rest parameters in all new code.

editor.html

// Rest collects remaining arguments
function logMessages(level, ...messages) {
  messages.forEach(msg => {
    console.log(`[${level}] ${msg}`);
  });
}

logMessages('INFO', 'Server started', 'Listening on port 3000');

localhost:3000

Examples

Example 01Basic Usage

// Rest collects remaining arguments
function logMessages(level, ...messages) {
  messages.forEach(msg => {
    console.log(`[${level}] ${msg}`);
  });
}

logMessages('INFO', 'Server started', 'Listening on port 3000');

Example 02Advanced Example

// Rest in arrow functions (unlike arguments!)
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4, 5)); // 15

// Destructuring with rest
const [first, second, ...remaining] = [1, 2, 3, 4, 5];
console.log(first, second, remaining); // 1 2 [3,4,5]

Best Practices

Rest must be the last parameter
Use rest instead of arguments for better clarity and arrow function support
Combine with regular params for the first few fixed arguments

Interview Question

What is the difference between rest parameters and the arguments object?▼

Hint: Array vs array-like, scope, arrow functions.

Rest parameters create a real ARRAY — you can use map(), filter(), reduce(), etc. The 'arguments' object is array-LIKE (has length and indices) but not a real Array — you'd need Array.from(arguments). Rest parameters work in arrow functions; arguments does not. Rest only collects 'remaining' params; arguments contains ALL arguments.

Exercises

MediumPractice using Rest Parameters (...) in a real scenario.

View Solution

// Rest collects remaining arguments
function logMessages(level, ...messages) {
  messages.forEach(msg => {
    console.log(`[${level}] ${msg}`);
  });
}

logMessages('INFO', 'Server started', 'Listening on port 3000');

Frequently Asked Questions

What is the difference between rest parameters and the arguments object?▼

Related Functions

Arguments-ParametersSpread OperatorArrow-Functions