# Розділ 5. Масиви

     У попередніх розділах була розглянута робота з простими типами даних та об'єктами, проте що робити коли в нас є сукупність даних? Для цього в **JS** є **масиви:**

```javascript
'use strict';

var arr = [1, 2, 3, 4]; 
```

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

```javascript
'use strict';

var arr = [1, 2, 3, 4]; 

console.log(arr[0]);  // 1
console.log(arr[1]);  // 2
console.log(arr[2]);  // 3
console.log(arr[3]);  // 4
console.log(arr[4]);  // undefined

console.log(typeof arr); // object
```

     Індекси записують у квадратні дужки та **рахувати починають з 0**, тому перший індекс буде \[0]. В разі **відсутності** в масиві **елемента** за вказаним індексом буде повернуто значення **undefined.** 

     Як видно з прикладу тип масиву є **object** це спричинено тим, що по суті створюється об'єкт **new Array** і в нього вже передаються дані. Для того щоб точно знати чи дана змінна є об'єктом чи масивом :

```javascript
'use strict';

var arr = [1, 2, 3, 4]; 
var obj = {};

console.log(Array.isArray(obj )); // false

console.log(Array.isArray(arr )); // true
```

     Існують наступні особливості масиву:

     1\. У **JS** в масив можна одночасно передати дані різних типів (не рекомендується):

```javascript
'use strict';

var arr = [12, 'asdsdf', true];
```

     2\. Для того щоб використати не масив, а самі значення  - можна використати **spread-оператор** (ставлять три крапки перед назвою масиву) використовується як правило в ситуаціях коли невідомо скільки аргументів має бути передано у функцію:

```javascript
'use strict';

var arr = [12, 2, -7];

console.log(arr); // [12, 2, -7]

console.log(...arr); // 12, 2, -7

// Використання у функції

function name (a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

name(arr);  // буде лише один аргумент - масив

name(...arr); // кожне значення масиву буде як окремий аргумент
```

     3\. Для того щоб **дізнатись довжину** масиву :

```javascript
'use strict';

var arr = [12, 2, -7];

console.log(arr.length); // 3
```

     4\. Для того щоб **додати новий елемент** у масив :

```javascript
'use strict';

var arr = [12, 2, -7];

arr.push(5);      // додає елемент в кінець масиву

console.log(arr); // [12, 2, -7, 5]

arr.unshift(1);      // додає елемент на початок масиву

console.log(arr); // [1, 12, 2, -7, 5]
```

     5\. Для того щоб **видалити елемент** масиву :

```javascript
'use strict';

var arr = [12, 2, -7];

arr.pop();      // видаляє елемент з кінця масиву

console.log(arr); // [12, 2]

arr.shift();      // видаляє елемент з початку масиву

console.log(arr); // [2]
```

     6\. Для того щоб **замінити елемент** масиву використовують  - **splice**( "індекс елементу", "кількість елементів, які видалять з масиву", "нові елементи"  ) :

```javascript
'use strict';

var arr = [1, 2, 3, 4, 5, 6];

// видалити 1 елемент з індексом 4 та на його місце поставити число 22
arr.splice(4, 1, 22);     

console.log(arr); // [1, 2, 3, 4, 22, 6]


// видалити 1 елемент з індексом 1 та на його місце поставити число 3 та слово "test"
arr.splice(1, 1, 3, "test"); 

console.log(arr); // [1, 3, "test", 3, 4, 22, 6]


// видалити 1 елемент з індексом 2
arr.splice(2, 1); 

console.log(arr); // [1, 3, 3, 4, 22, 6]
```

     7\. Для того щоб **скопіювати частину масиву** :

```javascript
'use strict';

var arr = [1, 2, 3, 4, 5, 6];

var newArr = arr.slice(2, 5);     

console.log(newArr); // [3, 4, 5]
```

     8\. Для того щоб **об'єднати масиви** :

```javascript
'use strict';

var arr = [1, 2, 3, 4, 5, 6];

var arr2 = [7, 8, 9];

var newArr = arr.concat(arr2);     

console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

     9\. Для того щоб **перебрати масив по елементам**  використовують метод forEach, в який передають функцію з аргументом (назва елемента - el), а в тілі даної функції роблять вже відповідні дії (в даному випадку показати результат у консоль браузера):

```javascript
'use strict';

var arr = [1, 2, 3, 4, 5, 6];

arr.forEach(function(el) {
    console.log(el);
});


// Ця ж функція у вигляді стрілочної функції

arr.forEach(el => console.log(el));      
```

     10\. Для **пошуку у масиві** :

```javascript
'use strict';

var arr = [1, 2, 3, 4, 5, 6];

console.log(arr.indexOf(4));   // 3 - індекс елемента "4"

console.log(arr.lastIndexOf(4));   // теж саме проте пошук з кінця масиву

console.log(arr.includes(4));   // true - чи існує елемент "4"

// знайти елемент(один!!!) за певною умовою (елемент більше 3)
console.log(arr.find(el => el > 3));   
```

     11\. Для того щоб переформувати масив (замінити структуру елементів на інші на основі даних елементів) :

```javascript
'use strict';

var arr = [{
    id: 4,
    name: 'test1'
}, {
    id: 1,
    name: 'test2'
}];

var newArr = arr.map(el => el.id);   // повернути масив, в якому лише id 

console.log(newArr); // [4, 1]

newArr.sort();       // сортування масиву

console.log(newArr); // [1, 4]

newArr.reverse();    // обернути масив

console.log(newArr); // [4, 1]
```

     12\. Для того щоб **розділити рядок тексту на елементи масиву** і потім з масиву **зібрати рядок**:

```javascript
'use strict';

var text = "Hello world";

var arr = text.split(' ');

console.log(arr);             // ["Hello", "world"]

var newText = arr.join(' ');

console.log(newText);         // Hello world
```

     Існує ще доволі багато методів для роботи з масивами, тому що дані з баз даних та інших джерел як правило зберігають у вигляді масиву і опрацьовують найрізноманітніші комбінації з ними.

     Отож, ми розглянули доволі корисний інструмент - **масиви**. Навчились маніпулювати їх даними. У наступному розділі ми розглянемо, що таке умовні операції.


---

# 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://angularlessons.gitbook.io/javascriptiseasy/rozdil-5.-masivi.md?ask=<question>
```

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.