---
description: JavaScript простым языком
---

# Циклы: while, for

[![Generic badge](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)](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)

![](https://3367117456-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8VRUyYIp5X-d6oGwV2%2F-M8Vpd1H1pJshak_nQir%2F-M8VpwJkM9_li8NpHA56%2Fimg-13.png?alt=media\&token=debe40ff-7c88-4d64-b0f2-7402db5d758f)

**Цикл** – это такая штука, которая позволяет выполнять какие-либо операции много раз.

Например, с помощью функции `alert` нам нужно вывести на экран числа от `1` до `3`. Как бы ты сейчас это сделал? Если ты не знаешь о том, как работают циклы, ты напишешь примерно так:

```javascript
alert(1);
alert(2);
alert(3);
```

Возможно, в каких-то ситуациях можно допустить такой код – но это **нежелательно** и считается **плохим тоном**. И, наконец, представь, что задача изменилась и нужно вывести числа от `1` до `1000` – ты же не хочешь писать 1000 строк, верно? Для этого и придумали `циклы`.

#### **Цикл while** <a href="#toc_2" id="toc_2"></a>

Цикл имеет следующий синтаксис:

```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** <a href="#toc_3" id="toc_3"></a>

Если цикл `while` сначала проверяет условие и только при его истинности выполняет команды, то цикл `do...while` – сначала выполняет все команды и только потом начинает проверять условие.&#x20;

Вот его синтаксис:

```javascript
let i = 1;  
do {
  alert(i);
  i++;
} while (i <= 3);
```

Разница очень маленькая и надеюсь ты ее уловил ([живой пример](https://jsfiddle.net/javascriptstupid/osqcdmay/)).

#### **Цикл for** <a href="#toc_4" id="toc_4"></a>

Еще один важный цикл, который используется куда чаще – это цикл `for`.

Синтаксис:

```javascript
for (let i = 1; i <= 3; i++) {
   alert(i);
}    
```

Этот цикл тоже не является сложным. После оператора `for`, в скобках указываются последовательно: `начало`, `условие`, и `шаг` ([живой пример](https://jsfiddle.net/javascriptstupid/ajLk7zf9/)).

**Первое значение**, `let i = 1;` означает, что мы определили переменную `i` со значением `1`. Это начальное значение переменной, с которым выполнится первый оборот цикла.&#x20;

**Вторым значением**, в скобках, является **условие**, при выполнении которого выполнится тело цикла, а именно функция `alert(i);`

**Третьим значением** является **указание шага**, т.е, насколько нужно увеличить значение `i` за один оборот цикла. Т.к, увеличить нам нужно на единицу, то снова пользуемся инкрементом `++`.

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

Подробнее об операторах `инкремента/декремента` расскажу в следующем уроке.

#### **Домашнее задание** <a href="#toc_5" id="toc_5"></a>

1. Напиши код, который выводит на экран с помощью цикла `while` значения от `50` до `100`.
2. Напиши код, который выводит на экран с помощью цикла `do...while` значения от `20` до `30`;
3. Напиши код, который выводит на экран с помощью цикла `for`значения от `200` до `250`;
