Почему [‘1’, ‘7’, ’11’].map(parseInt) возвращает [1, NaN, 3] в Javascript?

Javascript — странный. Не верите? Ну попробуйте тогда преобразовать массив строк в целые числа с помощью map и parseInt. Запустите консоль (F12 на Chrome), вставьте код ниже и нажмите Enter

[‘1’, ‘7’, ’11’].map(parseInt);

Вместо ожидаемого массива целых чисел [1, 7, 11] мы получаем [1, NaN, 3]. Но как так? Чтобы узнать в чём тут дело, сначала нам придётся поговорить о некоторых базовых концепциях Javascript. Если вам нужен TL;DR, пролистывайте статью до самого конца.


Правдивость и ложность

Вот простой оператор if-else в Javascript:

if (true) {
// всегда выполняется
} else {
// не выполняется никогда
}

В этом случае условие оператора всегда истинно, поэтому блок if всегда выполняется, а блок else всегда игнорируется. Это тривиальный пример, потому что true — булев тип. Что тогда если мы поставим не булево условие?

if («hello world») {
// выполнится это?
console.log(«Условие истинно»);
} else {
// или это?
console.log(«Условие ложно»);
}

Попробуйте запустить этот код в консоли разработчика. Вы должны увидеть «Условие истинно», так как строка «hello world» воспринимается как true.

Каждый объект в Javascript воспринимается либо как true, либо как false. При размещении в логическом контексте, таком как оператор if-else, объекты рассматриваются как true или false на основе их «истинности». Какие же объекты истинны, а какие ложны? Действует простое правило:

Все значения являются истинными, за исключением: false, 0, «» (пустая строка), null, undefined, и NaN.

Контр интуитивно это означает, что строка «false», строка «0», пустой объект {} и пустой массив [] — правдивы. Вы можете убедиться в этом самостоятельно, передав функции Boolean любой из объектов выше (например, Boolean(«0»);).

Но для наших целей просто достаточно помнить, что 0 это ложь.

Основание системы счисления
0 1 2 3 4 5 6 7 8 9 10

Когда мы считаем от нуля до девяти, мы используем разные символы для каждого из чисел (0-9). Однако, как только мы достигаем десяти, нам нужны два разных символа (1 и 0) для представления числа. Это связано с тем, что мы используем десятичную систему счисления.

Основание — наименьшее число, которое не представить только одним символом. У различных систем счисления разные основания, и поэтому, одни и те же цифры могут обозначать разные числа.

DECIMAL BINARY HEXADECIMAL
RADIX=10 RADIX=2 RADIX=16
0 0 0
1 1 1
2 10 2
3 11 3
4 100 4
5 101 5
6 110 6
7 111 7
8 1000 8
9 1001 9
10 1010 A
11 1011 B
12 1100 C
13 1101 D
14 1110 E
15 1111 F
16 10000 10
17 10001 11

Например, цифры 11 обозначают разные числа в этих трёх системах счисления. Для двоичной — это число 3. Для шестнадцатеричной — это число 17.

Внимательный читатель вероятно заметил что код с parseInt возвращает 3, когда вход равен 11, что соответствует двоичному столбцу из таблицы выше.

Аргументы функции

Функции в Javascript можно вызывать с любым числом аргументов, даже если их количество в сигнатуре отлично. Отсутствующие параметры рассматриваются как неопределенные, а дополнительные просто игнорируются (но хранятся в похожем на массив объекте arguments object).

function foo(x, y) {
console.log(x);
console.log(y);
}

foo(1, 2); // выводит 1, 2
foo(1); // выводит 1, undefined
foo(1, 2, 3); // выводит 1, 2

map()

Мы почти у цели!

Map — это метод в прототипе массива, который возвращает новый массив из результатов вызова функции для каждого элемента исходного массива. Например, следующий код умножает каждый элемент массива на 3:

function multiplyBy3(x) {
return x * 3;
}

const result = [1, 2, 3, 4, 5].map(multiplyBy3);

console.log(result); // выводит [3, 6, 9, 12, 15];

Теперь предположим, что я хочу вывести каждый элемент используя map() (и не используя return). Можно просто передать console.log в качестве аргумента в map() … правильно?

[1, 2, 3, 4, 5].map(console.log);

Происходит что-то странное. Вместо того чтобы выводить только значение, каждый вызов console.log выводит индекс и массив полностью.

[1, 2, 3, 4, 5].map(console.log);

// эквивалентно:
[1, 2, 3, 4, 5].map(
(val, index, array) => console.log(val, index, array)
);

// и НЕ эквивалентно:
[1, 2, 3, 4, 5].map(
val => console.log(val)
);

При передаче функции в map() на каждой итерации она будет получать три аргумента: currentValue, currentIndex и полный array. Вот почему при каждой итерации выводятся три записи.

Теперь у нас есть всё что нужно для раскрытия тайны.

Всё вместе

ParseInt принимает два аргумента: string и radix (основание). Если переданный radix является ложным, то по умолчанию устанавливается в 10.

parseInt(’11’); => 11
parseInt(’11’, 2); => 3
parseInt(’11’, 16); => 17

parseInt(’11’, undefined); => 11 (radix ложен)
parseInt(’11’, 0); => 11 (radix ложен)

Давайте рассмотрим этот пример шаг за шагом.

[‘1’, ‘7’, ’11’].map(parseInt); => [1, NaN, 3]

// Первая итерация: val = ‘1’, index = 0, array = [‘1’, ‘7’, ’11’]

parseInt(‘1’, 0, [‘1’, ‘7’, ’11’]); => 1

Так как 0 является ложным, то для основания устанавливается значение по умолчанию — 10. parseInt() принимает только два аргумента, поэтому третий аргумент [‘1’, ‘7’, ’11’] игнорируется. Строка ‘1’ по основанию 10 даст результат 1.

// Вторая итерация: val = ‘7’, index = 1, array = [‘1’, ‘7’, ’11’]

parseInt(‘7’, 1, [‘1’, ‘7’, ’11’]); => NaN

В системе по основанию 1 символа ‘7’ не существует. Как и в случае с первой итерацией, последний аргумент игнорируется. Таким образом parseInt() возвращает NaN.

// Третья итерация: val = ’11’, index = 2, array = [‘1’, ‘7’, ’11’]

parseInt(’11’, 2, [‘1’, ‘7’, ’11’]); => 3

В двоичной системе счисления ’11’ относится к числу 3. Последний аргумент вновь игнорируется.

Итог (TL;DR)

[‘1’, ‘7’, ’11’].map(parseInt) не работает как было задумано, потому что map передает три аргумента в parseInt() на каждой итерации. Второй аргумент index передается в parseInt в качестве параметра radix (основание системы счисления). Таким образом, каждая строка в массиве анализируется с использованием недефолтного основания. ‘7’ анализируется по основанию 1, что даёт NaN; ’11’ анализируется как двоичное число — итог 3. ‘1’ анализируется по дефолтному основанию 10, потому что его индекс 0 является ложным.

А вот код, который будет работать так, как мы хотели:

[‘1’, ‘7’, ’11’].map(numStr => parseInt(numStr));

Оставить комментарий