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

Здравствуйте, будущие маги JavaScript! Сегодня мы окунемся в神奇 мир условных операторов. Не волнуйтесь, если вы еще ни разу не писали строку кода – я буду вашим доброжелательным проводником на этом захватывающем пути. Так что достаньте свои виртуальные палочки (клавиатуры) и давайте наведем немного условных заклинаний!

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

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

Троичный оператор: Швейцарский армейский нож условных операторов

Звезда нашего сегодняшнего шоу – троичный оператор. Это как компактное, super-эффективное if-else statement. Давайте разберем его:

condition ? expressionIfTrue : expressionIfFalse

Это как если бы мы задавали вопрос:

• Если ответ да (true), сделайте первое.
• Если ответ нет (false), сделайте второе.

Синтаксис: Рецепт для условного магического зелья

Давайте посмотрим на ингредиенты нашего условного зелья:

1. condition: Это наш вопрос. идет ли дождь? авторизован ли пользователь? чётное ли число?
2. ?: Это как если бы мы говорили "then..."
3. expressionIfTrue: Что делать, если условие верно
4. :: Это как если бы мы говорили "иначе..."
5. expressionIfFalse: Что делать, если условие ложно

Пример 1: Решение о зонтике

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

let isRaining = true;
let decision = isRaining ? "Bring an umbrella" : "Leave the umbrella at home";
console.log(decision);

Если вы запустите этот код, он выведет: "Bring an umbrella"

Давайте разберем это:

• isRaining – это наше условие. Оно установлено в true.
• Если идет дождь (isRaining – true), выражение вернет "Bring an umbrella".
• Если не идет дождь, оно вернет "Leave the umbrella at home".
• Мы храним этот результат в переменной decision.

Попробуйте изменить isRaining на false и посмотрите, что произойдет!

Пример 2: Проверка возраста

Теперь давайте создадим программу, которая проверяет, достаточно ликому-то лет, чтобы голосовать.

let age = 20;
let canVote = age >= 18 ? "Yes, you can vote!" : "Sorry, you're too young to vote.";
console.log(canVote);

Это выведет: "Yes, you can vote!"

Вот что происходит:

• Мы устанавливаем age в 20.
• Наше условие – age >= 18 (достаточно ли лет, чтобы голосовать?).
• Если да, мы возвращаем "Yes, you can vote!".
• Если нет, мы возвращаем "Sorry, you're too young to vote."

Попробуйте изменить возраст на 16 и посмотрите, как изменится вывод!

Пример 3: Назначение оценки

Давайте усложним задачу. Мы создадим программу, которая назначает оценку на основе балла.

let score = 85;
let grade = score >= 90 ? 'A' :
score >= 80 ? 'B' :
score >= 70 ? 'C' :
score >= 60 ? 'D' : 'F';
console.log(`Your grade is: ${grade}`);

Это выведет: "Your grade is: B"

Ух, это выглядит по-другому! Мы на самом деле последовательно используем несколько троичных операторов. Это как водопад решений:

• Сначала мы проверяем, не менее ли 90 баллов. Если да, это 'A'.
• Если нет, мы проверяем, не менее ли 80 баллов. Если да, это 'B'.
• Это продолжается до 'F' для всего, что ниже 60.

Это мощная техника, но используйте ее с умом – слишком много цепочек могут сделать ваш код сложным для чтения!

Обработка null значений: Оператор null-коалиции

Иногда нам приходится иметь дело с значениями, которые могут быть null или undefined. На сцену выходит оператор null-коалиции: ??

let username = null;
let displayName = username ?? "Guest";
console.log(`Welcome, ${displayName}!`);

Это выведет: "Welcome, Guest!"

Вот что происходит:

• Если username равен null или undefined, мы используем "Guest".
• Если username имеет значение, мы используем его.

Это удобный способ предоставления значений по умолчанию!

Шпаргалка по условным операторам

Вот quick reference table для операторов, которые мы изучили:

Оператор	Название	Назначение
?:	Троичный оператор	Принимать решение между двумя значениями на основе условия
??	Оператор null-коалиции	Предоставлять значение по умолчанию при работе с null или undefined

Remember, practice makes perfect! Try creating your own examples and experiments with these operators. Before you know it, you'll be conducting a whole orchestra of conditionals in your code!

Happy coding, and may your conditionals always be true (when you want them to be)!

Credits: Image by storyset