# Циклы: while, for
[](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)
**Цикл** – это такая штука, которая позволяет выполнять какие-либо операции много раз.
Например, с помощью функции `alert` нам нужно вывести на экран числа от `1` до `3`. Как бы ты сейчас это сделал? Если ты не знаешь о том, как работают циклы, ты напишешь примерно так:
```javascript
alert(1);
alert(2);
alert(3);
```
Возможно, в каких-то ситуациях можно допустить такой код – но это **нежелательно** и считается **плохим тоном**. И, наконец, представь, что задача изменилась и нужно вывести числа от `1` до `1000` – ты же не хочешь писать 1000 строк, верно? Для этого и придумали `циклы`.
#### **Цикл while**
Цикл имеет следующий синтаксис:
```javascript
while (условие) {
// команды которые нужно выполнить
}
```
Все команды внутри цикла `while` выполняются до тех пор, пока условие `истинно (true)`.
И сразу же переделаем нашу задачу под цикл ([живой пример](https://jsfiddle.net/javascriptstupid/cq5trx14/)):
```javascript
let i = 1;
while (i <= 3) {
alert(i);
i++;
}
```
Что же здесь происходит?! Пойдем по строкам:
`let i = 1;` – определяем переменную `i` со значением `1`;
`while (i <= 3) {` – запускаем цикл `while` и устанавливаем условие, при выполнении которого цикл будет продолжать работу. Так как нам нужно вывести значения от `1` до `3` и это означает, что цикл должен выполняться до тех пор, пока значение переменной `i`не станет равным значению `3`. Т.е., значение должны быть **меньше**, либо **равны** `3`. А для того, чтобы значение `i` изменялось, после каждого выполнения цикла, мы должны **увеличивать значение переменной** `i` **на единицу** (это происходит на строке `4`);
`alert(i);` - выводим текущее значение переменной `i`;
`i++;` – увеличение значения переменной `i` на единицу. Оператор `++` называется `инкрементом`. Его смысл заключается в том, чтобы увеличивать значение на единицу. Делаем мы это для того, чтобы следующий проход цикла проверил новое условие.
#### **Цикл do…while**
Если цикл `while` сначала проверяет условие и только при его истинности выполняет команды, то цикл `do...while` – сначала выполняет все команды и только потом начинает проверять условие.
Вот его синтаксис:
```javascript
let i = 1;
do {
alert(i);
i++;
} while (i <= 3);
```
Разница очень маленькая и надеюсь ты ее уловил ([живой пример](https://jsfiddle.net/javascriptstupid/osqcdmay/)).
#### **Цикл for**
Еще один важный цикл, который используется куда чаще – это цикл `for`.
Синтаксис:
```javascript
for (let i = 1; i <= 3; i++) {
alert(i);
}
```
Этот цикл тоже не является сложным. После оператора `for`, в скобках указываются последовательно: `начало`, `условие`, и `шаг` ([живой пример](https://jsfiddle.net/javascriptstupid/ajLk7zf9/)).
**Первое значение**, `let i = 1;` означает, что мы определили переменную `i` со значением `1`. Это начальное значение переменной, с которым выполнится первый оборот цикла.
**Вторым значением**, в скобках, является **условие**, при выполнении которого выполнится тело цикла, а именно функция `alert(i);`
**Третьим значением** является **указание шага**, т.е, насколько нужно увеличить значение `i` за один оборот цикла. Т.к, увеличить нам нужно на единицу, то снова пользуемся инкрементом `++`.
Существуют еще некоторые особенности использования циклов, но с ними мы будем знакомиться дальше, на практике. Пока же, мы только узнаем о циклах, поэтому сначала нужно привыкнуть к их синтаксису.
Подробнее об операторах `инкремента/декремента` расскажу в следующем уроке.
#### **Домашнее задание**
1. Напиши код, который выводит на экран с помощью цикла `while` значения от `50` до `100`.
2. Напиши код, который выводит на экран с помощью цикла `do...while` значения от `20` до `30`;
3. Напиши код, который выводит на экран с помощью цикла `for`значения от `200` до `250`;