Что такое условный оператор javascript

Что такое условный оператор javascript

The if-else or conditional statement will perform some action for a specific condition. If the condition meets then a particular block of action will be executed otherwise it will execute another block of action that satisfies that particular condition. Such control statements are used to cause the flow of execution to advance and branch based on changes to the state of a program.

Example: This example describes the if-statement in Javascript.

Javascript

Output:

JavaScript’s conditional statements:

• if
• if-else
• nested-if
• if-else-if ladder

We will understand each conditional statement, its syntax, flowchart, and examples. Please refer to the Switch Case in JavaScript article to understand the switch case. Let’s begin with the if-statement.

JavaScript if-statement: It is a conditional statement used to decide whether a certain statement or block of statements will be executed or not i.e if a certain condition is true then a block of statement is executed otherwise not.

Syntax:

The if statement accepts boolean values – if the value is true then it will execute the block of statements under it. If we do not provide the curly braces ‘<‘ and ‘>’ after if( condition ) then by default if statement considers the immediate one statement to be inside its block. For example,

Flow chart:

Example: Here is a simple example demonstrating the if statement.

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

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

Для примера рассмотрим онлайн-формы: если все поля содержат требуемую информацию, форму можно отправить; но если обязательные поля формы не заполнены, отправить ее не получится.

Для выполнения таких задач используются условные операторы, которые являются неотъемлемой частью всех языков программирования.

Условные операторы выполняют конкретное действие в зависимости от того, какой результат получила предыдущая задача – true или false.

Вот несколько примеров использования условных операторов в JavaScript:

• Проверка местоположения пользователя и переключение языка (в зависимости от страны).
• Отправка формы или отображение предупреждения рядом с незаполненными обязательными полями.
• Открытие выпадающего меню при событии клика (или его закрытие, если он уже открыт).
• Отображение рекламы алкогольных напитков, если пользователь достиг возраста употребления алкоголя.

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

В этом мануале вы ознакомитесь с условными операторами, ключевыми словами if, else и else if и тернарным оператором.

Оператор if

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

Оператор if – это ключевое слово if, условие в скобках и код, который нужно выполнить, в фигурных скобках.

if (condition) <
// code that will execute if condition is true
>

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

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

// Set balance and price of item
const balance = 500;
const jeans = 40;
// Check if there are enough funds to purchase item
if (jeans <= balance) <
console.log(«You have enough money to purchase the item!»);
>
You have enough money to purchase the item!

Баланс пользователя – 500. Пользователь хочет купить джинсы за 40. Используя оператор меньше или равно, мы можем проверить, меньше ли цена джинсов суммы средств на счете пользователя. Поскольку jeans <= balance оценивается как true, блок кода будет выполнен.

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

// Set balance and price of item
const balance = 500;
const phone = 600;
// Check if there is enough funds to purchase item
if (phone <= balance) <
console.log(«You have enough money to purchase the item!»);
>

Поскольку phone <= balance оценивается как false, программа проигнорирует этот блок кода и перейдет к следующей задаче.

Оператор else

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

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

Оператор else пишется после оператора if и не имеет условий в круглых скобках. Синтаксис базового выражения if…else выглядит так:

if (condition) <
// code that will execute if condition is true
> else <
// code that will execute if condition is false
>

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

// Set balance and price of item
const balance = 500;
const phone = 600;
// Check if there is enough funds to purchase item
if (phone <= balance) <
console.log(«You have enough money to purchase the item!»);
> else <
console.log(«You do not have enough money in your account to purchase this item.»);
>
You do not have enough money in your account to purchase this item.

Поскольку условие if не было выполнено, код переходит к оператору else.

Этот синтаксис может быть очень полезен при отображении предупреждений или предоставлении пользователю информации о том, какие действия следует предпринять далее. Обычно программа должна выполнить одно действие, если выражение истинно, и другое действие, если выражение ложно. Потому if…else встречается чаще, чем просто if.

Выражения else if

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

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

if (condition a) <
// code that will execute if condition a is true
> else if (condition b) <
// code that will execute if condition b is true
> else if (condition c) <
// code that will execute if condition c is true
> else <
// code that will execute if all above conditions are false
>

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

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

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

Приложение будет следовать таким условиям:

• 90 и свыше – А.
• 80-89 баллов – B.
• 70-79 баллов – С.
• 60-69 баллов – D.
• 59 баллов и ниже – F.

Создайте файл grades.js и поместите в него простой набор операторов.

// Set the current grade of the student
let grade = 87;
// Check if grade is an A, B, C, D, or F
if (grade >= 90) <
console.log(«A»);
> else if (grade >= 80) <
console.log(«B»);
> else if (grade >= 70) <
console.log(«C»);
> else if (grade >= 60) <
console.log(«D»);
> else <
console.log(«F»);
>
B

Сначала программа сравнит заданное значение с самым высоким баллом (больше или равен 90). После этого оператор else if проверит остальные оценки.

Заданное значение 87 также технически соответствует группам C, D и F, но программа остановится на первом соответствии условия и выведет B.

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

Тернарный оператор используется как сокращение оператора if … else.

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

(condition) ? expression on true : expression on false

В приведенном выше выражении сначала записывается условие, за ним следует символ ?. Первое выражение должно быть истинным, а второе – ложным. По сути, это оператор if…else с более компактным синтаксисом.

Для примера попробуйте создать программу, которая будет проверять, достиг ли пользователь 21 года.

Если да, программа выведет «You may enter», если нет, она выведет в консоль «You may not enter». Создайте файл age.js и добавьте в него код:

// Set age of user
let age = 20;
// Place result of ternary operation in a variable
const oldEnough = (age >= 21) ? «You may enter.» : «You may not enter.»;
// Print output
oldEnough;
‘You may not enter.’

Поскольку пользователю меньше 21 года, программа выведет «You may not enter».

Заключение

Условные операторы позволяют управлять потоком программ. Они являются одним из основных составляющих большинства программ и присутствуют практически во всех языках программирования.

Javascript Conditional Operators: if, ‘?’

The if(. ) statement is the most fundamental of the conditional statements, as it evaluates whether a statement is true or false, and runs only if the statement returns true. In case of a false result the code block will be ignored and the program will skip to the next section.

Syntax:

The condition in this example is a simple equality check (answer == ‘yes’), but it can be much more complicated.

Javascript if operator

When we execute more than one statement, we must write our code block inside curly brackets.

Syntax:

Example of the if(. ) with code block inside curly brackets:

Javascript if operator

We recommend you to write your code between curly braces <> every time you use an if statement, no matter that there is only one statement to execute, as it improves readability.

Nested if statement means an if statement inside that statement. JavaScript allows us to nest if statements within if statements. For example, we can place an if statement inside another if statement.

Syntax:

Boolean Conversion

The if(. ) statement evaluates the expression in the parentheses converting the result to a boolean.

Let’s remember the conversion rules from the chapter Data Types:

• An empty string «», a number 0, null, undefined, and NaN become false. That’s the reason why they are called “falsy” values.
• Other values become true and they are called “truthy”.

So this code would never execute:

Javascript if operator

The “else” Statement

The if(. ) statement can contain an optional else block, which executes when the condition is false.

The else statement should be written after the if statement, and has no condition in parentheses. Here is the syntax for a simple if. else statement.

Example of the “else” statement:

Javascript if..else operator

The “else if” Statement

The else if statement let us to test several variants of a condition, when we need more than two options. In other words, we use the else if statement to specify a new condition if the first one is false.

Syntax:

Example of the else if statement:

Javascript if..else operator

In the example above, JavaScript first checks number > 16. If it is falsy, it goes to the next condition number else if blocks, the last and final else is optional.

JavaScript will try to run all the statements in order, and will default to the else block if none of them are successful. In case of many else if statements, the switch statement can be preferred for readability.

Conditional operator ‘?’

The “conditional” or “question mark” operator lets us in a shorter and simpler way assign a variable. The operator is also called “ternary”, because it has three operands. It is actually the only JavaScript operator which has that many. Conditional (ternary) statements are an integral part of all programming languages, which used to perform different actions based on different conditions. For doing that you can use the if statement and the conditional operator ‘?’ (“question mark”) in your code.

Example of the conditional operator:

Javascript if..else operator

Name already in use

ru.javascript.info / 1-js / 02-first-steps / 10-ifelse / article.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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