Базовые инструкции

Сейчас мы с вами посмотрим на управляющие инструкции, Т.е инструкции которые управляют ходом выполнения вашей программы. Что я имею ввиду?

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

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

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

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

Это конструкция ветвления, прочитывается она достаточно естественно.

Если (какое-то условие выполняется) {
выполнить следующее
} иначе {
выполнить что-то другое
}

А теперь уже более корректный пример:

// ЕСЛИ
if (/* в круглых скобочках пишется условие */) {
do_something();
} else {
// В ПРОТИВНОМ СЛУЧАЕ
console.error("Все плохо =(");
do_something_else();
}

Вы можете опускать ветку else... ну уж если вы ничего не хотите делать если условие не выполняется.

if (true) {
// в условии находится выражение(булевый литерал) равное true. Как можно понять этот IF бессмысленный
do_something();
}

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

var name = "Bob"; // <- объявляем переменную
if (name === "John") {
// если значение в переменной name равно "John"
console.log("Гость любит чай");
} else if (name === "Mia") {
// <- вот здесь как раз ...else if...
console.log("Гость любит кофе");
} else {
console.log("Неизвестный гость");
}

Конструкция switch/case

Конструкция switch заменяет собой сразу несколько if.

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

var command = "camel";
switch (
command // переданное значение
) {
case "up": // сравниваем с значениями в "кейсах"
alert("Перевести строку в верхний регистр");
break;
case "down":
alert("Перевести строку в нижний регистр");
break;
case "camel":
alert("Перевести строку в вид: 'CaMeLcAsE'"); // Обратите внимание, что на этой строчеке используется экранирование
break;
case "turn":
alert("Поменять регист для каждой буквы на противоположный");
break;
default:
alert("Неизвестная команда! Вы ошиблись!");
}

В примере выше мы инициализировали переменную содержащую строку "up". Конструкция switch case позволяет сделать множественные сравнения переданного ей значения с значениями, которые мы указали в case. Если значения совпали, то код указанный в этом кейсе будет выполнен.

В результате выполнения кода выше в диалоговом окне мы увидим сообщение "Перевести строку в верхний регистр"

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

Конструкция 'switch'https://learn.javascript.ru/switch

Циклы

Циклы – простой способ сделать какое-то действие несколько раз.

Итерация (лат. iteratio — повторяю) – повторение какого-либо действия.

info

Слово Итерация так же обозначет каждое выполнение тела цикла. Т.е "перейти на слудующую итерацию" обозначает запустить следующее выполнение тела цикла.. перейти на новый круг.

В Javascript у нас есть 3 основных типа циклов:

  1. while
  2. do while
  3. for

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

Зачем нам нужны циклы?

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

Обратите внимание

Помните я рассказывал вам, как выполняются инструкции на CPU, и что из себя представляют ассемблерные инструкции? Так вот, циклы которые нам предоставляют языки программирования являются - синтаксическим сахаром.

Ваш CPU ничего не знает про циклы, а разворачиваются они в последовательность каких-то инструкций. Для того чтобы инструкции выполнялись повторно, происходит выполнение инструкции jmp.

Для наглядности вот вам интересная ссылочка. Советую ознакомиться.

Интересный факт

Существуют языки в которых циклы как таковые отсутствуют, это популярно в функциональных языках программирования, а повтор каких-то действий осуществляется через рекурсию.

Итерирование по последовательностям

Существует еще 2 инструкции for of и for in для интерирования по последовательностям. Более детально про них мы посмотрим когда начнем знакомиться с массивами.

while

Выглядит как:

while (условие) {
// пока выражение в условии true, будем повторять действия в теле цикла
}

Более наглядный пример:

// Этот код выведет в консоль сумму всех чисел от 1 до 100(включительно)
// можете скопировать код ниже и посмотреть сколько получится
var i = 1; // инициализируем счетчик(counter)
var sum = 0;
while (i <= 100) {
sum += i;
i++; // увеличиваем счетчик на единицу
}
console.log(sum);

do while

То же самое, что и while за исключением того, что сначала выполняется код в теле цикла, а только потом делается проверка стоит ли исполнять тело еще раз

do {
i += 1;
console.log(i);
} while (i < 5);

Цикл do while гарантирует хотя бы одно срабатывание кода.

for

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

for ([начало]; [условие]; [шаг]) {
// тело цикла
}
// [начало] – выражение которое выполнится перед тем как начать цикл
// [условие] – ...
// [шаг] – Это выражение будет выполнять после каждой итерации цикла

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

Перепишем пример цикла который был приведен в описании инструкции while использую инструкцию for:

// Этот код выведет в консоль сумму всех чисел от 1 до 100(включительно)
var sum = 0;
for (var i = 0; i <= 0; i++) {
sum += i;
}
console.log(sum);

Экономия только в 2 строчки кода, но зато мы аккуратно инициализировали счетчик и не забудем инкрементировать(тело цикла бывает очень объемное) его после каждой итерации. Цикл for более предпочтителен чем while

Управление циклом break/countinue

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

break

Давайте представим что нам надо прервать выполнение цикла в определенной ситуации. Ну например у вас есть последовательность чисел:

let NUM_SEQ = [5, 17, 40, 22, 17];

Мы хотим итерироваться по этому списку, но как только мы нашли число больше чем 20 мы хотим прервать итерирование для этого мы можем воспользоваться инструкцией break.

let i = 0;
let first_greater_then = null;
while (i < NUM_SEQ.length) {
if (NUM_SEQ[i] > 20) {
first_greater_then = NUM_SEQ[i];
break;
}
}

break - инструкция которая приводит к прекращению выполнения текущего цикла вне зависимости от того, выполняется ли тест-условие или нет.

Вопрос на засыпку

У вас есть идеи как реализовать подобное поведение без использования инструкции break?

continue

Мы вроде как знаем каким образом можно прекратить выполнение цикла, но как прекратить выполнение текущей итерации и перейти сразу к проверке и следующему кругу выполнения? Для этого у нас есть инструкция continue.

Давайте какой-нибудь выдуманный пример. Допустим мы проходимся по числам от 0 и до 10, и суммируем только те, что нечетны двум.

let acc = 0;
for (let i = 0; i < 10; i++) {
// если true, пропустить оставшуюся часть тела цикла
if (i % 2 == 0) continue;
acc += i;
}

break - инструкция которая приводит к прекращению выполнения текущей итерации и сразу же выполняется следующая проверка условия.

Сторонние источники

MDN | Циклы и итерацииhttps://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/%D0%A6%D0%B8%D0%BA%D0%BB%D1%8B_%D0%B8_%D0%B8%D1%82%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D0%B8
Edit this page