#7 Циклы в Javascript

В этом уроке мы с вами разберем циклы. Циклы нам нужны, если мы хотим выполнить однотипное действие много раз. Например нам нужно перебрать числа от 1 до 10 или вывести продукты из списка один за другим.

Первым циклом мы разберем while. Базовый пример while выглядит вот так

while (condition) {
  document.write('A statement has run')
}

И как вы можете видеть он очень похож на if, который мы писали до этого. Но его логика немножно сложнее. Когда while выполняется, он

1. Проверяет условие в круглых скобках.
2. Если оно возвращает true, то он выполняет код, написанный в фигурных скобках и начинает проверять условие опять
3. И он проверяет условие и выполняет фигурные скобки до тех пор, пока условие в круглых скобках не станет false

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

Давайте добавим переменную i, которая равняется 1 и условие в наш цикл while

var i = 1

while (i < 5) {
  document.write('A statement has run')
}

То есть пока i меньше 5 мы продолжаем выполнять цикл.

Если мы запустим этот код прямо сейчас, то мы как-раз и попадем в бесконечный цикл, потому что i всегда будет меньше чем 5. Чтобы этого не произошло, мы будем увеличивать значение i на один при каждом проходе цикла.

var i = 1;

while (i < 5) {
  document.write('A statement has run')
  i++
}

Итак давайте еще раз пройдемся как работает этот код.

1. Мы создали переменную i с значением 1
2. Мы заходим в цикл while и 1 меньше 5, поэтому блок while выполняется
3. В конце блока мы увеличиваем i на 1
4. Дальше while опять проверяет условие и 2 меньше 5 и поэтому блок опять выполняется
5. Так продолжается каждый раз, пока i не станет 5. Тогда цикл while останавливается.

Давайте посмотрим в браузер. Как мы видим, наш document.write отработал 4 раза и вывел нам сообщения.

Теперь давайте посмотрим на цикл for. Базовая запись выглядит вот так.

for () {
  document.write('A statement has run')
}

Как вы видели в while мы делали 3 важные вещи:

1. Создавали переменную с дефолтным значением
2. Задавали условие в цикле
3. Увеличивали счетчик в конце блока кода

В цикле for эти три вещи указываются в круглых скобках в том же порядке и разделяются точкой с запятой

for (var i = 1; i < 5; i++) {
  document.write('A statement has run')
}

Если мы посмотрим в браузер, то увидим, что наш код отработал точно также, как и while.

И вы можете спросить, а зачем мне использовать цикл for?

И вот ответ: читать все три условия в одном месте при обьявлении цикла, намного проще, чем когда они разбросаны по всему коду. Именно поэтому цикл for используется намного чаще.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.