В этой статье вы узнаете как работать с Nullish Coalsing, а именно оператором нулевого слияния в JavaScript. И чем он отличается от логических операторов. Это первая из цикла статей про ES2020.
\n\n\n\n\n\n\n\n\n\n\n\nOff topic. Лучше всего оставлять этот термин без перевода, то есть просто Nullish Coalsing. Если использовать русский перевод, то лучше как “оператор нулевого слияния”. Я слышал варианты “нулевой оператор объединения” и “null оператор коалесцирования”. Но это не совсем то, последний вариант вообще ближе к химии, насколько я знаю.
Оператор нулевого слияния “??” является нововведением в ES2020, которое представляет собой укороченную оценку логического выражения, отдающее правый операнд в случае, если левый операнд является null или undefined, если же нет, то тогда он отдаст левый операнд.
Сейчас он находится на 4й стадии рассмотрения, что говорит о том, что он уже готов к внедрению в официальный ECMAScript стандарт.
\n\n\n\nОн работает в последних версиях Chrome и Firefox.
\n\n\n\nВот очень простой пример применения:
\n\n\n\nconst team = null ?? 'A team';\nconsole.log(team);\n//A teamКонечно же вы уже знаете другие логические операторы, сокращающие вычисления с обработкой типов данных, такие как “&&” и “||”. Эти операторы используются для обработки truthy и falsy значений. Но сначала, что есть false, а что есть true в JavaScript?
Falsy:
\n\n\n\nboolean false
\n\n\n\nnull value
\n\n\n\nundefined
\n\n\n\nNumber 0
\n\n\n\nNumber NaN
\n\n\n\nBigInt 0n
\n\n\n\nПустая строка “”
\n\n\n\nTruthy:
\n\n\n\nВсе значения, кроме предыдущих.
\n\n\n\nПроблема с && и || операторами в том, что они ориентируются только на truthy и falsy, что неизбежно приводит к багам. Эти операторы отлично работают с null и undefined значениями, но многие false значения могут привести к неожиданным результатам.
В этом примере я хочу, чтобы мы обработали объект, в котором мы выставим свойству enableAudio значение 0. И дальше мы выставим дефолтное значение 1, потому что нулевое значение интерпретируется как falsy.
const response = {\n enableAudio : 0\n}\nconst enableAudio = response.enableAudio || 1;\nenableAudio\n//1Nullish coalescing оператор ?? очень схож с оператором ||, кроме того факта, что он не использует truthy при принятии решения. Вместо этого он использует nullish, что говорит о том, что значение должно быть либо null, либо undefined.
В следующем примере переменная enableAudio имеет значение 0 и с оператором нулевого слияния ??, оно обрабатывается не как nullish значение. Следовательно, выражение отдаст левый операнд.
const response = {\n enableAudio : 0\n}\nconst enableAudio = response.enableAudio ?? 1;\nenableAudio\n//0С оператором ||, если бы первый операнд был бы truthy, то он бы отдал первый операнд. В другом случае он перешел бы ко второму. C Nullish Coalsing оператором, если первый оператор falsy, но не nullish, то отдастся false.
console.log(false || true);//true\nconsole.log(false ?? true);//falseВ следующем примере 0 воспринимается как falsy. Следовательно выражение отдаст второй операнд с оператором ||. Но с оператором Nullish Coalescing, ноль не считается null. Следовательно, выражение отдаст первое значение, то есть 0.
console.log(0 || 1); //1\nconsole.log(0 ?? 1); //0В следующем примере, если вы попробуете его с оператором ||, то результат, полученный вами будет вторым операндом, потому что пустая строка являет собой falsy значение. А вот если бы вы использовали Nullish Coalescing оператор, то пустая строка не считалась бы как null и следовательно выражение отдало бы первый операнд.
console.log('' || 'Hello!');//Hello \nconsole.log('' ?? 'Hello');//''В общем, оператор || обрабатывает значения как falsy и truthy, а опрератор ?? обрабатывает их как nullish. Это говорит о том, что с оператором ||, будет отдан второй операнд, если первый является undefined, null, 0, false, NaN или пустой строкой. А вот с оператором ??, второй операнд будет отдан только в том случае, если первый является null или undefined.
Есть очень большое количество багов, которые могут всплыть при использовании || оператора которые вы можете избежать, используя новый оператор nullish coalescing ??, а ещё с ним вы вы сможете предотвратить появление большого количества шаблонного кода для подобных проверок.
В этой статье вы узнаете как работать с Nullish Coalsing, а именно оператором нулевого слияния в JavaScript. И чем он отличается от логических операторов. Это первая из цикла статей про ES2020.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/12/DglYtvO7Bn0-9.jpg"},"interesting":[{"title":"Подробное руководство по JSX в React","slug":"podrobnoe-rukovodstvo-po-jsx-v-react","type":"js"},{"title":"Полное понимание синхронного и асинхронного JavaScript с Async/Await","slug":"polnoe-ponimanie-syncronnogo-i-asyncronnogo-javascript-s-async-await","type":"js"},{"title":"Понимаем компоненты высшего порядка в React на реальном примере","slug":"ponimaem-komponenty-vysshego-poryadka-v-react-na-realnom-primere","type":"js"}]}},"staticQueryHashes":["3576131997","63159454"]}