Оригинальная статья: Casper Beyer — Lesser-Known JavaScript Hazards

С тех пор, как мы преодолели ECMAScript 4 Harmony, в JavaScript появилось много новых, интересных функций. В то время как больше возможностей может позволить нам создать более качественный и читаемый код, также легко упустить из виду источники потенциальных проблем. Давайте рассмотрим некоторые часто встречаемые ошибки, причина которых не всегда очевидна.

---

Стрелочные функции и литеральные объекты

Стрелочные функции обеспечивают более короткий синтаксис, одна из доступных функций заключается в том, что вы можете написать свою функцию в виде лямбда-выражения с неявным возвращаемым значением. Это удобно при использование функционального стиля, например, когда вы должны использовать функцию map c массивом.

Для примера:

const numbers = [1, 2, 3, 4];
numbers.map(function(n) {
  return n * n;
});

Этот код можно упростить с использованием стрелочных функций и сделать из него однострочник:

const numbers = [1, 2, 3, 4];
numbers.map(n => n * n);

Этот вариант использования со стрелочной функцией будет работать так, как можно было бы ожидать: функция переумножает значения и возвращает новый массив, содержащий [1, 4, 9, 16].

Однако, если мы попытаетесь мапировать объекты (а не простое выражение), синтаксис должен не таким, как можно было бы интуитивно ожидать от него. Например, допустим, мы пытаемся мапировать наши числа в массив объектов, содержащих значение, подобное этому:

const numbers = [1, 2, 3, 4];
numbers.map(n => { value: n });

// [undefined, undefined, undefined, undefined]

Результатом здесь будет массив, содержащий неопределенные значения. Хотя мы может ожидать, что здесь будет возвращаться объект, интерпретатор видит что-то совершенно другое. Фигурные скобки интерпретируются как область видимости стрелочной функции, и переменная value фактически становится меткой Если бы мы экстраполировали вышеприведенную стрелочную функцию на то, что фактически выполняет интерпретатор, это выглядело бы примерно так:

const numbers = [1, 2, 3, 4];
numbers.map(function(n) {
  value:
  n
  return;
});

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

const numbers = [1, 2, 3, 4];
numbers.map(n => ({ value: n }));

Это приведет к массиву, содержащему массив объектов со значениями, которые можно ожидать.

---

Стрелочные функции и Bindings

Еще одна хитрость, связанная с функциями стрелок, заключается в том, что у них нет своих привязок к this, то есть их значение this будет таким же, как и значение this лексической области видимости.

Таким образом, несмотря на то, что синтаксис может быть более простым, функции стрелок не являются заменой старых добрых функций. Вы можете быстро столкнуться с ситуацией, когда ваша this будет не соответствует вашим ожиданиям.

For example:

let calculator = {
  value: 0,
  add: (values) => {
    this.value = values.reduce((a, v) => a + v, this.value);
  },
};

calculator.add([1, 2, 3]);
console.log(calculator.value);

Хотя можно ожидать, что this здесь будет объектом калькулятора, на самом деле это приведет к тому, что this будет либо неопределенной, либо глобальным объектом в зависимости от того, выполняется код в строгом режиме или нет. Это потому, что ближайшая лексическая область действия здесь — это глобальная область действия. В строгом режиме strict mode это undefined; в противном случае это объект window в браузерах (или объект process в среде, совместимой с Node.js).

В случае использования обычных функций когда вызывается объект, this будет указывать на объект, поэтому использование обычной функции все еще является способом использования функций-членов.

let calculator = {
  value: 0,
  add(values) {
    this.value = values.reduce((a, v) => a + v, this.value);
  },
};

calculator.add([10, 10]);
console.log(calculator.value);

Кроме того, поскольку стрелочная функция не имеет этой привязки, Function.prototype.call, Function.prototype.bind и Function.prototype.apply также не будут работать с ними.

Итак, в следующем примере мы столкнемся с той же проблемой, что и раньше: this является глобальным объектом, когда вызывается функция добавления сумматора, несмотря на нашу попытку переопределить ее с помощью Function.prototype.call:

const adder = {
  add: (values) => {
    this.value = values.reduce((a, v) => a + v, this.value);
  },
};

let calculator = {
  value: 0
};

adder.add.call(calculator, [1, 2, 3]);

Хотя стрелочные функции более аккуратны, но они не могут заменить обычные функции-члены, где требуется this.

---

Автоматическая вставка точки с запятой

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

Возьмите следующий пример:

return
{
  value: 42
}

Можно подумать, что он вернет литерал объекта, но на самом деле он вернет неопределенное значение, потому что происходит автоматическая вставка точки с запятой, что делает его пустым оператором возврата, за которым следуют оператор блока.

Другими словами, окончательный код, который фактически интерпретируется, больше похож на следующий:

return;
{
  value: 42
};

Поэтому лучше, никогда не начинайте строку с открывающей скобки или строкового литерала, даже при использовании точек с запятой, потому что ASI всегда присутствует.

---

Поверхностные Set

Множества это по сути массив с не повторяющими элементами. Но
множества являются поверхностными (Shallow), что означает при наличие одинаковых массивов или объектов, они будут рассматриваться как уникальные элементы.

Для примера:

let set = new Set();
set.add([1, 2, 3]);
set.add([1, 2, 3]);

console.log(set.size);
// 2

Размер этого множества будет равен двум, что имеет смысл, если рассматривать его элементы с точки зрения ссылок, и поэтому они являются разными объектами.

Однако строки неизменяемы (immutable). И одинаковые строки не будут дублироваться:

<strong>let</strong> set = <strong>new</strong> Set();
set.add([1, 2, 3].join(','));
set.add([1, 2, 3].join(','));

console.log(set.size);
// 1

В результате размер множества будет равен единице, поскольку строки неизменяемы и встроены в JavaScript, что можно использовать в качестве обходного пути, если вам необходимо сохранить набор объектов. Их можно сериализовать и десериализовать.

---

Классы и временная мертвая зона

В JavaScript обычные функции поднимаются в верхнюю часть лексической области (hoisting), что означает, что приведенный ниже пример будет работать так, как можно было ожидать:

let segment = new Segment();

function Segment() {
  this.x = 0;
  this.y = 0;
}

Но то же самое не относится к классам. Классы не поднимаются и должны быть полностью определены в лексической области видимости, прежде чем пытаться их использовать.

Например:

let segment = new Segment();

class Segment {
  constructor() {
    this.x = 0;
    this.y = 0;
  }
}

Этот код приведет к возникновению ошибки ReferenceError при попытке создать новый экземпляр класса, потому что они не отображаются как функции.

---

Finally

Finally это особый случай. Взгляните на следующий фрагмент:

try {
  return true;
} finally {
  return false;
}

Как вы думаете, что тут возвращается? Ответ является интуитивным понятным и в то же время может стать не совсем очевидным. Можно подумать, что первый оператор return заставляет функцию действительно завершиться и вернуть стек вызовов. Но в данном случае это исключение из этого правила, потому что оператор finally так же должен всегда выполнится, поэтому вместо return true возвращается оператор return false внутри блока finally.

---

В заключение

JavaScript легко выучить, но трудно освоить. Другими словами, он подвержен ошибкам и не очевидному поведению, если разработчик не заботится о том, что и почему он что-то делает.

Это особенно верно для ECMAScript 6 и его новых функций. В частности, особенности поведения есть в стрелочных функциях по. Если бы я сделал предположение, я бы сказал, что это потому, что разработчики рассматривают их как синтаксическая замена обычных функций. Но они не являются обычными функциями и не могут их заменить.

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

Такие инструменты, как AST Explorer, также помогают пролить свет на то, что происходит в некоторых из этих сложных случаев. Люди и компьютеры склонны видеть вещи по-разному.

С учетом сказанного я оставлю вас с последним примером в качестве упражнения.

Несколько вопросов на закрепление материала