Rest(...) Parameters and Arguments Object in Javascript

We previously discussed the spread operator; today, we will discuss the rest parameters and their usage.

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript.

A function definition's last parameter can be prefixed with ..., which will cause all remaining (user-supplied) parameters to be placed within an Array object.

Syntax:

function func(a,b,...args){

}

A function definition can only have one rest parameter, and the rest parameter must be the last in the function definition.

function func(...a,...b){
// this is wrong,function definition can have only one rest parameter,
// rest parameter must be the last parameter
}

function demo(a,...args){
    console.log(a)
    console.log(args)
}
demo("a","b","c","d")

// output:- a
//         ['b','c','d']

The arguments Object

arguments is an array-like object accessible inside functions that contain the values of the arguments passed to that function.

Example:-

function demo(a,...args){
    console.log(a)
    console.log(args)
    console.log(arguments[2])
    console.log(arguments)
}

demo("a","b","c","d")
// output:- a
//         ['b','c','d'] 
//          c
//        [Arguments] { '0': 'a', '1': 'b', '2': 'c', '3': 'd' }

The arguments object is a local variable that is accessible from all non-arrow functions. You can use the arguments object to refer to a function's parameters within that function. It contains entries for each parameter passed to the function, with the first entry's index set to 0.

Rest parameters should be preferred in modern programming.

Each argument index can also be set or reassigned:

arguments[1] = "new value";

The difference between rest parameters and the arguments object:

There are three main differences between rest parameters and the arguments object:

• The arguments object is not a real array however, the rest of the parameters are Array objects, which means that methods like sort(), map(), forEach(), and pop() can be applied directly to them.

• The arguments object also has the (deprecated) callee attribute.

• The arguments object syncs its indices with the values of parameters in a non-strict function with simple parameters. When the named parameters are reassigned, the remainder parameter array's value is never updated.

• The rest parameter compresses all of the extra arguments into a single array, although there is no named argument defined before the...restParam. All of the parameters, including those in the...restParam array, are packaged into one array-like object in the arguments object.

Rest parameters were introduced to reduce the boilerplate code that was commonly used for converting a set of arguments to an array.

Before rest parameters, arguments need to be converted to a normal array before calling array methods on them:

The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

To convert arguments to an array of elements:

function demo(a, b, ...args) {
  const normalarray = Array.prototype.slice.call(arguments);
  console.log(normalarray);

  const na = [].slice.call(arguments);
  console.log(na);

  const arrayfromarguments = Array.from(arguments);
  console.log(arrayfromarguments);

  const first = normalarray.shift(); //gives the first element
  console.log(first);

  const f = arguments.shift();
  console.log(f) // error arguments is not a normal array so shift cannot  be performed
}

// output without last console
//output:- [ 'a', 'b', 'c', 'd' ]
// [ 'a', 'b', 'c', 'd' ]
// [ 'a', 'b', 'c', 'd' ]
// a

You can now simply access a standard array by using the rest parameter:

function demo(...args) {
  const normalarray = args;
  const first = normalarray.shift();
  console.log(normalarray);
  console.log(first);
}

//output:- [ 'b', 'c', 'd' ]
//         a

This was some insight about rest parameters and arguments object in javascript.