Briefly
Deprecated way to get all values passed to a function when called in the form of an array-like object. Used in functions that accept an arbitrary number of arguments.
Does not work in arrow functions.
Example
A function that accepts an arbitrary number of arguments, selects only strings from them, and concatenates them with a space:
function joinStrings() { const strings = [] for (let i = 0; i < arguments.length; i++) { if (typeof arguments[i] === 'string') { strings.push(arguments[i]) } } return strings.join(' ')}const result = joinStrings('hello', 12, 'world', false, null)console.log(result)// hello worldfunction joinStrings() { const strings = [] for (let i = 0; i < arguments.length; i++) { if (typeof arguments[i] === 'string') { strings.push(arguments[i]) } } return strings.join(' ') } const result = joinStrings('hello', 12, 'world', false, null) console.log(result) // hello world
How to Understand
arguments is available in all types of functions, except for arrow functions.
arguments is an array-like object, its elements can be accessed by index, it has a length property, but arguments does not have other array methods, such as push or filter.
The array-like nature of the object allows you to iterate over its elements using a loop.
In practice
Advice 1
🛠 Sometimes you need to create a handler function for an existing event. In this case, you may not need all the leading parameters. For example, from three parameters, only the second and third are needed. To avoid annoying warnings from the linter about the unused first parameter, you can use the rest parameter syntax, plus array destructuring:
function myHandler(...[, second, third]) { console.log(`Second parameter = ${second}`) console.log(`Third parameter = ${third}`)}myHandler(1, 2, 3)// Second parameter = 2// Third parameter = 3function myHandler(...[, second, third]) { console.log(`Second parameter = ${second}`) console.log(`Third parameter = ${third}`) } myHandler(1, 2, 3) // Second parameter = 2 // Third parameter = 3
Advice 2
🛠 In the new code, it is better to use the syntax of rest parameters. In this case, we get a real array of passed arguments. Here is how the example from the beginning of the article will look in this syntax:
function joinStrings(...rest) { return rest .filter(function (value) { return typeof value === 'string' }) .join(' ')}const result = joinStrings('hello', 12, 'world', false, null)console.log(result)// hello worldfunction joinStrings(...rest) { return rest .filter(function (value) { return typeof value === 'string' }) .join(' ') } const result = joinStrings('hello', 12, 'world', false, null) console.log(result) // hello world