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

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

        
          
          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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать