Ключове слово arguments

JavaScriptJunior~1 хв читання

Що таке `arguments`

arguments - це вбудований об'єкт, доступний всередині будь-якої звичайної функції (але не стрілкової). Він містить усі аргументи, передані в цю функцію під час виклику.

Приклад

javascript

function showArguments() {
  console.log(arguments);
}

showArguments("apple", 42, true);

Результат у консолі:

javascript

[Arguments] { '0': 'apple', '1': 42, '2': true }

Тобто arguments - це псевдомасив:

індекси (0, 1, 2, ...)
властивість length
але немає методів масиву (map, forEach тощо)

Доступ до аргументів

javascript

function sumAll() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

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

Тут ми не оголошуємо параметри, а просто беремо все, що передано, через arguments.

Відмінність від параметрів

javascript

function show(a, b) {
  console.log(a, b);
  console.log(arguments[0], arguments[1]);
}

show("x", "y");

// a,b → "x","y"
// arguments[0], arguments[1] → "x","y"

Вони збігаються, поки ви не змінюєте значення.

Зміни в `arguments` і параметрах (у звичайних функціях)

javascript

function demo(a) {
  console.log(a, arguments[0]); // 10, 10
  a = 20;
  console.log(a, arguments[0]); // 20, 20
}

demo(10);

У звичайних функціях arguments і параметри пов'язані - змінюється одне, змінюється й інше (але це не працює в строгому режимі ('use strict')).

У стрілкових функціях `arguments` немає

javascript

const arrow = () => {
  console.log(arguments); // ReferenceError
};

arrow(1, 2, 3);

Чому:

Стрілкові функції не створюють власного об'єкта arguments.
Якщо звернутися до нього - він буде взятий із зовнішньої функції, якщо вона є.

Альтернатива - оператор rest (`...`)

Сучасний і безпечний спосіб замість arguments - rest-параметри:

javascript

function sumAll(...args) {
  return args.reduce((sum, n) => sum + n, 0);
}

console.log(sumAll(1, 2, 3)); // 6

Переваги ...args перед arguments:

Це справжній масив (є .map, .filter, .reduce).
Працює у стрілкових функціях.
Без плутанини з "пов'язаними" значеннями.
Код виглядає чистіше і зрозуміліше.

Коротко запам'ятати

Властивість	`arguments`	`...rest`
Тип	Псевдомасив	Масив
Методи масиву (`map`, `forEach`)	Немає	Так
Доступний у стрілкових функціях	Немає	Так
Пов'язаний з параметрами	Так (у не-strict)	Немає
Сучасний спосіб	Застарілий	Рекомендований

Приклад для запам'ятовування

javascript

// Старий спосіб
function oldSum() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

// Новий спосіб
const newSum = (...nums) => nums.reduce((a, b) => a + b);

console.log(oldSum(1, 2, 3)); // 6
console.log(newSum(1, 2, 3)); // 6

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.