Зачем нужен оператор if else в javascript

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

Условные операторы позволяют пропустить или выполнить другие операторы в зависимости от значения указанного выражения. Эти операторы являются точками принятия решений в программе, и иногда их также называют операторами «ветвления».

Если представить, что программа — это дорога, а интерпретатор JavaScript — путешественник, идущий по ней, то условные операторы можно представить как перекрестки, где программный код разветвляется на две или более дорог, и на таких перекрестках интерпретатор должен выбирать, по какой дороге двигаться дальше.

Оператор if/else

Оператор if — это базовый управляющий оператор, позволяющий интерпретатору JavaScript принимать решения или, точнее, выполнять операторы в зависимости от условий. Оператор if имеет две формы. Первая:

if (выражение) оператор

В этой форме сначала вычисляется выражение. Если полученный результат является истинным, то оператор выполняется. Если выражение возвращает ложное значение, то оператор не выполняется. Например:

if (username == null) // Если переменная username равна null или undefined username = "Alex"; // определить ее

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

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

if (выражение) оператор1 else оператор2

Эта форма выполняет оператор1, если выражение возвращает истинное значение, и оператор2, если выражение возвращает ложное значение. Например:

if (n == 1) console.log("Получено 1 новое сообщение."); else console.log("Получено " + n + " новых сообщений.");

Оператор else if

Оператор if/else вычисляет значение выражения и выполняет тот или иной фрагмент программного кода, в зависимости от результата. Но что если требуется выполнить один из многих фрагментов? Возможный способ сделать это состоит в применении оператора 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 предыдущего оператора.

Оператор switch

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

Оператор switch предназначен именно для таких ситуаций. За ключевым словом switch следует выражение в скобках и блок кода в фигурных скобках:

switch(выражение)

Однако полный синтаксис оператора switch более сложен, чем показано здесь. Различные места в блоке помечены ключевым словом case, за которым следует выражение и символ двоеточия.

Когда выполняется оператор switch, он вычисляет значение выражения, а затем ищет метку case, соответствующую этому значению (соответствие определяется с помощью оператора идентичности ===). Если метка найдена, выполняется блок кода, начиная с первой инструкции, следующей за меткой case. Если метка case с соответствующим значением не найдена, выполнение начинается с первой инструкции, следующей за специальной меткой default:. Если метка default: отсутствует, блок оператора switch пропускается целиком.

Работу оператора switch сложно объяснить на словах, гораздо понятнее выглядит объяснение на примере. Следующий оператор switch эквивалентен повторяющимся операторам if/else, показанным в предыдущем примере:

switch(n) < case 1: // Выполняется, если n === 1 // Выполнить блок 1 break; // Здесь остановиться case 2: // Выполняется, если n === 2 // Выполнить блок 2 break; // Здесь остановиться case 3: // Выполняется, если n === 3 // Выполнить блок 3 break; // Здесь остановиться default: // Если все остальное не подходит. // Выполнить блок 4 break; // Здесь остановиться >

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

В случае отсутствия операторов break оператор switch начнет выполнение блока кода с меткой case, соответствующей значению выражения, и продолжит выполнение операторов до тех пор, пока не дойдет до конца блока. В редких случаях это полезно для написания программного кода, который переходит от одной метки case к следующей, но в 99% случаев следует аккуратно завершать каждый блок case оператором break. (При использовании switch внутри функции вместо break можно использовать оператор return. Оба этих оператора служат для завершения работы оператора switch и предотвращения перехода к следующей метке case.)

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

function convert(x) < switch(typeof x) < // Преобразовать число в шестнадцатеричное целое case 'number': return x.toString(16); // Вернуть строку, заключенную в кавычки case 'string': return '"' + x + '"'; // Любой другой тип преобразуется обычным способом default: return x.toString(); >> console.log(convert(1067)); // Результат "42b"

Обратите внимание, что в двух предыдущих примерах за ключевыми словами case следовали числа или строковые литералы. Именно так оператор switch чаще всего используется на практике, но стандарт ECMAScript позволяет указывать после case произвольные выражения.

Оператор switch сначала вычисляет выражение после ключевого слова switch, а затем выражения case в том порядке, в котором они указаны, пока не будет найдено совпадающее значение. Факт совпадения определяется с помощью оператора идентичности ===, а не с помощью оператора равенства ==, поэтому выражения должны совпадать без какого-либо преобразования типов.

Поскольку при каждом выполнении оператора switch вычисляются не все выражения case, следует избегать использования выражений case, имеющих побочные эффекты, такие как вызовы функций и присваивания. Безопаснее всего ограничиваться в выражениях case константными выражениями.

Как объяснялось ранее, если ни одно из выражений case не соответствует выражению switch, оператор switch начинает выполнение оператора с меткой default:. Если метка default: отсутствует, тело оператора switch полностью пропускается. Обратите внимание, что в предыдущих примерах метка default: указана в конце тела оператора switch после всех меток case. Это логичное и обычное место для нее, но на самом деле она может располагаться в любом месте внутри оператора switch.

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

Тернарный оператор ?: — это единственный тернарный (с тремя операндами) оператор в JavaScript. Этот оператор обычно записывается как . хотя в программах он выглядит по-другому. Он имеет три операнда, первый предшествует символу ?, второй — между ? и :, третий — после :. Используется он следующим образом:

var n = 10; // Определить четное или нечетное число var result = (n % 2 == 0) ? "четное" : "нечетное"; console.log(result); // Результат "четное"

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

Тот же результат можно получить с помощью оператора if, но оператор ?: часто оказывается удобным сокращением. Ниже приводится типичный пример, в котором проверяется, определена ли переменная (и имеет истинное значение), и если да, то берется ее значение, а если нет, берется значение по умолчанию:

var message = 'Привет ' + (username ? username : 'друг');

Эта проверка эквивалентна следующей конструкции if, но более компактна:

var message = 'Привет '; if (username) < message += username; >else

if. else

Инструкция if выполняет инструкцию, если указанное условие выполняется (истинно). Если условие не выполняется (ложно), то может быть выполнена другая инструкция.

Синтаксис

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

Выражение, которое является либо истинным, либо ложным.

Инструкция, выполняемая в случае, если значение «условиe» истинно ( true ). Может быть любой инструкцией в том числе и вложенным if . Для группировки нескольких инструкций используется блок ( <. >), Когда никакого действия не требуется, может использоваться пустая инструкция.

Инструкция, выполняемая в случае, если значение «условиe» ложно ( false ). Может быть любой инструкцией, в том числе и вложенным if . Инструкции тоже можно группировать в блок.

Описание

Несколько команд if . else могут быть вложены для создания условия else if . Обратите внимание, что в JavaScript нет ключевого слова elseif (в одно слово).

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

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

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

Чтобы выполнить несколько инструкций в условии, используйте блочный оператор (<. >) для группирования этих инструкций. В общем, хорошей практикой всегда является использование блочных операторов, особенно в коде, включающем вложенные операторы if :

if (условие) < инструкции1 >else

Не путайте примитивные логические значения true и false с правдивостью или ложностью булева объекта. Любое значение, которое не undefined , null , 0 , NaN или пустая строка («»), и любой объект, включая объект Boolean, значение которого является ложным, считается правдивым при использовании в качестве условия. Например:

var b = new Boolean(false); if (b) // это условие истинно

Примеры

Использование if. else

if (cipher_char === from_char)  result = result + to_char; x++; > else  result = result + clear_char; >

Использование else if

Обратите внимание, что в JavaScript нет синтаксиса elseif . Однако вы можете записать его с пробелом между else и if :

if (x > 5)  > else if (x > 50)  > else  >

Присваивание в условном выражении

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

if (x = y)  /* сделать что-то */ >

Если вам нужно использовать присваивание в условном выражении, обычной практикой является размещение дополнительных скобок вокруг присваивания. Например:

if ((x = y))  /* сделать что-то */ >

Спецификации

Specification
ECMAScript Language Specification # sec-if-statement

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Product help
Report an issue

Our communities

Developers

Web Technologies
Learn Web Development
MDN Plus
Hacks Blog

Website Privacy Notice
Cookies
Legal
Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

if, if…else, else if

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

Синтаксис if

 if (условие)

if — выражение условия, которое принимает значение true или false

Инструкция — выполняется если условие принимает значение true

Пример №1

 let scores = prompt('Сколько баллов вы набрали на экзамене') if (scores > 90)

Если введенное число scores больше 90 (условие принимает значение true ), выполнится инструкция — модальное окно с текстом Ваша оценка 5

Пример №2

 let scores = prompt('Сколько баллов вы набрали на экзамене') if (scores > 90) alert('Ваша оценка 5');

Когда инструкция описана в одну строку, запись может иметь такой вид

Пример №3

 let scores = prompt('Сколько баллов вы набрали на экзамене') if (scores > 90)

В том случае, если в инструкции более одной строки, код заключается в фигурные скобки.

Хорошей практикой считается использование блочного оператора <. >всегда — это улучшает читаемость кода.

Логическое преобразование в if (. )

0, пустая строка, null, undefined и NaN — false
если 0 приведено к строке — true
все остальные значения — true

Пример №4

 if (0)

При таком условии инструкция не выполнится никогда.

Пример №5

 if (1)

Условие true — инструкция выполнится.

Блок else

else («иначе») — это необязательный блок, в котором можно описать еще одну инструкцию, которая выполнится когда условие в if принимает значение false .

Синтаксис if…else

 if (условие) < инструкция №1 >else

Если условие принимает значение true выполнится инструкция №1 , если false тогда инструкция №2 .

Пример №6

 let scores = prompt('Сколько баллов вы набрали на экзамене') if (scores > 90) < alert('Ваша оценка 5'); alert('Поздравляем! Вы поступите на бюджет.'); >else

Использование блока else if

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

В JavaScript нет ключевого слова elseif (в одно слово).

Пример №7

 let scores = prompt('Сколько баллов вы набрали на экзамене') if (scores > 90) < alert('Ваша оценка 5'); alert('Поздравляем! Вы поступите на бюджет.'); >else if (scores 60) < alert('Вы не получили 5'); alert('Вы можете претендовать только на платное обучение.'); >else

В данном случае, если scores больше 90 выполнится первая инструкция, если scores меньше или равно 90, а также более 60, тогда вторая. Если значение scores не попадает под эти два условия выполнится инструкция в else . В такой конструкции блок else также не является обязательным и может быть пропущен.

Пример №8

 let scores = prompt('Сколько баллов вы набрали на экзамене') if (scores > 90) < alert('Ваша оценка 5'); alert('Поздравляем! Вы поступите на бюджет.'); >else if (scores 60) < alert('Вы получили 4'); alert('Вы можете претендовать только на платное обучение.'); >else if (scores 30) < alert('Вы получили 3'); alert('Ваши шансы на поступление низки'); >else

Блок else if может быть добавлен 1, 2 и более раз.

Итого

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

Skypro — научим с нуля

Условное ветвление: if, ‘?’

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

Для этого мы можем использовать инструкцию if и условный оператор ? , который также называют оператором «вопросительный знак».

Инструкция «if»

Инструкция if(. ) вычисляет условие в скобках и, если результат true , то выполняет блок кода.

let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', ''); if (year == 2015) alert( 'Вы правы!' );

В примере выше, условие – это простая проверка на равенство ( year == 2015 ), но оно может быть и гораздо более сложным.

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

if (year == 2015)

Мы рекомендуем использовать фигурные скобки <> всегда, когда вы используете инструкцию if , даже если выполняется только одна команда. Это улучшает читаемость кода.

Преобразование к логическому типу

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

Давайте вспомним правила преобразования типов из главы Преобразование типов:

Число 0 , пустая строка «» , null , undefined и NaN становятся false . Из-за этого их называют «ложными» («falsy») значениями.
Остальные значения становятся true , поэтому их называют «правдивыми» («truthy»).

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

if (0) < // 0 is falsy . >

…а при таком – выполнится всегда:

if (1) < // 1 is truthy . >

Мы также можем передать заранее вычисленное в переменной логическое значение в if , например так:

let condition = (year == 2015); // преобразуется к true или false if (condition)

Блок «else»

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

let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', ''); if (year == 2015) < alert( 'Да вы знаток!' ); >else < alert( 'А вот и неправильно!' ); // любое значение, кроме 2015 >

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

Иногда нужно проверить несколько вариантов условия. Для этого используется блок else if .

let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', ''); if (year < 2015) < alert( 'Это слишком рано. ' ); >else if (year > 2015) < alert( 'Это поздновато' ); >else

В приведённом выше коде JavaScript сначала проверит year < 2015 . Если это неверно, он переходит к следующему условию year >2015 . Если оно тоже ложно, тогда сработает последний alert .

Блоков else if может быть и больше. Присутствие блока else не является обязательным.

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

Иногда нам нужно определить переменную в зависимости от условия.

let accessAllowed; let age = prompt('Сколько вам лет?', ''); if (age > 18) < accessAllowed = true; >else < accessAllowed = false; >alert(accessAllowed);

Так называемый «условный» оператор «вопросительный знак» позволяет нам сделать это более коротким и простым способом.

Оператор представлен знаком вопроса ? . Его также называют «тернарный», так как этот оператор, единственный в своём роде, имеет три аргумента.

let result = условие ? значение1 : значение2;

Сначала вычисляется условие : если оно истинно, тогда возвращается значение1 , в противном случае – значение2 .

let accessAllowed = (age > 18) ? true : false;

Технически, мы можем опустить круглые скобки вокруг age > 18 . Оператор вопросительного знака имеет низкий приоритет, поэтому он выполняется после сравнения > .

Этот пример будет делать то же самое, что и предыдущий:

// оператор сравнения "age > 18" выполняется первым в любом случае // (нет необходимости заключать его в скобки) let accessAllowed = age > 18 ? true : false;

Но скобки делают код более простым для восприятия, поэтому мы рекомендуем их использовать.

На заметку:

В примере выше вы можете избежать использования оператора вопросительного знака ? , т.к. сравнение само по себе уже возвращает true/false :

// то же самое let accessAllowed = age > 18;

Несколько операторов „?“

Последовательность операторов вопросительного знака ? позволяет вернуть значение, которое зависит от более чем одного условия.

let age = prompt('Возраст?', 18); let message = (age < 3) ? 'Здравствуй, малыш!' : (age < 18) ? 'Привет!' : (age < 100) ? 'Здравствуйте!' : 'Какой необычный возраст!'; alert( message );

Поначалу может быть сложно понять, что происходит. Но при ближайшем рассмотрении мы видим, что это обычная последовательная проверка:

Первый знак вопроса проверяет age < 3 .
Если верно – возвращает 'Здравствуй, малыш!' . В противном случае, проверяет выражение после двоеточия „:“, вычисляет age < 18 .
Если это верно – возвращает 'Привет!' . В противном случае, проверяет выражение после следующего двоеточия „:“, вычисляет age < 100 .
Если это верно – возвращает 'Здравствуйте!' . В противном случае, возвращает выражение после последнего двоеточия – 'Какой необычный возраст!' .

Вот как это выглядит при использовании if..else :

if (age < 3) < message = 'Здравствуй, малыш!'; >else if (age < 18) < message = 'Привет!'; >else if (age < 100) < message = 'Здравствуйте!'; >else

Нетрадиционное использование „?“

Иногда оператор «вопросительный знак» ? используется в качестве замены if :

let company = prompt('Какая компания создала JavaScript?', ''); (company == 'Netscape') ? alert('Верно!') : alert('Неправильно.');

В зависимости от условия company == 'Netscape' , будет выполнена либо первая, либо вторая часть после ? .

Здесь мы не присваиваем результат переменной. Вместо этого мы выполняем различный код в зависимости от условия.

Не рекомендуется использовать оператор вопросительного знака таким образом.

Несмотря на то, что такая запись короче, чем эквивалентная инструкция if , она хуже читается.

Вот, для сравнения, тот же код, использующий if :

let company = prompt('Какая компания создала JavaScript?', ''); if (company == 'Netscape') < alert('Верно!'); >else

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

Смысл оператора «вопросительный знак» ? – вернуть то или иное значение, в зависимости от условия. Пожалуйста, используйте его именно для этого. Когда вам нужно выполнить разные ветви кода – используйте if .

Задачи

if (строка с нулём)

важность: 5

Выведется ли alert ?

if ("0")

Да, выведется.

Любая строка, кроме пустой (а строка "0" – не пустая), в логическом контексте становится true .

Можно запустить и проверить:

if ("0")

Название JavaScript

важность: 2

Используя конструкцию if..else , напишите код, который будет спрашивать: „Какое «официальное» название JavaScript?“

Если пользователь вводит «ECMAScript», то показать: «Верно!», в противном случае – отобразить: «Не знаете? ECMAScript!»