Не позволяйте ленивым оценкам сбивать с толку ваш код ведения журнала JavaScript

Начнем с простого. Вот фрагмент кода JavaScript, который создает небольшой массив чисел, а затем изменяет его. Массив записывается в консоль как до, так и после изменения:

const numbers = [2, 3, 4, 5];
console.log(numbers);
// Square the numbers
for (let i = 0; i<numbers.length; i++) {
    numbers[i] = numbers[i]**2;
}
console.log(numbers);

При более осторожном подходе для обработки массива будет использоваться Array.map() вместо цикла for...of. (Таким образом, ваши изменения будут применены неразрушающим образом к новому массиву.) Но есть причина, по которой я выбрал этот подход. Он демонстрирует первый пример некой надоедливой причуды в консоли разработчика.

Чтобы увидеть проблему в действии, откройте эту страницу в браузере на базе Chromium (например, Chrome или Edge), затем откройте консоль разработчика и затем разверните списки массивов в журнале. Вы увидите два массива, но оба они будут экземплярами измененного массива:

Почему так происходит? Если окно консоли закрывается во время выполнения кода и вы регистрируете объект, срабатывает шаблон ленивого вычисления. Ваша команда console.log() фактически записывает ссылку в массив. В интересах экономии памяти и оптимизации производительности Chrome не пытается извлечь информацию из массива, пока вы не развернете ее в консоли, то есть после того, как она будет преобразована в окончательную форму.

Есть много способов обойти эту проблему. Откройте консоль перед загрузкой страницы. Или явно преобразуйте массив в строку, когда вы его регистрируете, потому что строки не будут использовать ленивую оценку:

console.log(numbers.toString());

И на этом проблема должна быть решена. Но это не так.

Ситуация ухудшается, если у вас есть массив, содержащий объекты. Рассмотрим следующий пример, в котором создается массив с двумя буквальными объектами, каждый из которых представляет человека. Он регистрирует массив до и после изменения одного из объектов:

const objects = [ {name: 'Sadie', age: 12},
                  {name: 'Patrick', age: 18}];
console.log(objects);
objects[0].age = 14;
console.log(objects);

На этот раз не имеет значения, открыто ли окно консоли во время выполнения кода. Даже если массив не вычисляется лениво, объекты внутри него оцениваются. Разверните их, и вы получите тот же результат, что и раньше - две записи журнала с одним и тем же измененным объектом. Попробуй.

Как решить эту проблему? Вы можете преобразовать массив в строку, но не с помощью простого вызова toString(). Вместо этого вам нужно будет написать алгоритм, который сделает это самостоятельно, или использует библиотеку, или JSON. Но, конечно, настоящая проблема в том, что эта ошибка может возникнуть в иерархии вложенных объектов, когда вы этого не ожидаете, и вы невольно примете информацию в консоли разработчика, если она окажется неточной.

Лучшая защита - знать о возможности ленивой оценки. Еще одна хорошая практика - написать целевой код ведения журнала для вывода определенных свойств с примитивными типами данных. Не регистрируйте объекты целиком и полагайтесь на расширяемое представление в консоли, если в этом нет крайней необходимости.

Чтобы узнать о некоторых современных заменах старых практик JavaScript, ознакомьтесь с Do This Not That, JavaScript Edition. А чтобы получать рассылку раз в месяц с нашими лучшими техническими историями, подпишитесь на Информационный бюллетень Young Coder.