Код if else как пишется - Правописание и грамматика

В этой статье мы изучим условные инструкции if, if...else, switch и тернарный оператор JavaScript, который очень часто используется в выражениях.

Условные инструкции и тернарный оператор

Условные инструкции – это инструкции языка JavaScript (ECMAScript), которые выполняют определенные действия в зависимости от значения некоторого условия.

Виды условных инструкций в JavaScript:

if (с одной ветвью);
if...else (с двумя ветвями);
else if... (с несколькими ветвями);
инструкция выбора switch.

Кроме условных инструкций в JavaScript имеется ещё тернарный оператор ?:.

Инструкция if

Синтаксис:

// condition – это условие
if (condition) {
  // блок кода, который выполняется один раз, если condition истинно
}

Инструкция if начинается с ключевого слова if, затем после пробела идут круглые скобки, в которых находится условие и далее блок инструкций в фигурных скобках. При этом блок кода выполняется только в том случае, если условие, заданное в круглых скобках () истинно.

В качестве условия можно указывать любое выражение. Если выражение приводится к истине (то есть, если Boolean(condition) === true), то блок код выполняется. В противном случае нет.

Например:

if (true) {
  console.log('Привет, мир!');
}

В этом примере условие правдиво, а значит, что блок кода будет выполнен, и мы в консоли увидим сообщение «Привет, мир!». Этот код приведен в качестве примера, так как в таком виде он не имеет никакого смысла.

Если блок кода состоит из одной инструкции, то фигурные скобки можно опустить:

if (true) console.log('Привет, мир!');

Но фигурные скобки лучше указывать, так как это улучшает читаемость кода.

Например, увеличим значение переменной num на 5, если её значение больше 4:

let num = 8;
if (num > 4) {
  num += 5;
}
console.log(num); // 13;

В этом примере условие приводится к true. А так как условие истинно, то выполняем то, что находится в блоке. В результате в консоль будет выведено значение 13.

Пример if, в условии которого используется оператор «НЕ»:

const article = {
  date: '18.05.2022'
}
if (!article.title) {
  console.log('Не указан заголовок!');
}

Здесь имеется объект article, содержащий одно свойство date. С помощью if мы выводем сообщение в консоль, если в объекте article нет свойства title или оно имеется, но его значение ложно.

Условие !article.title при приведении к булевому значению даст нам true. Так как свойства title нет в объекте article, то article.title вернёт undefined. А !undefined – это true.

Как только что выяснили условие правдиво, а следовательно, блок кода будет выполнен и мы в консоли увидим сообщение.

Инструкция if…else

Инструкция if…else состоит из 2 блоков кода. Если условие истинно, то выполняется первый блок кода, в противном случае – второй:

Синтаксис:

// condition – это условие
if (condition) {
  // блок кода, который выполняется, если условие истинно
} else {
  // блок кода, который выполняется, если условие ложно
}

В if...else всегда выполняется один из блоков. То есть в этой инструкции одновременно два блока выполнится не могут. При этом этот блок выполняется один раз. Если условие правдиво, то – первый блок, иначе – второй. После того как один из блоков выполнится интерпретатор JavaScript перейдёт к следующим за ним инструкциям.

Например, выведем в консоль сообщение о том, является ли число четным или нет:

const num = 5;
if (num % 2) {
  console.log('Число нечётное!');
} else {
  console.log('Число чётное!');
}

Если условие num % 2 правдиво, а в данном случае это так, то выполнится первый блок кода, который выведет в консоль «Число нечётное!».

Если значение переменной поменять на 4, то условие будет уже ложным и выполнится второй блок кода. В результате, в консоли мы увидим сообщение «Число чётное!».

Несколько условий else if

Если нужно проверить несколько вариантов условий, то можно использовать else if:

if (condition1) {
  // блок кода, который выполняется, если условие condition1 истинно
} else if (condition2) {
  // блок кода, который выполняется, если условие condition2 истинно
} else if (condition3) {
  // блок кода, который выполняется, если условие condition3 истинно
} else {
  // блок кода, который выполняется, если предыдущие условия ложны
}

Здесь всё как обычно:

Если condition1 правдиво, то выполнится первый блок кода. Остальные условия и блоки кода не будут даже просматриваться. На этом выполнение if закончится.
Если же первое условие ложно, то мы переходим к condition2. Если condition2 истинно, то выполнится второй блок кода и на этом выполнение инструкции if закончится.
Если предыдущие условия ложны, то переходим к рассмотрению условия condition3 и так далее.
Если все условия ложны, то выполняем последний блок кода, который указан после else без дополнительных условий.

Используя else if вы можете комбинировать много разных условий и строить длинные цепочки.

Пример, в котором выведем в консоль разные тексты, в зависимости от значения переменной val:

const val = 7;
if (val < 5) {
  console.log('Less than 5');
} else if (val < 10) {
  console.log('Less than 10');
} else {
  console.log('Greater than or equal to 10');
}

Пример, в котором показано как можно переписать эту инструкцию используя только if:

const val = 7;
if (val < 5) {
  console.log('Less than 5');
}
if (val > 5 && val < 10) {
  console.log('Less than 10');
}
if (val >= 10) {
  console.log('Greater than or equal to 10');
}

Кроме этого блок else не является обязательным:

const lang = 'ru';
if (lang === 'ru') {
  console.log('Это русский текст');
} else if (lang === 'en') {
  console.log('Это английский текст');
} else if (lang !== 'ru' || lang !== 'en') {
  console.log('Это не русский и не английский текст');
}

Очень часто if применяются внутри функций:

function greeting(time) {
  if (time > 18) {
    return 'Добрый вечер!';
  } else if (time > 11) {
    return 'Добрый день!';
  } else if (time > 4) {
    return 'Доброе утро!';
  }
  return 'Доброй ночи!';
}

greeting(10); // "Доброе утро!"

Эта функция будет возвращать разные приветствия в зависимости от времени суток. На вход она принимает один аргумент, который мы получаем с помощью параметра time. Далее в зависимости от значения параметра возвращаем ту или иную строку.

Условный тернарный оператор ?:

Тернарный оператор – это оператор JavaScript, который возвращает результат первого или второго выражения в зависимости от истинности условия.

Синтаксис:

// condition – условие
// expression1 – первое выражение
// expression2 – второе выражение
condition ? expression1 : expression2

Тернарный оператор является выражением, то есть он возвращает значение. У него три операнда: условие condition, первое выражения expression1 и второе выражение expression2. Для разделения операндов используются знаки ? и :.

Условие – это тоже выражение. Если условие истинно, то тернарный оператор возвращает результат первого выражения expression1. В противном случае, то есть, если условие ложно, то результат второго выражения expression2.

Тернарный оператор очень часто используется там где нужно получить значение и использовать его дальше. Например, это значение можно присвоить переменной.

const value = 10;
const result = value > 10 ? 'Число больше 10!' : 'Число равно или меньше 10!';
console.log(result); // "Число равно или меньше 10!"

В этом примере мы объявили переменную value и присвоили ей число 10. Так как условие у нас ложно (то есть 10 не больше 10), то тернарный оператор вернёт нам результат вычисления второго выражения, то есть строку «Число равно или меньше 10!». После этого данная строка будет присвоена переменной result, которую мы создали с помощью ключевого слова const. После этого значение этой переменной будет выведено в консоль.

В JavaScript допустимы множественные тернарные операторы (?:):

const dayNumber = new Date().getDay();

day =
  (dayNumber === 0) ? 'Воскресенье' :
    (dayNumber === 1) ? 'Понедельник' :
      (dayNumber === 2) ? 'Вторник' :
        (dayNumber === 3) ? 'Среда' :
          (dayNumber === 4) ? 'Четверг' :
            (dayNumber === 5) ? 'Пятница' :
              (dayNumber === 6) ? 'Суббота' : 'Неизвестный день недели';

console.log(`Сегодня ${day.toLowerCase()}.`);

Вышеприведённый пример, но с использованием множественной записи инструкции if...else:

const dayNumber = new Date().getDay();

if (dayNumber === 0) {
  day = 'Воскресенье';
} else if (dayNumber === 1) {
  day = 'Понедельник';
} else if (dayNumber === 2) {
  day = 'Вторник';
} else if (dayNumber === 3) {
  day = 'Среда';
} else if (dayNumber === 4) {
  day = 'Четверг';
} else if (dayNumber === 5) {
  day = 'Пятница';
} else if (dayNumber === 6) {
  day = 'Суббота';
} else {
  day = 'Неизвестный день недели';
}

console.log(`Сегодня ${day.toLowerCase()}.`);

Инструкция switch

Инструкция switch предназначен для выполнения одного варианта инструкций из нескольких в зависимости от значения выражения. Выбор того или иного варианта определяется посредством строгого равенства результата выражения значению случая (case).

Синтаксис инструкции switch:

// expression – выражение
switch (expression) {
  case valueA:
    // действия, которые будут выполнены, если expression === valueA
    break; // прерываем дальнейшее выполнение switch
  case valueB:
    // действия, которые будут выполнены, если expression === valueB
    break; // прерываем дальнейшее выполнение switch
  // ...
  case valueN:
  // действия, которые будут выполнены, если expression === valueN
    break; // прерываем дальнейшее выполнение switch
  default:
    // действия по умолчанию, если expression не равно valueA, valueB, ..., valueN
}

Ключевое слово default является необязательным. Оно используется, когда необходимо задать инструкции, которые нужно выполнить, если результат выражения будет не равен ни одному значению варианта (case).

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

Например, выведем сообщение в консоль браузера о количестве конфет:

const countCandyBoys = 1;
const countCandyGirls = 2;
let message;
switch (countCandyBoys + countCandyGirls) {
  case 1:
    message = 'Одна конфета';
    break;
  case 2:
  case 3:
    message = 'Две или три конфеты';
    break;
  case 4:
    message = 'Четыре конфеты';
    break;
  default:
    message = 'Не одна, не две, не три и не четыре конфеты';
}
// выведем сообщение в консоль
console.log(message);

В вышеприведенном примере вычисленное выражение равно 3. Следовательно, будет выполнены инструкции message = 'Две или три конфеты' и break. Инструкция break прервёт дальнейшее выполнение инструкции switch и передаст управление инструкции, идущей после него, т.е. console.log(message). Она выведет в консоль сообщение «Две или три конфеты».

Например, выведем выведем в консоль текущий день недели:

let day = '';

switch (new Date().getDay()) {
  case 0:
    day = 'Воскресенье';
    break;
  case 1:
    day = 'Понедельник';
    break;
  case 2:
    day = 'Вторник';
    break;
  case 3:
    day = 'Среда';
    break;
  case 4:
    day = 'Четверг';
    break;
  case 5:
    day = 'Пятница';
    break;
  case 6:
    day = 'Суббота';
    break;
  default:
    day = 'Неизвестный день недели';
}

console.log(`Сегодня ${day.toLowerCase()}.`);

Пример, в котором не используется инструкция break:

const result = 'success';

switch (result) {
  case 'success':
    console.log('Успех!');
  case 'invalidCaptcha':
    console.log('Неверная капча!');
  default:
    console.log('Ошибка!');
}

В этом примере выражение инструкции switch равно success. Следовательно, будет выполнена инструкция console.log('Успех!'), которая выведет сообщение «Успех!» в консоль. Но так как после неё нет инструкции break, то выполнение скрипта будет продолжено в следующем варианте. Таким образом, инструкции будут выполняться до тех пока пока на пути не встретиться break или не будет достигнут конец инструкции switch. В результате выполнения этого примера в консоль будут выведены 3 сообщения: «Успех!», «Неверная капча!» и «Ошибка!».

В некоторых случаях может требоваться именно такое поведение, но не в этом. Здесь просто допущена ошибка.

Исправленный вариант примера:

const result = 'success';

switch (result) {
  case 'success':
    console.log('Успех!');
    break;
  case 'invalidCaptcha':
    console.log('Неверная капча!');
    break;
  default:
    console.log('Ошибка!');
}

Источник

Условный оператор ветвления (if) реализует выполнение определённых команд при условии, что некоторое логическое выражение (условие) принимает значение «истина» true.
Тернарный оператор (?:) является альтернативным вариантом конструкции if…else, позволяющим сократить ваш код, фактически записывая условие в одну строчку.

Инструкция if

Условный оператор if (в переводе с англ. — «если») реализует выполнение определённых команд при условии, что некоторое логическое выражение (условие) принимает значение «истина» true.

Синтаксис:

if (условие) однострочная инструкция;

  или

if (условие) {
  блочная инструкция
}

Условие в этой конструкции может быть любым выражением. JavaScript автоматически преобразует результат выражения в логическое значение, вызывая для него функцию Boolean(). Если условие эквивалентно true, выполняется инструкция, в противном случае – нет.

Выполняемая инструкций может быть представлена одной строкой или блоком кода (группой строк в фигурных скобках), например:

Примечание: Рекомендуется всегда использовать фигурные скобки, даже если нужно выполнить всего одну строку кода. Это ясно показывает, что должно быть выполнено в каждом случае и улучшает читаемость кода.

Конструкция if…else

Используйте конструкцию if….else для выполнения первой инструкции, если условие истинно true, и второй инструкции, если условие ложно false.

Синтаксис:

if (условие) {
  инструкция 1
}  
else {
  инструкция 2
}

Следующий пример выведет соответствующее окно приветствия в зависимости от текущего времени в вашем браузере:

Инструкция else if

Инструкция else if используется в случае, если требуется выполнить один из многих фрагментов кода. Формально это не JavaScript-инструкция, а лишь распространенный стиль программирования, который заключается в применении повторяющихся инструкций if/else:

if (n == 1) {
    инструкция 1
}
else if (n == 2) {
    инструкция 2
}
else if (n == 3) {
    инструкция 3
}
else {
// Если все остальные условия else не выполняются, исполняем инструкцию 4
}

Приведенный выше код – это всего лишь последовательность инструкций if. Каждая следующая if является частью else предыдущей инструкции if. Запись else if более удобная, чем ее синтаксически эквивалентная форма, показывающая вложенность инструкций if:

if (n == 1) {
   инструкция 1
}
else {
if (n == 2) {
   инструкция 2
}
else {
if (n == 3) {
   инструкция 3
}
else {
// Если все остальные условия else не выполняются, исполняем инструкцию 4
}
}
}

В следующем примере, благодаря применению конструкции else if, будет выведено одно из четырех окон приветствия в зависимости от времени суток:

Тернарный оператор (?:)

Условный оператор (?:) – это единственный тернарный (от лат. ternarius — «тройной») оператор с тремя операндами в JavaScript. Тернарный оператор возвращает свой второй или третий операнд в зависимости от значения логического выражения, заданного первым операндом.

Первый операнд используется в качестве условия, он вычисляется и преобразуется, при необходимо, в булево значение. Если условие верно true, то вычисляется и возвращается значение1. Если условие неверно false, то вычисляется и возвращается значение2:

условие ? значение1 : значение2

Например:

Читается этот код так: если а больше b, то c = a, иначе c = b.

Можно записать тоже самое через if/else:

Вложенные инструкции if/else, так же можно заменить последовательностью из тернарных операторов:

Условный оператор ?: имеет ассоциативность справа налево, поэтому следующие две инструкции эквивалентны:

z = a?b:c?d:e?f:g;
z = a?b:(c?d:(e?f:g));

Есть и другой вариант сокращенной записи инструкции if/else, основанный использовании лигического И &&. Вспомните, что оператор && вычисляет второй операнд только при условии, если результат вычисления первого операнда – истина true. В программировании данный процесс называют неполным вычислением, поскольку, если в логическом И && первый операнд возвращает false, то общий результат тоже будет false. Поэтому вычисление и преобразование второго операнда, в этом случае, не выполняется.

В предыдущем примере оператор && сначала проверяет выполняется ли временное условие (чему равна переменная time). Если условие выполняется, то в переменную message будет записана соответствующая строка приветствия. В противном случае, в силу побочного эффекта, связанного с неполным вычислением, оператор && выведет false и т.д. Этот метод используется не очень часто, но если вам встретится нечто подобное, то вы теперь знаете, как работают подобные инструкции.

Задачи

Вам даны две переменные x и y, менять их не нужно. При помощи тернарного оператора сравните их и если x больше, чем y, то выведите фразу: «x больше, чем y», иначе выведите фразу: «x не больше, чем y».
```
var x = 10, y = 7;
/* ваш код */
```
Показать решение

Решение:

Ответ: «x больше, чем y».

Четное или нечетное число

Пользователь вводит какое-то число (num). Используя конструкцию if..else, напишите код, который делает запрос: «Введите число».
Если посетитель вводит четное число, то выводить «»Число » + num + » четное»», если нечетное: «Число » + num + » нечетное».

Показать решение

Решение:

Суть решения заключается в том, что проверяется остаток от деления числа на 2. Если остаток равен 0, значит число чётное, иначе – нечётное. Получить остаток от деления в можно с помощью оператора %.

Сколько цифр в числе и его знак

Напишите код, который предлагает пользователю ввести целое число. Нужно вывести на экран сколько в этом числе цифр, а также положительное оно или отрицательное. Например, «Число » + num + » однозначное положительное».
Достаточно будет определить, является ли число однозначным, двухзначным или трехзначным и более.
Показать решение
Решение:

Алгоритм решения задачи:
1. Проверяем, не является ли число нулем. Ноль не является ни положительным, ни отрицательным.
2. После этого проверяем количество знаков в в положительном числе и выводим на эран соответствующее сообщение.
3. Проверяем количество знаков в отрицательном числе, выводим сообщение.

Принадлежность точки окружности

Даны координаты точки A(x = 4, y = 9) и радиус окружности (R = 10) с центром в начале координат. Используя тернарный оператор напишите код, который будет выводить сообщение о том, лежит ли данная точка внутри окружности или за её пределами. Для извлечения квадратного корня из числа z вам понадобится метод Math.sqrt(z).

Показать решение

Решение:

Следует рассмотреть прямоугольный треугольник, один катет которого лежит на любой оси, а другой является перпендикуляром к этой оси из заданной точки A. В этом случае длины катетов треугольника равны значениям x и y, а гипотенуза L является отрезком, соединяющим начало координат O с точкой A. Если этот отрезок L больше радиуса круга R, то значит точка лежит вне окружности.

Длина гипотенузы находится по теореме Пифагора: L = Math.sqrt(x*x + y*y).

Определить существование треугольника по трем сторонам

У треугольника сумма любых двух сторон должна быть больше третьей. Иначе две стороны просто <лягут> на третью и треугольника не получится.
Пользователь вводит поочерёдно через prompt длины трех сторон. Используя конструкцию if..else, напишите код, который должен определять, может ли существовать треугольник при таких длинах. Т. е. нужно сравнить суммы двух любых строн с оставшейся третьей стороной. Чтобы треугольник существовал, сумма всегда должна быть больше отдельной стороны.

Показать решение

Решение:

Поскольку у треугольника три стороны, то можно составить три варианта сложения двух сторон: a + b, b + c, a + c. Первую сумму сравниваем с оставшейся стороной c, вторую — с a и третью — с b. Если хотя бы в одном случае сумма окажется не больше третьей стороны, то можно сделать вывод, что треугольник не существует.

Найти максимальное число из трех

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

Найти сумму или произведение цифр трехзначного числа

Пользователь вводит через prompt трёхзначное число. Проверить трехзначное число на четность и найти сумму его цифр, если число четное, или произведение его цифр, если число нечетное.

Показать решение

Решение:

Чтобы извлечь первую цифру трехзначного числа, надо его разделить на 100 и округлить воспользовавшись побитовыми операторами.
Чтобы извлечь вторую цифру трехзначного числа, можно пойти разными способами. Например, найти остаток от деления на 100, потом разделить на 10 и снова округлить.

Последняя цифра любого числа, обозначающая единицы, извлекается путем нахождения остатка от деления на 10: n % 10.

Проверить число на четность. Найти остаток от деления числа на 2. Для этого использовать оператор %. Если результат равен нулю, значит число четное. Иначе – нечетное.

Источник

There will be times where you will want to write commands that handle different decisions in your code.

For example, if you are coding a bot, you can have it respond with different messages based on a set of commands it receives.

In this article, I will explain what an if...else statement is and provide code examples. We will also look at the conditional (ternary) operator which you can use as a shorthand for the if...else statement.

What is an if…else statement in JavaScript?

The if...else is a type of conditional statement that will execute a block of code when the condition in the if statement is truthy. If the condition is falsy, then the else block will be executed.

Truthy and falsy values are converted to true or false in if statements.

if (condition is true) {
   // code is executed
} else {
   // code is executed
}

Any value that is not defined as falsy would be considered truthy in JavaScript.

Here is a list of falsy values:

false
0 (zero)
-0 (negative zero)
0n (BigInt zero)
"", '', `` (empty string)
null
undefined
NaN (not a number)

Examples of if…else statements in JavaScript

In this example, the condition for the if statement is true so the message printed to the console would be «Nick is an adult.»

const age = 18;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

But if I change the age variable to be less than 18, then the condition would be false and the code would execute the else block instead.

const age = 12;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

Examples of multiple conditions (if…else if…else statements) in JavaScript

There will be times where you want to test multiple conditions. That is where the else if block comes in.

if (condition 1 is true) {
   // code is executed
} else if (condition 2 is true) {
  // code is executed
} else {
   // code is executed
}

When the if statement is false, the computer will move onto the else if statement. If that is also false, then it will move onto the else block.

In this example, the else if block would be executed because Alice is between the ages of 18 and 21.

const age = 18;

if (age < 18) {
  console.log("Alice is under 18 years old.");
} else if (age >= 18 && age <= 21) {
  console.log("Alice is between the ages of 18 and 21.");
} else {
  console.log("Alice is over 21 years old.");
}

When to use switch statements over if…else statements?

There are times in JavaScript where you might consider using a switch statement instead of an if else statement.

switch statements can have a cleaner syntax over complicated if else statements.

Take a look at the example below – instead of using this long if else statement, you might choose to go with an easier to read switch statement.

const pet = "dog";

if (pet === "lizard") {
  console.log("I own a lizard");
} else if (pet === "dog") {
  console.log("I own a dog");
} else if (pet === "cat") {
  console.log("I own a cat");
} else if (pet === "snake") {
  console.log("I own a snake");
} else if (pet === "parrot") {
  console.log("I own a parrot");
} else {
  console.log("I don't own a pet");
}

const pet = "dog";
 
switch (pet) {
  case "lizard":
    console.log("I own a lizard");
    break;
  case "dog":
    console.log("I own a dog");
    break;
  case "cat":
    console.log("I own a cat");
    break;
  case "snake":
    console.log("I own a snake");
    break;
  case "parrot":
    console.log("I own a parrot");
    break;
  default:
    console.log("I don't own a pet");
    break;
}

switch statements will not be appropriate to use in all situations. But if you feel like the if else statements are long and complicated, then a switch statement could be an alternative option.

The logical AND (&&) operator and if…else statements in JavaScript

In the logical AND (&&) operator, if both conditions are true, then the if block will be executed. If one or both of the conditions are false, then the else block will be executed.

In this example, since age is greater than 16 and the ownsCar variable is true, the if block will run. The message printed to the console will be «Jerry is old enough to drive and has his own car.»

const age = 17;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

If I change the age variable to be less than 16, then both conditions are no longer true and the else block would be executed instead.

const age = 13;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

The logical OR (||) operator and if…else statements in JavaScript

In the logical OR (||) operator, if one or both of the conditions are true, then the code inside the if statement will execute.

In this example, even though the isSale variable is set to false, the code inside the if block will still execute because the boyfriendIsPaying variable is set to true.

const boyfriendIsPaying = true;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

If I were to change the value of the boyfriendIsPaying variable to false, then the else block would execute because both conditions are false.

const boyfriendIsPaying = false;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

The logical NOT (!) operator and if…else statements in JavaScript

The logical NOT (!) operator will take something that is true and make it false. It will also take something that is false and make it true.

We can modify the example from earlier to use the ! operator to make the boyfriendIsPaying variable false. Since both conditions are false, the else block would be executed.

const boyfriendIsPaying = true;
const isSale = false;

if (!boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

Conditional (ternary) operator in JavaScript

If you have a short if else statement, then you might choose to go with the ternary operator. The word ternary means something composed of three parts.

This is the basic syntax for a ternary operator:

condition ? if condition is true : if condition is false

The condition goes before the ? mark and if it is true, then the code between the ? mark and : would execute. If the condition is false, then the code after the : would execute.

In this example, since age is greater than 18, then the message to the console would be «Can vote».

const age = 32;
const citizen = age >= 18 ? "Can vote" : "Cannot vote";
console.log(citizen);

This is what the code would look like using an if else statement:

const age = 32;
let citizen;

if (age >= 18) {
  citizen = "Can vote";
} else {
  citizen = "Cannot vote";
}

console.log(citizen);

Conclusion

if else statements will execute a block of code when the condition in the if statement is truthy. If the condition is falsy, then the else block will be executed.

There will be times where you want to test multiple conditions and you can use an if...else if...else statement.

If you feel like the if else statement is long and complicated, then a switch statement could be an alternative option.

Using logical operators to test multiple conditions can replace nested if else statements.

The ternary operator can be used to write shorter code for a simple if else statement.

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Источник

There will be times where you will want to write commands that handle different decisions in your code.

For example, if you are coding a bot, you can have it respond with different messages based on a set of commands it receives.

What is an if…else statement in JavaScript?

Truthy and falsy values are converted to true or false in if statements.

if (condition is true) {
   // code is executed
} else {
   // code is executed
}

Any value that is not defined as falsy would be considered truthy in JavaScript.

Here is a list of falsy values:

false
0 (zero)
-0 (negative zero)
0n (BigInt zero)
"", '', `` (empty string)
null
undefined
NaN (not a number)

Examples of if…else statements in JavaScript

In this example, the condition for the if statement is true so the message printed to the console would be «Nick is an adult.»

const age = 18;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

But if I change the age variable to be less than 18, then the condition would be false and the code would execute the else block instead.

const age = 12;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

Examples of multiple conditions (if…else if…else statements) in JavaScript

There will be times where you want to test multiple conditions. That is where the else if block comes in.

if (condition 1 is true) {
   // code is executed
} else if (condition 2 is true) {
  // code is executed
} else {
   // code is executed
}

When the if statement is false, the computer will move onto the else if statement. If that is also false, then it will move onto the else block.

In this example, the else if block would be executed because Alice is between the ages of 18 and 21.

const age = 18;

if (age < 18) {
  console.log("Alice is under 18 years old.");
} else if (age >= 18 && age <= 21) {
  console.log("Alice is between the ages of 18 and 21.");
} else {
  console.log("Alice is over 21 years old.");
}

When to use switch statements over if…else statements?

There are times in JavaScript where you might consider using a switch statement instead of an if else statement.

switch statements can have a cleaner syntax over complicated if else statements.

Take a look at the example below – instead of using this long if else statement, you might choose to go with an easier to read switch statement.

const pet = "dog";

if (pet === "lizard") {
  console.log("I own a lizard");
} else if (pet === "dog") {
  console.log("I own a dog");
} else if (pet === "cat") {
  console.log("I own a cat");
} else if (pet === "snake") {
  console.log("I own a snake");
} else if (pet === "parrot") {
  console.log("I own a parrot");
} else {
  console.log("I don't own a pet");
}

const pet = "dog";
 
switch (pet) {
  case "lizard":
    console.log("I own a lizard");
    break;
  case "dog":
    console.log("I own a dog");
    break;
  case "cat":
    console.log("I own a cat");
    break;
  case "snake":
    console.log("I own a snake");
    break;
  case "parrot":
    console.log("I own a parrot");
    break;
  default:
    console.log("I don't own a pet");
    break;
}

switch statements will not be appropriate to use in all situations. But if you feel like the if else statements are long and complicated, then a switch statement could be an alternative option.

The logical AND (&&) operator and if…else statements in JavaScript

In the logical AND (&&) operator, if both conditions are true, then the if block will be executed. If one or both of the conditions are false, then the else block will be executed.

const age = 17;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

If I change the age variable to be less than 16, then both conditions are no longer true and the else block would be executed instead.

const age = 13;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

The logical OR (||) operator and if…else statements in JavaScript

In the logical OR (||) operator, if one or both of the conditions are true, then the code inside the if statement will execute.

In this example, even though the isSale variable is set to false, the code inside the if block will still execute because the boyfriendIsPaying variable is set to true.

const boyfriendIsPaying = true;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

If I were to change the value of the boyfriendIsPaying variable to false, then the else block would execute because both conditions are false.

const boyfriendIsPaying = false;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

The logical NOT (!) operator and if…else statements in JavaScript

The logical NOT (!) operator will take something that is true and make it false. It will also take something that is false and make it true.

We can modify the example from earlier to use the ! operator to make the boyfriendIsPaying variable false. Since both conditions are false, the else block would be executed.

const boyfriendIsPaying = true;
const isSale = false;

if (!boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

Conditional (ternary) operator in JavaScript

If you have a short if else statement, then you might choose to go with the ternary operator. The word ternary means something composed of three parts.

This is the basic syntax for a ternary operator:

condition ? if condition is true : if condition is false

The condition goes before the ? mark and if it is true, then the code between the ? mark and : would execute. If the condition is false, then the code after the : would execute.

In this example, since age is greater than 18, then the message to the console would be «Can vote».

const age = 32;
const citizen = age >= 18 ? "Can vote" : "Cannot vote";
console.log(citizen);

This is what the code would look like using an if else statement:

const age = 32;
let citizen;

if (age >= 18) {
  citizen = "Can vote";
} else {
  citizen = "Cannot vote";
}

console.log(citizen);

Conclusion

if else statements will execute a block of code when the condition in the if statement is truthy. If the condition is falsy, then the else block will be executed.

There will be times where you want to test multiple conditions and you can use an if...else if...else statement.

If you feel like the if else statement is long and complicated, then a switch statement could be an alternative option.

Using logical operators to test multiple conditions can replace nested if else statements.

The ternary operator can be used to write shorter code for a simple if else statement.

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Источник

Условные инструкции и тернарный оператор

Инструкция if

Инструкция if…else

Несколько условий else if

Условный тернарный оператор ?:

Инструкция switch

Инструкция if

Конструкция if…else

Инструкция else if

Тернарный оператор (?:)

Задачи

Четное или нечетное число

Сколько цифр в числе и его знак

Принадлежность точки окружности

Определить существование треугольника по трем сторонам

Найти максимальное число из трех

Найти сумму или произведение цифр трехзначного числа

What is an if…else statement in JavaScript?

Examples of if…else statements in JavaScript

Examples of multiple conditions (if…else if…else statements) in JavaScript

When to use switch statements over if…else statements?

The logical AND (&&) operator and if…else statements in JavaScript

The logical OR (||) operator and if…else statements in JavaScript

The logical NOT (!) operator and if…else statements in JavaScript

Conditional (ternary) operator in JavaScript

Conclusion

What is an if…else statement in JavaScript?

Examples of if…else statements in JavaScript

Examples of multiple conditions (if…else if…else statements) in JavaScript

When to use switch statements over if…else statements?

The logical AND (&&) operator and if…else statements in JavaScript

The logical OR (||) operator and if…else statements in JavaScript

The logical NOT (!) operator and if…else statements in JavaScript

Conditional (ternary) operator in JavaScript

Conclusion