# Масиви

... з циклами ми круті. З масивами ми вдвічі крутіші.

```javascript
let array = [];
```

... тут ми говоримо: *створи новий порожній масив, і проасоціюй його зі змінною `array` (назва може бути будь-якою)*. 

Що це значить? Тепер у нас є **безмежна** кількість **звичайних** змінних.

Їх імена: `array[0]`, `array[1]`, `array[2]`, `array[3]` .....

Радимо сприймати ці змінні як абсолютно незалежні, а про змінну `array` (сам масив) забути зовсім. Її "не існує", є лише `array[0]`, `array[1]`, `array[2]`, `array[3]` .....

Що лежить там? Нічого, як і в звичайних змінних. В JavaScript це називається `undefined`. Спробуйте вивести на екран вміст `array[0]` і ви побачите як це провізуалізується.

Добре, тепер у нас є дуже багато змінних. Що зазвичай з ними роблять?

* зберігають кольори кожного пікселя картинки
* зберігають здоров'я / набої всіх гравців в грі
* зберігають імена всіх учнів
* зберігають координати кожної з 1000 частинок при малюванні анімованого фонтану
* і таке інше

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

Елементи масиву — це змінні. Тобто, з ними можна робити все, що і зі звичайними змінними й поза масивом. Єдина різниця: у масиві змінні не мають імен, замість імені — порядковий номер (індекс).

Пам'ятаєте аналогію про змінні-коробки з [попередніх розділів](https://shpp.gitbook.io/zero/tutorials/commands)? Якщо продовжити, можна уявити масив коробкою, в якій лежать інші коробки(змінні). 

![Приклад "масиву", який містить три "змінних"](https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FLlqTZTXDBfVb3nBWw2Ci%2Fimage.png?alt=media\&token=18a79d76-8b31-4b20-b0ba-9747ccdb89c0)

### Оголошення масивів

Масив — це скільки завгодно довгий набір нумерованих значень. Ці значення можуть бути будь-якого типу. Зараз ми створюємо масив відразу з елементами

```javascript
let arr = [11, 22, 33, 44, 55]; // це масив, в якому перші 5 елементів чомусь рівні
console.log(arr[0]);   // буде 11
arr = [true, false, "element", 1, 1.2]; // це теж
```

Масив також може не містити жодного елементу при створенні.

```javascript
let arr = []; // це порожній масив, але все одно можна заповнювати будь яку комірку
```

Як ви помітили, щоб працювати з елементом масиву, треба вказати його номер (індекс). Найперший елемент масиву має індекс 0.

```javascript
let array = [1, 2, 3, 4];
console.log(array[0]); // 1
console.log(array[3]); // 4
array[3] = 10;        // можна змінювати!
console.log(array[32-30+array[0]]); // 10
```

Сподіваюся ви звернули увагу на `array[32-30+array[0]]` У цьому сила масивів: індекс можна *вирахувати*. Про це далі.

Неіснуючі або невизначені елементи масиву можна проініціалізувати.

Замість нудного...

```javascript
array[0] = 0;
array[1] = 1;
array[2] = 2;
```

...скористаємось циклами:

```javascript
let array = [];
let i = 0;
while (i < 10) {
    array[i] = i;
    i++;
}
array[11] = 10;

// тепер час вивести на екран

i = 0;
while (i < 12) {
    console.log(array[i]);
    i++;
}
// [0, 1, ... ,9, ?, 10]
```

Зверніть увагу на вміст комірки з індексом 10.

Елементи масиву можна перевизначити. *Взагалі, повторимося, елементи масиву - це звичайні змінні, тому нічого нового ми вам не розповідаємо*

```javascript
let arr = [1, 2, 3];
arr[0] = "one";
arr[1] = "two";
console.log(arr[0]+", "+arr[1]+", "+arr[2]);
```

### length

```javascript
let arr = [10, 20]; // тут все просто
console.log(arr.length); // 2 - довжина масиву arr
```

Розмір масиву зазвичай на 1 більше, ніж індекс останнього ініціалізованого елемента.

```javascript
let arr = [];
arr[6] = 10;
console.log(arr.length); // що буде?
```

### Обхід масивів

Для того, щоб обійти масив (тобто по черзі попрацювати з кожним його елементом), зручно використовувати цикли. Для обходу масиву можна використовувати такий шаблон коду:

```javascript
let arr = [2,5,8];
let i = 0;
while (i < arr.length) {
    console.log(arr[i]); // робимо щось з arr[i]
    i++; // те ж саме, що i = i + 1
}
```

Наприклад, збільшимо кожен елемент масиву на одиницю.

```javascript
let arr = [0, 1, 2, 3, 4];
let i = 0;
while (i < arr.length) {
    arr[i]++;
    i++;
}

for (let i = 0; i < arr.length; i++) {
    console.put(arr[i] + " "); // 1 2 3 4 5
}
```

Подивимося тепер на цей приклад:

```javascript
let array = [1, 2, 3];
let b = array; // що ми тут копіюємо?
b[0] = 111;
console.log(array[0]);// що буде?
```

Розгадка полягає в тому, що масиви не лежать в змінних. У змінних лежать посилання на масиви. А значить, при присвоєнні ми не будемо копіювати масив.

Поки що неважливо знати деталі, а може і важливо :)

### Багатовимірні масиви

Про багатовимірні масиви почитайте в інтернеті. Там нічого складного, просто масиви масивів, і вкладені цикли, щоб працювати з ними. Завдання Ш++ на вступному тестуванні зазвичай не вимагають вміння працювати з багатовимірними масивами.

### Вихід за межі масиву

Не виходьте за межі масиву! (тут слово "межа" означає все що менше ніж 0 або більше `.length-1`) Якщо ви звертаєтеся для читання значень комірки, якої не існує, то вам повернеться значення `undefined`. Якщо ж ви запишете число в елемент масиву, якого не існує, то масив автоматично розшириться.

Хоча якщо у вас масив порожній (тобто його довжина дорівнює 0), то природно для заповнення масиву потрібно звертатися до "неіснуючих" комірок. Таким чином власне заповнюючи масив.

{% embed url="<https://youtu.be/Am1-vhkTPqE>" %}

{% hint style="info" %}
В планах — перезаписати це відео українською. Якщо хочете допомогти та можете зробити це якісно — долучайтесь, так переклад з'явиться швидше. Щодо всіх питань з цього приводу пишіть на <info@programming.org.ua>
{% endhint %}

## Додаткові матеріали

[Про масиви](https://uk.javascript.info/array) *(uk.javascript.info)*

[Ще про масиви](http://xn--80adth0aefm3i.xn--j1amh/array) *(яваскрипт.укр)*

[Про об'єкти](https://uk.javascript.info/object) *(uk.javascript.info)*

{% embed url="<https://youtu.be/GULFKAX0nxY>" %}

{% embed url="<https://youtu.be/ACXQO1YZOXI>" %}

## Обов'язкові задачі

{% content-ref url="arrays/cities" %}
[cities](https://shpp.gitbook.io/zero/tutorials/arrays/cities)
{% endcontent-ref %}

{% content-ref url="arrays/atm" %}
[atm](https://shpp.gitbook.io/zero/tutorials/arrays/atm)
{% endcontent-ref %}

{% content-ref url="arrays/centered-thing" %}
[centered-thing](https://shpp.gitbook.io/zero/tutorials/arrays/centered-thing)
{% endcontent-ref %}

*Виникли питання або труднощі?* [*Зверніться за допомогою до Ш++.*](https://shpp.gitbook.io/zero/arrangements/support)