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

Время чтения: меньше 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) {
  // купи билет, дорогой!
}

На практике

cergmin

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

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

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

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

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

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

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.

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

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

console.log(!!value)
// true