Логические операторы

Объединяем несколько простых условий в одно сложное.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Логические операторы помогают составлять сложные логические условия, которые часто нужны при ветвлении с помощью if...else.

Как пишется

Секция статьи "Как пишется"

И, &&

Секция статьи "И, &&"

Интернет-магазин показывает цены со скидкой только зарегистрированному пользователю, сделавшему больше одной покупки.

В описании два условия, которые должны одновременно быть верными:

  • пользователь должен быть зарегистрирован;
  • количество покупок должно быть больше одной.

Если одно из условий, или оба сразу неверны, то цену показывать не нужно.

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

        
          
          if (isRegistered === true && orders > 1) {  // показываем цены}
          if (isRegistered === true && orders > 1) {
  // показываем цены
}

        
        
          
        
      
Открыть демо в новой вкладке

Обычно для того, чтобы понять, как работают логические операторы, рисуют таблицу истинности. В ячейках — итоговое значение операции при соответствующих операндах:

&& true false
true true false
false false false

ИЛИ, ||

Секция статьи "ИЛИ, ||"

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

Чтобы написать такое составное условие, воспользуйся оператором логического ИЛИ, обозначается как две вертикальные черты ||. Логическое или вернёт true, если хотя бы одно из условий true.

Генерируйте гостей в демо и смотрите, как отрабатывает условие, которое записано так:

        
          
          if (hasTicket || isInvited) { ... }
          if (hasTicket || isInvited) { ... }

        
        
          
        
      
Открыть демо в новой вкладке
|| true false
true true true
false true false

НЕ !

Секция статьи "НЕ !"

Оператор «логическое НЕ» превращает true в false и наоборот.

Он записывается в виде восклицательного знака ! перед операндом: !операнд . Чаще всего это переменная. Например, !myVariable . Операторы, которые производят операцию над одним операндом называются унарными.

Например, мы можем предлагать купить билет посетителю без билета:

        
          
          if (!hasTicket) {  // купи билет, дорогой!}
          if (!hasTicket) {
  // купи билет, дорогой!
}

        
        
          
        
      

На практике

Секция статьи "На практике"

Сергей Минаков советует

Секция статьи "Сергей Минаков советует"

🛠 Оператор «ИЛИ» (||) можно использовать для установки значения по умолчанию, для этого следует воспользоваться следующей конструкцией:

        
          
          value = value || 'Значение по умолчанию'
          value = value || 'Значение по умолчанию'

        
        
          
        
      

Или можно использовать сокращённый вариант:

        
          
          value ||= 'Значение по умолчанию'
          value ||= 'Значение по умолчанию'

        
        
          
        
      

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

        
          
          let searchEngine1 = 'Яндекс'let searchEngine2searchEngine1 = searchEngine1 || 'Google'searchEngine2 = searchEngine2 || 'Google'console.log(searchEngine1)// Яндексconsole.log(searchEngine2)// Google (значение по умолчанию)
          let searchEngine1 = 'Яндекс'
let searchEngine2

searchEngine1 = searchEngine1 || 'Google'
searchEngine2 = searchEngine2 || 'Google'

console.log(searchEngine1)
// Яндекс
console.log(searchEngine2)
// Google (значение по умолчанию)

        
        
          
        
      

Такой способ работает из-за особенности оператора «ИЛИ»: он не приводит значения к типу Boolean, а просто возвращает то, что стоит левее или правее.

  • Если левое значение можно привести к true, то оператор возвращает левое значение.
  • Если левое значение можно привести к false, то оператор возвращает правое значение.
        
          
          console.log(null || 0)// 0console.log(0 || null)// nullconsole.log('Собака' || 'Кошка')// Собака
          console.log(null || 0)
// 0

console.log(0 || null)
// null

console.log('Собака' || 'Кошка')
// Собака

        
        
          
        
      

В последнем примере JavaScript приводит левое значение к типу Boolean и получает true, из-за чего решает вернуть именно его ('Собака'), а правое – даже не смотрит.

🛠 Оператор «И» (&&) можно использовать в React компонентах, когда мы хотим что-то показать или спрятать в зависимости от определённого условия, для этого нужно воспользоваться следующей jsx конструкцией:

        
          
          <>  {    condition &&    <p>      Если condition == true,      то показываем этот текст.    </p>  }</>
          <>
  {
    condition &&
    <p>
      Если condition == true,
      то показываем этот текст.
    </p>
  }
</>

        
        
          
        
      

Давайте напишем небольшой компонент, который будет выводить секретное сообщение только тем пользователям, которые ввели правильный пароль:

        
          
          import React, { useState } from 'react'export default function App() {  const [password, setPassword] = useState('')  return (    <>      <h1>Введите пароль, чтобы увидеть секрет</h1>      <label>        <span>Пароль</span>        <input          type="password"          value={password}          onChange={(e) => setPassword(e.target.value)}        />      </label>      {        password === '123456' &&        <p>Секрет: Дока – сокращение от «документация»</p>      }    </>  )}
          import React, { useState } from 'react'

export default function App() {
  const [password, setPassword] = useState('')

  return (
    <>
      <h1>Введите пароль, чтобы увидеть секрет</h1>

      <label>
        <span>Пароль</span>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>

      {
        password === '123456' &&
        <p>Секрет: Дока – сокращение от «документация»</p>
      }
    </>
  )
}

        
        
          
        
      

Такой способ работает из-за того, что оператор «И» не приводит значения к типу Boolean, а просто возвращает то, что стоит левее или правее.

  • Если левое значение можно привести к true, то оператор возвращает правое значение.
  • Если левое значение можно привести к false, то оператор возвращает левое значение.
        
          
          console.log(null && 0)// nullconsole.log(0 && null)// 0console.log('Лево' && 'Право')// Право
          console.log(null && 0)
// null

console.log(0 && null)
// 0

console.log('Лево' && 'Право')
// Право

        
        
          
        
      

JavaScript приводит левое значение к типу Boolean и получает true, из-за чего решает вернуть правое значение ('Право').

🛠 Двойное отрицание (!!) можно использовать, если мы хотим привести значение к логическому типу данных. Такой же результат получится, если использовать функцию Boolean.

        
          
          const value = 'Непустая строка'console.log(Boolean(value))// trueconsole.log(!!value)// true
          const value = 'Непустая строка'

console.log(Boolean(value))
// true

console.log(!!value)
// true