← Назад к вопросам

Что принимает callback в map?

1.2 Junior🔥 181 комментариев
#JavaScript Core

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Полный размотр callback-функции метода map()

Метод Array.prototype.map() принимает callback-функцию в качестве первого обязательного аргумента. Эта функция вызывается для каждого элемента исходного массива. Давайте детально разберем все параметры, которые получает callback.

Синтаксис и параметры callback

Параметры callback-функции строго стандартизированы и передаются в определенном порядке:

arr.map(function callback(currentValue, index, array) {
    // Возвращаемое значение становится элементом нового массива
});

1. Текущий обрабатываемый элемент (currentValue)

Это основной параметр, который содержит значение текущего элемента массива на данной итерации.

const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
    return num * 2; // num - это currentValue
});
console.log(doubled); // [2, 4, 6]

2. Индекс текущего элемента (index)

Второй параметр - это числовой индекс текущего элемента в исходном массиве. Индекс начинается с 0.

const fruits = ['apple', 'banana', 'cherry'];
const indexed = fruits.map(function(fruit, idx) {
    return `${idx}: ${fruit}`;
});
console.log(indexed); // ['0: apple', '1: banana', '2: cherry']

3. Исходный массив (array)

Третий параметр содержит ссылку на весь исходный массив, над которым выполняется map(). Это полезно, когда нужно обратиться к другим элементам массива в процессе трансформации.

const numbers = [10, 20, 30];
const result = numbers.map(function(current, index, arr) {
    // Используем исходный массив для вычислений
    const nextValue = arr[index + 1] || 0;
    return current + nextValue;
});
console.log(result); // [30, 50, 30]

4. Необязательный четвертый параметр - thisArg

Хотя это не параметр callback, а второй аргумент самого метода map(), он влияет на контекст выполнения callback:

const multiplier = {
    factor: 3,
    multiply(x) {
        return x * this.factor;
    }
};

const numbers = [1, 2, 3];
const multiplied = numbers.map(
    function(num) {
        return this.multiply(num);
    },
    multiplier // thisArg становится значением this в callback
);
console.log(multiplied); // [3, 6, 9]

Особенности использования

  • Необязательность параметров: Можно использовать только первый параметр, если остальные не нужны:
[1, 2, 3].map(x => x * 2);
  • Стрелочные функции: Со стрелочными функциями thisArg игнорируется, так как они не имеют собственного this:
// this будет undefined в стрелочной функции
const result = [1, 2, 3].map(x => x * this.factor, multiplier);
  • Иммутабельность: Callback не должен мутировать исходный массив. Метод map() предназначен для трансформации без побочных эффектов.

  • Возвращаемое значение: Callback всегда должен возвращать значение, которое станет элементом нового массива. Если функция ничего не возвращает, в новый массив попадет undefined.

Практический пример со всеми параметрами

const products = [
    { id: 1, name: 'Laptop', price: 1000 },
    { id: 2, name: 'Phone', price: 500 },
    { id: 3, name: 'Tablet', price: 300 }
];

const discountedProducts = products.map(function(item, index, originalArray) {
    // Используем все три параметра
    const discount = index === originalArray.length - 1 ? 0.2 : 0.1; // Последний товар получает большую скидку
    return {
        ...item,
        price: item.price * (1 - discount),
        positionInCatalog: index + 1,
        totalItemsInCatalog: originalArray.length
    };
});

console.log(discountedProducts);
// [
//   {id: 1, name: 'Laptop', price: 900, positionInCatalog: 1, totalItemsInCatalog: 3},
//   {id: 2, name: 'Phone', price: 450, positionInCatalog: 2, totalItemsInCatalog: 3},
//   {id: 3, name: 'Tablet', price: 240, positionInCatalog: 3, totalItemsInCatalog: 3}
// ]

Ключевые выводы

  • Callback в map() всегда получает три параметра: значение элемента, его индекс и ссылку на исходный массив
  • Порядок параметров фиксирован и соответствует соглашениям JavaScript для методов итерации
  • thisArg (если передан) устанавливает контекст this внутри callback (кроме стрелочных функций)
  • Callback должен быть чистой функцией без побочных эффектов для корректной работы
  • Возвращаемое значение callback определяет содержимое нового массива

Понимание этих параметров критически важно для эффективного использования не только map(), но и других методов массива (filter(), reduce(), forEach()), которые следуют аналогичным соглашениям.

Что принимает callback в map? | PrepBro