Режиссерская версия.

Дамы и господа, наденьте акваланг. Пришло время вернуться к условиям. 🤿 В этот раз пойдем немного дальше. В этом продолжении последней статьи мы рассмотрим еще несколько концепций, касающихся условий в JS.

Сегодня предстоит многое осветить, поэтому примеров кода будет больше, чем обычно. Не стесняйтесь попробовать их в консоли, пока будете следовать! 👩‍💻👨‍💻

Без дальнейших церемоний, давайте взглянем на первую сегодняшнюю новую концепцию: вложенные операторы if!

Вложенные операторы if

Почему да, вы можете полностью положить ifs в свои ifs! 🤯

if (first === 1) {
  if (second === 2) {
    third = 1234
  }
  message = "test"
}

Мы называем эти вложенные операторы if.

В этом случае код third = 1234 будет выполняться только тогда, когда first === 1 истинно, а second === 2 истинно.

Код message = "test" будет выполнен, если first === 1 истинно. Ему все равно на результат second === 2, так как он находится за пределами своего блока условий.

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

Быстрый комментарий

Есть кое-что, что я совершенно забыл объяснить с тех пор, как мы начали эти уроки по JS: как оставлять комментарии в коде? 🤔

Подумайте об этом: вы только что написали какой-то сложный алгоритм. Вы хотели бы оставить какое-нибудь простое объяснение вашего алгоритма на английском для следующего раза, когда вы вернетесь к этому коду, или даже для других разработчиков, работающих над проектом!

Но если вы это сделаете, JS попытается интерпретировать ваши комментарии, и вы получите ошибки, поскольку это простой английский и, следовательно, недействительный JS! 😞

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

Однострочные комментарии

Вот как вы их пишете:

// This is a single-line comment

И это все! JS не будет пытаться выполнить что-либо после двойной косой черты (//): так он узнает, что это комментарий. Вы можете писать туда все, что хотите. Обратите внимание, что их также можно написать в конце строки кода:

if (number === 1234) {
  message = "hello" // We're assigning the value "hello" to message
}

JS просто проигнорирует все после // в этой строке кода. Он все равно выполнит все до них! Как я уже говорил, это очень полезно. 👍

Многострочные комментарии

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

// This is
// a multi-line
// comment

И это сработает. Но когда комментарий состоит из нескольких строк, может быть утомительно писать // в каждой строке. К счастью, есть другой синтаксис, который вы можете использовать в JS именно для этого случая:

/* This
is a
multi-line
comment.
It can be
as
long
as you
want it. */

С таким синтаксисом JS игнорирует все, что находится между /* и */. Это довольно удобно, когда вы хотите написать длинный комментарий размером с абзац.

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

Операторы

Операторы сравнения

До сих пор мы проверяли только сравнения на равенство, т. е. «равно ли это значение слева этому значению справа?»».

stuff === 1234

Но есть и другие операторы сравнения! Это то, что мы называем символами, которые вы используете в JS для сравнения двух значений, например. ===.

Вот краткий список некоторых из них:

stuff > 1234

stuff строго больше 1234?

stuff >= 1234

stuff больше или равно 1234?

stuff < 1234

stuff строго меньше 1234?

stuff <= 1234

stuff меньше или равно 1234?

stuff !== 1234

stuff не равно 1234?

И вот быстрый пример:

var number = 12345
if (number > 1000) {
  // that condition is true, so this code will be executed
}

Не стесняйтесь экспериментировать с этими новыми операторами в консоли. 🙂

Логические операторы

А что, если вы хотите проверить несколько условий одновременно? Например: «Это число больше 1000 и меньше 2000?».

Вы можете сделать это следующим образом:

if (randomNumber > 1000) {
  if (randomNumber < 2000) {
    // do stuff here
  }
}

И это сработает. Но что, если вы хотите проверить, больше ли число 1000 ИЛИ меньше 500, и только потом выполнять какой-то код?

Вы можете сделать это следующим образом:

if (randomNumber > 1000) {
  // do stuff here
}
if (randomNumber < 500) {
  // write the exact same stuff here
}

Это сработает, но некрасиво. 😕 Вам придется скопировать и вставить свой код, чтобы он был одинаковым в обоих блоках. Позже, если вы решите изменить код в одном блоке, вам придется не забыть внести те же изменения в другом блоке. Это чревато ошибками! В целом при программировании мы стараемся избегать дублирования кода.

И тут на помощь приходят логические операторы. 👍 Сегодня поговорим о двух из них, с которыми вы столкнетесь чаще всего.

Во-первых, это &&, также известный как AND. Да, это двойной символ «&». С помощью этого мы можем сказать JS: «Это условие должно быть истинным И это другое условие должно быть истинным, иначе не выполняйте блок кода, который следует за ним.».

Вот пример:

if (monsterName === "Ivysaur" && level === 32) {
  // Ivysaur is evolving into Venusaur!
}

Этот код будет выполнен только в том случае, если monsterName равно Ivysaur, а level равно 32. И да, это очередная отсылка к какой-то рандомной игре про карманных монстров. 😄

Другой оператор — ||, также известный как ИЛИ. Этот «|» символ называется трубой. Возможно, вам никогда не приходилось использовать его раньше (у меня не было, пока я не начал программировать)! На QWERTY-клавиатуре вы можете ввести его, нажав Shift + Backslash. Если вы француз 🥐 и являетесь счастливым обладателем клавиатуры AZERTY 🇫🇷 (я пишу эти статьи, используя одну из них! 😁), этот символ можно получить, нажав Alt Gr + 6. >.

Для других типов клавиатур удачи. 😅

Этот оператор ||, как вы могли догадаться, позволяет вам сказать JS: «Пожалуйста, выполните этот блок кода, если либо это условие истинно, либо это условие истинно. Или даже если они оба верны. Но если они оба ложны, не запускайте блок кода».

Например:

if (breed === "Golden Retriever" || breed === "Shiba Inu") {
  // This is a dog.
}

На шаг впереди

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

Например:

var number = 50000
if (number > 100 && (number < 1000 || number > 10000)) {
  // do stuff
}

Хорошо, это немного вызывает головную боль… 🤯 Что здесь понимает JS? Ну, как и в математике, он начал бы с проверки условия внутри «самого глубокого» уровня скобок.

Вот это number < 1000 || number > 10000. Верно ли это условие? Ну, number равно 50000, что не меньше 1000. Но оно больше 10000! И, как мы видели ранее, оператор || довольно крутой чувак: пока одно из двух условий истинно, все это верно. Поскольку number больше 10000, выполняется одно из двух условий. Так что все утверждение в скобках верно!

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

var number = 50000
if (number > 100 && true) {
  // do stuff
}

Итак, что осталось? Что ж, 50000 больше 100, так что это тоже верно.

var number = 50000
if (true && true) {
  // do stuff
}

Что опять с &&? Да, все утверждение истинно, если оба условия истинны, и только в этом случае. Похоже, это именно то, что здесь происходит!

Поскольку все условие истинно, JS выполнит блок кода.

Что еще?

Можем ли мы получить больше знаний? Это вообще возможно? 🤯

Почему да, да, это абсолютно так. 😎

Давайте поговорим о else и else if.

еще

else используется после if. С else мы можем сказать: «О, это условие после if было неверным? Что ж, в таком случае выполните этот код!”

Вот как это выглядит:

var tomatoColor = "red"
if (tomatoColor === "blue") {
  // do something if the color of the tomato is blue
} else {
  // otherwise do something if the tomato is any other color
  // in this example, this is the code block that will be executed
}

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

Условие if было ложным, поэтому вместо него будет выполнен блок кода после else.

Довольно просто. Что насчет else if сейчас?

иначе, если

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

…наверное, будет понятнее на примере: 😅

var fruit = "apple"
if (fruit === "orange") {
  // that condition is false, this block won't be executed
} else if (fruit === "apple") {
  // that condition is true, this is the block that'll be executed
} else if (fruit === "banana") {
  // not executed
}

Здесь мы видим, что второй блок будет выполнен. Первое условие ложно, поэтому JS перейдет к следующему и проверит его. fruit === "apple" истинно, поэтому блок кода, связанный с этим условием, будет выполнен.

Вы можете смешать if, else if и else вместе:

var country = "France"
if (country === "Iceland") {
  // the condition is false, this won't be executed
} else if (country === "Chile") {
  // not executed either
} else if (country === "South Korea") {
  // not executed either
} else {
  // none of the conditions above were true, this code will run!
}

Вот и все! 🎉

Подведем итог

Фу! Это был настоящий урок сегодня. Мы рассмотрели много вещей, касающихся условий:

  • Вложенные операторы if
  • Операторы сравнения: >, >=, <, <=, !=
  • Логические операторы: &&, ||
  • Скобки
  • else и else if

Мы даже узнали о комментариях, ваших лучших друзьях, когда дело доходит до программирования! 😁

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

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

Берегите себя и до встречи в следующий раз! 🚀

Следующая статья доступна здесь!

PS: Как обычно, дайте мне знать, что вы думаете в комментариях! Все конструктивные отзывы приветствуются! 😊

Примечание. Этот пост является частью серии.