Family Magazine

Rest Pattern and Parameters in Javascript

By Geoff Griffiths @mmatraining1980

https://www.udemy.com/course/the-complete-javascript-course/learn/lecture/22648543#learning-tools

I asked Chat GPT to explain the rest pattern and parameters in JS to me, like I was 11, and to add some welsh slang:

“Alright, kiddo, let’s chat about Rest Pattern and Parameters in JavaScript, tidy la?

It’s like when you’re at a sweet shop, and they’ve got all these fab sweets – Choc bars, bonbons, chewy toffees, and so on. But you don’t want to pick ’em all up one by one, do you? That’d take ages, innit? Instead, you want to scoop ’em up all at once, don’t you?

Well, in JavaScript, we’ve got this clever trick called the Rest Pattern. It’s like that sweetie scoop. Instead of grabbing arguments one by one, you can grab all of them at once. You can see this Rest Pattern when you see ‘…’ before a variable, like this: function fun(...args) { }. The ‘args’ here is like our sweetie bag, it’s holding all the arguments that were scooped up.

Now, these Rest Parameters, they’re proper tidy! Because all those arguments are now in one bag (or in an array, as we say in JavaScript), you can do things to the whole lot of them at once – like adding, subtracting, or whatever else you fancy.

So, remember, next time you want to scoop up a load of arguments in one go, the Rest Pattern and Parameters are your best mates, alright? Proper job, bach!”

Here’s some notes from medium and geekforgeeks

The rest parameter, introduced in ES2015 or ES6, provides an enhanced method to handle function parameters. This makes it easier to manage a varying number of inputs as parameters in a function. A rest parameter lets us represent an indefinite number of arguments as an array, meaning a function can be called with any number of arguments, regardless of its original definition.

The syntax looks like this:

// '...' represents the rest parameter
function functionname(...parameters) {
  // function statement;
}


Notice when ‘…’ is at the end of the function parameters, it’s recognized as the rest parameter and stores any number of parameters as an array.

For example, let’s say we have a function without a rest parameter:

function fun(a, b){
    return a + b;
}
console.log(fun(1, 2)); // Outputs: 3
console.log(fun(1, 2, 3, 4, 5)); // Outputs: 3 

In this case, we can pass more arguments than defined parameters without causing errors. However, only the first two arguments are evaluated. The rest parameter changes this by allowing us to collect any number of arguments into an array:

// Example using the rest parameter
function fun(...input){
    let sum = 0;
    for(let i of input){
        sum += i;
    }
    return sum;
}
console.log(fun(1,2)); // Outputs: 3
console.log(fun(1,2,3)); // Outputs: 6
console.log(fun(1,2,3,4,5)); // Outputs: 15 

Now, every argument is included when we call the ‘fun()’ function. The sum of all array elements is calculated using the ‘for..of’ loop.

Remember, the rest parameter must always be the last argument in a function, as it collects all remaining arguments into an array.

Here’s an example where the rest parameter is used with other arguments:

function fun(a,b,...c){
    console.log(`${a} ${b}`);
    console.log(c);
    console.log(c[0]);
    console.log(c.length);
    console.log(c.indexOf('Lionel'));
}
fun('Mukul','Latiyan','Lionel','Messi','Barcelona');

Output:





In this example, the rest parameter is passed as the third parameter. The first two arguments are treated normally, while the rest are collected by the rest parameter. Because the rest parameter produces an array, we can apply array methods provided by JavaScript.


Back to Featured Articles on Logo Paperblog