Merge pull request #1118 from javascript-tutorial/lex111/nullish-operator

Translate 1.2.12. Nullish coalescing operator

Author: iliakan

1-js/02-first-steps/12-nullish-coalescing-operator/article.md

@@ -0,0 +1,166 @@
+# Оператор объединения с null '??'
+
+[recent browser="new"]
+
+В этой статье мы будем говорить, что значение выражение "определено", если оно отличается от `null` или `undefined`.
+
+Оператор объединения с null представляет собой два вопросительных знака `??`.
+
+Результат выражения `a ?? b` будет следующим:
+- `a`, если значение `a` определено,
+- `b`, если значение `a` не определено.
+
+То есть оператор `??` возвращает первый аргумент, если он не `null/undefined`, иначе второй.
+
+Оператор объединения с null не является чем-то принципиально новым. Это всего лишь удобный синтаксис, как из двух значений получить одно "определённое".
+
+Вот как можно переписать выражение `result = a ?? b`, используя уже знакомые нам операторы:
+
+```js
+result = (a !== null && a !== undefined) ? a : b;
+```
+
+Как правило, оператор `??` нужен для того, чтобы задать значение по умолчанию для потенциально неопределённой переменной.
+
+Например, в следующем примере, если переменная `user` не определена, покажем модальное окно с надписью `Аноним`:
+
+```js run
+let user;
+
+alert(user ?? "Аноним"); // Аноним
+```
+
+Конечно, если бы переменная `user` содержала любое значение, кроме `null/undefined`, то мы бы увидели его:
+
+```js run
+let user = "Иван";
+
+alert(user ?? "Аноним"); // Иван
+```
+
+Кроме этого, можно записать последовательность из операторов `??`, чтобы получить первое значение из списка, которое не является `null/undefined`.
+
+Допустим, у нас есть данные пользователя в переменных `firstName`, `lastName` или `nickName`. Все они могут быть неопределёнными, если отсутствует соответствующая информация.
+
+Выведем имя пользователя, используя одну из этих переменных, а в случае если все они не определены, то покажем "Аноним".
+
+Для этого воспользуемся оператором `??`:
+
+```js run
+let firstName = null;
+let lastName = null;
+let nickName = "Суперкодер";
+
+// показывает первое определённое значение:
+*!*
+alert(firstName ?? lastName ?? nickName ?? "Аноним"); // Суперкодер
+*/!*
+```
+
+## Сравнение с ||
+
+Оператор ИЛИ `||` можно использовать для того же, что и `??`, как это было показано в [предыдущей главе](info:logical-operators#or-finds-the-first-truthy-value).
+
+Например, если в приведённом выше коде заменить `??` на `||`, то будет тот же самый результат:
+
+```js run
+let firstName = null;
+let lastName = null;
+let nickName = "Суперкодер";
+
+// показывает первое истинное значение:
+*!*
+alert(firstName || lastName || nickName || "Аноним"); // Суперкодер
+*/!*
+```
+
+Оператор ИЛИ `||` существует с самого появления JavaScript, поэтому ранее для решения похожих задач разработчики использовали именно его.
+
+С другой стороны, сравнительно недавно в язык был добавлен оператор объединения с null `??` как раз потому, что многие были недовольны оператором `||`.
+
+Важное различие между ними заключается в том, что:
+- `||` возвращает первое *истинное* значение.
+- `??` возвращает первое *определённое* значение.
+
+Проще говоря, оператор `||` не различает `false`, `0`, пустую строку `""` и `null/undefined`. Для него они все одинаковые, т.е. являются ложными значениями. Если первым аргументом для оператора `||` будет любое из перечисленных значений, то в качестве результата мы получим второй аргумент.
+
+Однако на практике часто требуется использовать значение по умолчанию только тогда, когда переменная является `null/undefined`. Ведь именно тогда значение действительно неизвестно/не определено.
+
+Например, рассмотрим следующий пример:
+
+```js run
+let height = 0;
+
+alert(height || 100); // 100
+alert(height ?? 100); // 0
+```
+
+- `height || 100` проверяет, имеет ли переменная `height` ложное значение, что так и есть,
+    - поэтому результатом является второй аргумент, т.е. `100`.
+- `height ?? 100` проверяет, что переменная `height` содержит `null/undefined`, а поскольку это не так,
+    - то результатом является сама переменная `height`, т.е. `0`.
+
+Если нулевая высота является "нормальным" значением, которое не должно заменяться значением по умолчанию, то оператор `??` делает как раз то, что нужно.
+
+## Приоритет
+
+Оператор `??` имеет довольно низкий приоритет: `5`, согласно [таблице на MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
+Таким образом, оператор `??` вычисляется до `=` и `?`, но после большинства других операций, таких как `+`, `*`.
+
+Из этого следует, что если нужно выбрать значение при помощи оператора `??` вместе с другими операторами в выражении, следует добавить круглые скобки:
+
+```js run
+let height = null;
+let width = null;
+
+// важно: используйте круглые скобки
+let area = (height ?? 100) * (width ?? 50);
+
+alert(area); // 5000
+```
+
+Иначе, если опустить скобки, то оператор `*` выполнится первым, так как у него приоритет выше, чем у `??`, а это приведёт к неправильным результатам.
+
+```js
+// без круглых скобок
+let area = height ?? 100 * width ?? 50;
+
+// ...то же самое, что предыдущее выражение (вероятно, это не то, что нам нужно):
+let area = height ?? (100 * width) ?? 50;
+```
+
+### Использование ?? вместе с && или ||
+
+По соображениям безопасности JavaScript запрещает использование оператора `??` вместе с `&&` и `||`, если только приоритет явно не указан в круглых скобках.
+
+Выполнение следующего кода приведёт к синтаксической ошибке:
+
+```js run
+let x = 1 && 2 ?? 3; // Синтаксическая ошибка
+```
+
+Это довольно спорное ограничение, которое было описано в спецификации языка, чтобы избежать ошибок при замене оператора `||` на `??`.
+
+Используйте круглые скобки, чтобы обойти это ограничение: 
+
+```js run
+*!*
+let x = (1 && 2) ?? 3; // Работает без ошибок
+*/!*
+
+alert(x); // 2
+```
+
+## Итого
+
+- Оператор объединения с null `??` — это быстрый способ выбрать первое "определённое" значение из списка.
+
+    Используется для присвоения переменным значений по умолчанию:
+
+    ```js
+    // будет height=100, если переменная height равна null или undefined
+    height = height ?? 100;
+    ```
+
+- Оператор `??` имеет очень низкий приоритет, лишь немного выше, чем у `?` и `=`, поэтому при использовании его в выражении, скорее всего, потребуются скобки.
+- Запрещено использовать вместе с `||` или `&&` без явно указанных круглых скобок.