JavaScript: Результат логических выражений
Посмотрите на код ниже и попробуйте угадать, что будет напечатано на экран?
console.log(0 || 1);Правильный ответ:
1Оператор ИЛИ работает так, что его выполнение (слева направо) прерывается и возвращается результат первого аргумента, который можно преобразовать в true. Если такого аргумента нет, возвращается последний операнд.
Ниже пример с оператором И:
console.log(0 && 1);0Оператор И работает так, что его выполнение (слева направо) прерывается и возвращается результат первого аргумента, который можно преобразовать в false. Если такого аргумента нет, возвращается последний операнд.
В JavaScript есть два простых правила, по которым происходят преобразования:
0,'',undefined,NaN,nullприводятся кfalse. Эти значения называют falsy.- Всё остальное приводится к
true
Этим активно пользуются в разработке, например, для определения значения по умолчанию:
const value = name || "";
// Примеры
234 || ""; // 234
"hexlet" || ""; // 'hexlet'
undefined || ""; // ''Если name примет одно из falsy-значений, константе value будет присвоена пустая строка. В этом случае в последующем коде мы сможем работать с value как со строкой.
Но здесь есть потенциальный баг. Если name содержит falsy-значение, а присваивание константе value значений типа 0, undefined, NaN или null допустимо, то код выше начнет работать неверно:
// Упс
false || ""; // ''
0 || ""; // ''
undefined || ""; // ''Для таких случаев в JavaScript есть отдельный оператор ??. Он тоже подставляет правый операнд вместо левого, но срабатывает только на null и undefined. Остальные falsy-значения он пропускает как обычные данные:
0 ?? 100; // 0
"" ?? 100; // ''
null ?? 100; // 100
undefined ?? 100; // 100Поэтому когда значением по умолчанию подменяют именно «ничего», берут ??, а когда любое falsy-значение, берут ||.
Приведение типов объясняет и то, зачем в JavaScript два вида сравнения. Кроме строгих операторов === и !==, в языке есть нестрогие == и !=. Отличаются они как раз преобразованием типов:
console.log("" === false); // => false
console.log("" == false); // => trueПустая строка и false — это разные значения, поэтому оператор === говорит «ложь! они не равны!».
Но оператор == преобразует типы, и с его точки зрения пустая строка и false равны.
Это преобразование неявное, поэтому по возможности избегайте операторов == и !=.
Вспомните операцию отрицания:
const answer = true;
console.log(!answer); // => falseОтрицание работает внутри выражений:
!false || ""; // trueЕсли выражение обернуть в скобки и поставить перед ними !, то будет отрицание всего выражения:
// Выражение обернуто в скобки
console.log(!("" === false)); // => true
console.log(!("" == false)); // => falseПри двойном отрицании !! итоговое значение равно начальному:
const answer = true;
console.log(!!answer); // => trueНо здесь дополнительно может происходить преобразование типа. Поэтому результатом двойного отрицания всегда будет значение типа boolean. Этим приемом иногда пользуются, чтобы поменять тип данных.
Ошибка выбора
Представьте себе задачу, в которой нам нужно проверить, что значение равно либо одному, либо другому. Например, переменная value должна содержать одно из двух значений: first или second. Начинающие разработчики иногда записывают это выражение так:
value === ("first" || "second");В голове мы это себе примерно так и представляем, но языки работают по-другому, поэтому такой код приведет к неверному результату. Как его правильно прочитать? Мы должны вспомнить приоритет выполнения операций. Первым делом вычисляется все что указано в скобках, то есть 'first' || 'second'. Если выполнить этот код в repl, то вывод будет таким:
$ node
> 'first' || 'second'
'first'Теперь мы можем заменить исходное выражение, на частично вычисленное:
value === "first";Совсем не то, что мы ожидали. А теперь вернемся к началу, и напишем проверку правильно:
// Скобки ставить не обязательно,
// потому что приоритет === выше чем приоритет ||
value === "first" || value === "second";Задание
Реализуйте функцию getLetter(), которая извлекает из переданной строки указанный символ (по порядковому номеру, а не по его индексу) и возвращает его наружу. Если такого символа нет, то функция возвращает пустую строку.
Примеры вызова:
const name = "Hexlet";
// Обычное обращение возвращает undefined
name[10]; // undefined
// 11 символ соответствует 10 индексу
getLetter(name, 11); // ''
getLetter(name, 1); // 'H'
getLetter(name, 0); // ''
getLetter(name, 6); // 't'Полезное
JavaScript: Результат логических выражений
Посмотрите на код ниже и попробуйте угадать, что будет напечатано на экран?
console.log(0 || 1);Правильный ответ:
1Оператор ИЛИ работает так, что его выполнение (слева направо) прерывается и возвращается результат первого аргумента, который можно преобразовать в true. Если такого аргумента нет, возвращается последний операнд.
Ниже пример с оператором И:
console.log(0 && 1);0Оператор И работает так, что его выполнение (слева направо) прерывается и возвращается результат первого аргумента, который можно преобразовать в false. Если такого аргумента нет, возвращается последний операнд.
В JavaScript есть два простых правила, по которым происходят преобразования:
0,'',undefined,NaN,nullприводятся кfalse. Эти значения называют falsy.- Всё остальное приводится к
true
Этим активно пользуются в разработке, например, для определения значения по умолчанию:
const value = name || "";
// Примеры
234 || ""; // 234
"hexlet" || ""; // 'hexlet'
undefined || ""; // ''Если name примет одно из falsy-значений, константе value будет присвоена пустая строка. В этом случае в последующем коде мы сможем работать с value как со строкой.
Но здесь есть потенциальный баг. Если name содержит falsy-значение, а присваивание константе value значений типа 0, undefined, NaN или null допустимо, то код выше начнет работать неверно:
// Упс
false || ""; // ''
0 || ""; // ''
undefined || ""; // ''Для таких случаев в JavaScript есть отдельный оператор ??. Он тоже подставляет правый операнд вместо левого, но срабатывает только на null и undefined. Остальные falsy-значения он пропускает как обычные данные:
0 ?? 100; // 0
"" ?? 100; // ''
null ?? 100; // 100
undefined ?? 100; // 100Поэтому когда значением по умолчанию подменяют именно «ничего», берут ??, а когда любое falsy-значение, берут ||.
Приведение типов объясняет и то, зачем в JavaScript два вида сравнения. Кроме строгих операторов === и !==, в языке есть нестрогие == и !=. Отличаются они как раз преобразованием типов:
console.log("" === false); // => false
console.log("" == false); // => trueПустая строка и false — это разные значения, поэтому оператор === говорит «ложь! они не равны!».
Но оператор == преобразует типы, и с его точки зрения пустая строка и false равны.
Это преобразование неявное, поэтому по возможности избегайте операторов == и !=.
Вспомните операцию отрицания:
const answer = true;
console.log(!answer); // => falseОтрицание работает внутри выражений:
!false || ""; // trueЕсли выражение обернуть в скобки и поставить перед ними !, то будет отрицание всего выражения:
// Выражение обернуто в скобки
console.log(!("" === false)); // => true
console.log(!("" == false)); // => falseПри двойном отрицании !! итоговое значение равно начальному:
const answer = true;
console.log(!!answer); // => trueНо здесь дополнительно может происходить преобразование типа. Поэтому результатом двойного отрицания всегда будет значение типа boolean. Этим приемом иногда пользуются, чтобы поменять тип данных.
Ошибка выбора
Представьте себе задачу, в которой нам нужно проверить, что значение равно либо одному, либо другому. Например, переменная value должна содержать одно из двух значений: first или second. Начинающие разработчики иногда записывают это выражение так:
value === ("first" || "second");В голове мы это себе примерно так и представляем, но языки работают по-другому, поэтому такой код приведет к неверному результату. Как его правильно прочитать? Мы должны вспомнить приоритет выполнения операций. Первым делом вычисляется все что указано в скобках, то есть 'first' || 'second'. Если выполнить этот код в repl, то вывод будет таким:
$ node
> 'first' || 'second'
'first'Теперь мы можем заменить исходное выражение, на частично вычисленное:
value === "first";Совсем не то, что мы ожидали. А теперь вернемся к началу, и напишем проверку правильно:
// Скобки ставить не обязательно,
// потому что приоритет === выше чем приоритет ||
value === "first" || value === "second";Задание
Реализуйте функцию getLetter(), которая извлекает из переданной строки указанный символ (по порядковому номеру, а не по его индексу) и возвращает его наружу. Если такого символа нет, то функция возвращает пустую строку.
Примеры вызова:
const name = "Hexlet";
// Обычное обращение возвращает undefined
name[10]; // undefined
// 11 символ соответствует 10 индексу
getLetter(name, 11); // ''
getLetter(name, 1); // 'H'
getLetter(name, 0); // ''
getLetter(name, 6); // 't'Полезное
Ваше упражнение проверяется по этим тестам
import { expect, test } from "vitest";
import f from "./index.js";
test("logical expressions", () => {
const name = "Hexlet";
expect(f(name, 0)).toBe("");
expect(f(name, 1)).toBe("H");
expect(f(name, 6)).toBe("t");
expect(f(name, 7)).toBe("");
expect(f(name, 11)).toBe("");
});Решение учителя откроется через:
20:00
