# Масиви ... з циклами ми круті. З масивами ми вдвічі крутіші. ```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="" %} {% hint style="info" %} В планах — перезаписати це відео українською. Якщо хочете допомогти та можете зробити це якісно — долучайтесь, так переклад з'явиться швидше. Щодо всіх питань з цього приводу пишіть на {% 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="" %} {% embed url="" %} ## Обов'язкові задачі {% 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) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://shpp.gitbook.io/zero/tutorials/arrays.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.