IF…ELSE в JS

Этот оператор является, наверное, одним из наиболее используемых в JS. Рассмотрим на примерах как его использовать.

Дынный оператор относиться к условным операторам и помогает определить соответствует ли какое-то выражение нужному условию, а дальше в зависимости от этого выполнить тот или иной код.

Синтаксис

Базовый синтаксис оператора if else следующий:

if ('условие') {
  /* Если true - сделать что-то */
}

Если условие (переменная или выражение) в скобках после if вернет истину (true), значит будет выполнен код, который находиться в фигурных скобках {...}

Также есть продолжение else (с англ. переводится как еще). Оно не является обязательным, но мы можем его использовать, если нам нужно что-то выполнить если первое условие не сработало:

if ('условие') {
  /* Если true - сделать что-то */
} else {
  /* Если первое условие не сработало, тогда сделай это */
}

Также данный оператор может иметь краткую запись (без фигурных скобок):

if ('условие')
  console.log('IF return true')
else
  console.log('IF return false')

Данный вариант можно использовать только в случае, если после if и else будет идти одна строка кода. Но не забывайте про ‘читабельность кода’. Также для краткой записи можно использовать тернарный оператор

Примеры IF ELSE

Рассмотрим использование данного оператора на разных примерах. От простого к более сложному.

Пример 1. Проверка возраста. У нас есть переменная, которая хранит возраст посетителя. В зависимости от его возраста, мы можем написать код пускать или не пускать его на сайт:

let age = 18;
      
if (age >= 18) {
  console.log('Вы уже совершеннолетний');
} else {
  console.log('Вам еще нет 18');
}

Пример 2. Также условие для проверки может быть наличие элементов в массиве (т.е. длина массива)

const arr = [];
if (arr.length) { 
  /* Если массив не пустой, тогда что-то делаем */ 
} 

Если в массиве нет элементов, тогда это выражение вернет 0, ноль это false, поэтому код в фигурных скобках не будет выполнен.

Если нам нужно выполнить какой-то код при пустом массиве, мы в условии можем сделать отрицание:

const arr = [];
if (!arr.length) { 
  /* Если массив пустой, тогда что-то делаем */ 
} 

Данное условие !arr.length возвращает true, т.к. длинна массива у нас 0, 0 — это false, с помощью восклицательного знака мы делаем отрицание !false (не false) это true

Также из поста как удалить элемент массива можно рассмотреть пример:

const arr = [0, 1, 2, 3, 4, 5];

const index = arr.indexOf(2);

if (index !== -1) {
    arr.splice(index, 1);
}

У нас есть массив, с помощью метода indexOf() мы делаем поиск по массиву. Данный метод вернет нам или индекс элемента в массиве, или -1, если такого элемента в массиве нет. Поэтому мы в условии проверяем не равняется ли index !== -1 (значит у нас есть совпадение и искомый элемент нашелся в массиве), тогда делаем удаление этого элемента.

Пример 3. Также мы можем проверять по свойству какого-либо объекта. Допустим у нас есть объект user, у которого задано свойство position и мы в зависимости от этого свойства хотим сделать что-то с его з.п. (salary).

const user = {
    name: 'John',
    age: 30,
    position: 'manager',
    salary: 5000
}

if (user.position === 'manager') {
  // Добавим +500 к его зар. плате
  user.salary += 500; 
}

Пример 4. Теперь рассмотрим как можно использовать результат выполнения функции в условии.

function askAge() {
  let userAge = prompt('Какой Ваш возраст?');
  return parseInt(userAge);
}

if (askAge() >= 18) {
  alert('Доступ разрешен');
} else {
  alert('Доступ запрещен!');
}

В данном примере у нас есть функция, которая в диалоговом окне просит пользователя ввести свой возраст. Мы дополнительно делаем приведение к числу parseInt, т.к. prompt возвращает нам обычную строку. Дальше в условии мы запускаем эту функцию и сразу проверяем результат — если вы введете число больше 18, появится сообщение — Доступ разрешен, иначе — Доступ запрещен!

if…else — несколько условий

Оператор IF-ELSE можно использовать для проверки по нескольким условиям (сколько захотите). Допустим вам нужно проверить число в нескольких диапазонах:

if (num >= 100 && num <= 150) {
  // Сделать что-то если число в диапазоне от 100 - 150
}

if (num >= 100 && num <= 150 || num >= 200 && num <= 250) {
  // Сделать что-то, если число будет в диапазоне от 100-150 или 200-250
}

Также несколько условий могут быть в таком формате:

if (num >= 100 && num <= 150) {
  // Сделать что-то если число в диапазоне от 100 - 150
} else if (num >= 151 && num <= 200) {
  // Сделать что-то другое
} else {
  // если не подошел ни один вариант можно сделать что-то третье
}

Таких ELSE IF может быть столько сколько вам нужно. Также в конце не обязательно делать обычный else. Можно ничего не писать, если не прошло ни одно условие.

Иногда лучше воспользоваться конструкцией switch case, если у вас много условий для проверки.