Athreya aka Maneshwar

Posted on Apr 20 • Edited on Sep 28

JavaScript Rest Parameters: Because Sometimes You Just Need More Args

#programming #webdev #javascript #beginners

Hello, I'm Maneshwar. I'm working on FreeDevTools online currently building **one place for all dev tools, cheat codes, and TLDRs* — a free, open-source hub where developers can quickly find and use tools without any hassle of searching all over the internet.

Ever found yourself writing a function and thinking, “I don’t know how many arguments this will need... maybe 2, maybe 20?” Well, JavaScript has your back with something called rest parameters.

They're like a magic bag that scoops up all the leftover arguments into a neat array.

Let’s dive into what they are, how to use them, and why they’re awesome.

No pizza arguments here—just code
.

The Basics

Rest parameters use the ... syntax to gather extra arguments passed to a function into an array.

function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3));    // 6
console.log(sum(1, 2, 3, 4)); // 10

You can pass in as many arguments as you like, and the function just gobbles them all up.

Syntax Rules (AKA the Fine Print)

Only one rest parameter is allowed.
It must be the last parameter.
No default values or trailing commas allowed after it.

This is valid:

function logThings(a, b, ...others) {
  console.log(others);
}

This will scream at you:

function wrong1(...one, ...two) {}     
function wrong2(...rest, next) {}      
function wrong3(...stuff,) {}          
function wrong4(...stuff = []) {}

How It Works

Let’s look at a simple example:

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five");

Console output:

a one
b two
manyMoreArgs [ 'three', 'four', 'five' ]

Even if you don’t pass extra values, manyMoreArgs is still a real array:

myFun("one", "two"); 
// manyMoreArgs -> []

Only pass one extra?

myFun("one", "two", "three"); 
// manyMoreArgs -> [ "three" ]

Counting Arguments with Rest

Since rest parameters are just arrays, you can easily use .length:

function fun1(...theArgs) {
  console.log(theArgs.length);
}

fun1();         
fun1(42);       
fun1(1, 2, 3);

Combine with Regular Params

You can mix normal parameters with rest ones. Example:

function multiply(multiplier, ...theArgs) {
  return theArgs.map((num) => multiplier * num);
}

console.log(multiply(2, 10, 20, 30));

Rest vs `arguments` (Aka The Old Way)

You could use the arguments object… but it's kinda stuck in the past.

function oldWay() {
  const args = Array.from(arguments);
  console.log(args.sort());
}

But arguments is not a real array, so this won’t work:

function nope() {
  arguments.sort();  
}

With rest parameters, you’re already working with a real array:

function sortArgs(...args) {
  return args.sort();
}

console.log(sortArgs(5, 3, 7, 1));

Destructuring Rest Params

You can even destructure them, skipping the first few values:

function ignoreFirst(...[, b, c]) {
  return b + c;
}

console.log(ignoreFirst(10, 20, 30)); // 50

TL;DR

✅ Use ...rest when you don’t know how many arguments you’ll get

✅ It's a clean, modern alternative to the arguments object

✅ Works great with array methods like map, sort, forEach

❌ Only one rest param per function

❌ It must come last

I’ve been building FreeDevTools.

A collection of UI/UX-focused tools crafted to simplify workflows, save time, and reduce friction in searching tools/materials.

Any feedback or contributors are welcome!

It’s online, open-source, and ready for anyone to use.

👉 Check it out: FreeDevTools
⭐ Star it on GitHub: freedevtools

Let’s make it even better together.

Top comments (4)

Nevo David • Apr 21

i think stuff like rest parameters is actually super helpful for me - makes me curious, you think the old way of grabbing function args ever made sense or was it always just awkward?