Масиви і Об’єкти в JavaScript

Масиви в JavaScript

Масив – це змінна, яка містить список даних, де кожний його елемент має свій індекс та може буди доступним через цей іддекс. Індексація елементів масиву починається з нуля. Масив може містити в собі різні типи даних: інші масиви (багатовимірні масиви), об’єкти, числа, строки.

Масиви дозволяють зберігати та обробляти великі списки даних, наприклад, список товарів в інтернет-магазині або зберігати профіль користувача

const mixedArray = [
  42,                          // Number
  "Hello",                     // String
  true,                        // Boolean
  null,                        // null
  undefined,                   // undefined
  { name: "John", age: 30 },   // Object
  [1, 2, 3],                   // Array
  function() { return "Hi"; }, // Function
  new Date(),                  // Date
  /pattern/,                   // RegExp
  Symbol('id'),                // Symbol
  123n,                        // BigInt
  NaN,                         // NaN
  Infinity                     // Infinity
];

console.log(mixedArray);

// 1. Масив рядків (імена):
const names = ["Оля", "Андрій", "Марія", "Тарас", "Ірина"];

// 2. Масив чисел:
const ages = [18, 25, 30, 42, 57];

// 3. Змішаний масив (різні типи даних):
const mixed = [ true, "JS", 2023, null, { skill: "coding" } ];

// 4. Масив об’єктів:
const products = [
  { id: 1, name: "Ноутбук", price: 20000 },
  { id: 2, name: "Смартфон", price: 10000 },
  { id: 3, name: "Навушники", price: 800 }
];

// 5. Двовимірний (вкладений) масив:
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

Значення в масиві можна зиінювати: видаляти, заміняти, додавати. Зміни можна вносити в сам ориганільний масив спеціальними методами, які і снують в JS для роботи з масивами. Ці методи діляться на 2 групи: ті, які змінюють масив до якого застосовуються і ті, які обробляють масив і повертають новий , залишаючи оригінальний масив у вихідному стані.

Детальніше про основні методи масивів

Основні методи і приклади коду для додавання та видалення елементів

push(): Додає один або більше елементів у кінець масиву і повертає нову довжину масиву. Мутує масив.

pop(): Видаляє останній елемент з масиву і повертає видалений елемент. Мутує масив.

shift(): Видаляє перший елемент з масиву і повертає видалений елемент. Мутує масив.

unshift(): Додає один або більше елементів на початок масиву і повертає нову довжину масиву. Мутує масив.

const numbers = [1, 2, 3];

// Додаємо в кінець
numbers.push(4, 5); // numbers = [1, 2, 3, 4, 5]

// Видаляємо останній
const removed = numbers.pop(); // removed = 5, numbers = [1, 2, 3, 4]

// Видаляємо перший
numbers.shift(); // numbers = [2, 3, 4]

// Додаємо на початок
numbers.unshift(0); // numbers = [0, 2, 3, 4]

Як створити копію масиву

Масиви є reference types у JavaScript. Наприклад, якщо ти робиш const arr2 = arr1;, то це не створює новий масив, а лише посилання на вже існуючий.

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

const copy = [...arr]; // копія масиву

Метод slice() дозволяє створити новий масив, який є копією частини або всього вихідного масиву. Він приймає два аргументи:

start (опціонально) — індекс, з якого починається копіювання (включно).

end (опціонально) — індекс, на якому копіювання завершується (не включно).

Якщо аргументи не передані, slice() повертає повну копію масиву.

Приклади:

const arr = [1, 2, 3, 4, 5];
const copy = arr.slice(); // [1, 2, 3, 4, 5]
console.log(copy); // [1, 2, 3, 4, 5]
console.log(arr === copy); // false (це різні масиви)

const arr = [1, 2, 3, 4, 5];
const slicedCopy = arr.slice(2, 4);
console.log(slicedCopy) //[ 3, 4 ];

const arr = [1, 2, 3, 4, 5];
const part = arr.slice(-3); // [3, 4, 5]
console.log(part); // [3, 4, 5]

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2, -1));
//  Array ["camel", "duck"]

Три способи створення масиву

// 'fruits' масив, створений за допомогою нотації літералів масиву
const fruits = ["Apple", "Banana"];
console.log(fruits.length);
// 2

// 'fruits' масив, створений за допомогою нотації літералів масиву
const fruits = ["Apple", "Banana"];
console.log(fruits.length);
// 2

Методи, типу Array.from(), Array.of(), Оператор розширення (...), split() для перетворення рядків в масиви, map(), fill() та ін немутуючі методи, що перечислені вище.

Приклад з використанням методу from():

//З рядка: const arr = Array.from("Hello"); 
console.log(arr); // ['H', 'e', 'l', 'l', 'o'] 

//З множини:
 const set = new Set([1, 2, 3]);
 const arr = Array.from(set); console.log(arr); // [1, 2, 3] 

//З масивоподібного об'єкта:
 const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
 const arr = Array.from(arrayLike);
 console.log(arr); // ['a', 'b', 'c'] 

//З функцією-маппером:
 const arr = Array.from([1, 2, 3], x => x * 2);
 console.log(arr); // [2, 4, 6]

Об’єкт Set в прикладі вище — це вбудована в JavaScript колекція, яка представляє собою набір унікальних значень. Він схожий на масив, але має кілька ключових відмінностей. Давайте розглянемо детальніше, що таке Set, як він працює і як він пов’язаний з об’єктами та масивами.

Set — це колекція, яка зберігає лише унікальні значення. Це означає, що в ньому не може бути двох однакових елементів. Наприклад, якщо ви додасте число 5 двічі, воно збережеться лише один раз.

Основні характеристики:

1. Унікальність: Усі значення в Set є унікальними.
2. Ітерабельність: Set можна перебирати за допомогою циклів або методів, таких як forEach.
3. Немає індексів: На відміну від масивів, Set не має індексів, тому елементи не можна отримати за індексом.
4. Методи для роботи з елементами: Set має методи для додавання, видалення та перевірки наявності елементів.

Як створити Set?

Set створюється за допомогою конструктора new Set(). У конструктор можна передати ітерабельний об’єкт (наприклад, масив), і тоді Set автоматично додасть унікальні елементи з цього об’єкта.

Наприклад, тут число 4 додається лише один раз, оскільки Set зберігає лише унікальні значення:

const mySet = new Set([1, 2, 3, 4, 4, 5]);
console.log(mySet); // Set { 1, 2, 3, 4, 5 }

Основні методи та властивості Set

const mySet = new Set();
mySet.add(1);
mySet.add(2);
console.log(mySet); // Set { 1, 2 }

mySet.delete(1);
console.log(mySet); // Set { 2 }

console.log(mySet.has(2)); // true
console.log(mySet.has(3)); // false

mySet.clear();
console.log(mySet); // Set {}

const mySet = new Set([1, 2, 3]);
console.log(mySet.size); // 3

Як Set пов’язаний з масивами та об’єктами?

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueSet = new Set(arr);
console.log(uniqueSet); // Set { 1, 2, 3, 4, 5 }

const uniqueArr = Array.from(uniqueSet);
// або
const uniqueArr = [...uniqueSet];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

const obj1 = { name: "John" };
const obj2 = { name: "John" };

const mySet = new Set();
mySet.add(obj1);
mySet.add(obj2);

console.log(mySet.size); // 2 (об'єкти вважаються різними)

Приклади використання Set

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

const mySet = new Set([1, 2, 3]);
console.log(mySet.has(2)); // true

3. Зберігання унікальних об’єктів:

const obj1 = { name: "John" };
const obj2 = { name: "Jane" };

const mySet = new Set();
mySet.add(obj1);
mySet.add(obj2);

console.log(mySet.size); // 2

88

Метод Array.of()

 створює масив з переданих аргументів. Він корисний, коли потрібно створити масив з одного числа (на відміну від new Array(), який у такому випадку створить порожній масив з указаною довжиною).

const arr = Array.of(5);
console.log(arr); // [5]

Оператор розширення (...)

дозволяє створити новий масив на основі існуючого масиву або іншого ітерабельного об’єкта.

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

Об’єднання масивів:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

З ітерабельного об’єкта:

const str = "Hello";
const arr = [...str];
console.log(arr); // ['H', 'e', 'l', 'l', 'o']

Метод split()

Якщо у вас є рядок, який потрібно перетворити на масив, можна використовувати метод split().

const str = "apple,banana,orange";
const arr = str.split(',');
console.log(arr); // ['apple', 'banana', 'orange']

Генерація масиву за допомогою Array() та map()

const arr = [1, 2, 3, 4, 5];
const part = arr.slice(-3); // [3, 4, 5]
console.log(part); // [3, 4, 5]

Якщо потрібно створити масив із певною кількістю елементів, які генеруються динамічно, можна використовувати комбінацію Array(), fill() та map().

Масив чисел від 0 до 9:

const arr = Array(10).fill().map((_, index) => index);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Масив квадратів чисел:

const arr = Array(5).fill().map((_, index) => (index + 1) ** 2);
console.log(arr); // [1, 4, 9, 16, 25]

Генерація масиву за допомогою Array.from() та функції-мапера

Метод Array.from() також дозволяє створити масив із функцією-мапером, яка генерує елементи.

Масив чисел від 0 до 9:

const arr = Array.from({ length: 10 }, (_, index) => index);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//створює масив із 10 елементів, де кожен елемент дорівнює своєму індексу.
//_ — це позначення для невикористовуваного аргументу (поточного елемента).
//index — це індекс поточного елемента, який повертається як значення елемента масиву.
//Функція повертає значення, яке буде записане в масив на місці поточного елемента.

Масив парних чисел:

const arr = Array.from({ length: 5 }, (_, index) => index * 2);
console.log(arr); // [0, 2, 4, 6, 8]

Що означає _?

У JavaScript _ — це просто ім’я змінної. У цьому контексті воно використовується для позначення аргументу, який не використовується. Це поширена практика, щоб показати, що значення ігнорується. Наприклад: const func = (_, index) => index; Ця функція приймає два аргументи, але використовує лише index. Перший аргумент (_) ігнорується. Якщо ви не хочете використовувати _, можна просто опустити перший аргумент: const arr = Array.from({ length: 10 }, (index) => index);

Коли використовувати метод літерал масиву і коли – конструктор?

Ітерація масивів

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

1. Переглядати або виводити значення масиву (наприклад, console.log()).
2. Змінювати кожен елемент за потреби (наприклад, множити всі числа на 2).
3. Збирати потрібні дані в нову структуру (наприклад, створювати інший масив або підраховувати загальне значення).
4. Фільтрувати масив, відбираючи лише ті елементи, що відповідають певній умові.
5. Трансформувати дані за допомогою різних методів (наприклад, map, reduce, filter) і отримувати новий результат.

Ітерації допомагають виконувати практично будь-які операції над кожним елементом масиву — від простої перевірки до складної обробки даних.

Приклади ітерації масивів

const arr = [2, -1, 5, 0, 7];
const positiveDoubled = [];

for (let i = 0; i < arr.length; i++)
 { if (arr[i] > 0)
 {positiveDoubled.push(arr[i] * 2);}}

console.log(positiveDoubled);
// Результат: [4, 10, 14]

const arr = [2, -1, 5, 0, 7];
const squares = [];

for (const item of arr) {
  squares.push(item * item);}

console.log(squares); 
// Результат: [4, 1, 25, 0, 49]

const arr = [1, 2, 3, 4]; // Масив, по якому будемо ітерувати.
let i = 0; // Ініціалізація лічильника індексів масиву. Спочатку він дорівнює 0.

while (i < arr.length) {  // Умова циклу: поки i менше довжини масиву, будемо ітерувати.
    console.log(arr[i]);  // Виводимо елемент масиву з індексом i.
    i++;  // Інкрементуємо lічильник i на 1.
}

const arr = [1, 2, 3, 4]; // Масив, по якому будемо ітерувати.
let i = 0; // Ініціалізація лічильника індексів масиву.

do {
    console.log(arr[i]);  // Виводимо елемент масиву з індексом i.
    i++;  // Інкрементуємо лічильник i на 1.
} while (i < arr.length);  // Умова: поки i менше довжини масиву, ітерація продовжується.

const arr = [1, 2, 3, 4];
arr.forEach(function(num) {
    console.log(num);  // Виведе 1, 2, 3, 4
});

const arr = [1, 2, 3, 4];
const doubled = arr.map(num => num * 2);
console.log(doubled);  // Виведе [2, 4, 6, 8]

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const evenArr = arr.filter(function(num) {
    return num % 2 === 0;  // Повертає true, якщо число парне
});

console.log(evenArr);  // Виведе: [2, 4, 6, 8]

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce(function(acc, num) {
    return acc + num;  // Додаємо поточне значення до акумулятора
}, 0);

console.log(sum);  // Виведе: 15

Деструктуризація масивів та спред-оператор

Деструктуризація масиву — це синтаксис у JavaScript, який дозволяє “розпаковувати” значення з масиву в окремі змінні. Це дуже зручний спосіб отримати доступ до елементів масиву без необхідності звертатися до них за індексами вручну. ЇЇ використовують коли необхідно витягнути декілька елементів масиву. Якщо потрібно для роботи багато елементва масиву, то тоді деструктуризацію не використовують, а роблять це за допомогою інших методів масивів та ітерації, пояснених вище.

Синтаксис для деструктуризації

Припустимо, у нас є масив:

const arr = [1, 2, 3];

Зазвичай, щоб отримати елементи масиву, ми робимо так:

const first = arr[0];
const second = arr[1];
const third = arr[2];

З деструктуризацією це можна зробити набагато простіше:

const [first, second, third] = arr;

Тепер:

• first дорівнює 1,
• second дорівнює 2,
• third дорівнює 3.

Спред-оператор (...) дозволяє розпакувати елементи з масивів або об’єктів в нові структури даних. Він використовується для копіювання, об’єднання масивів, додавання нових елементів до масивів, а також для передачі елементів як аргументів у функції. Спред-оператор може бути дуже корисним для роботи з масивами, оскільки він дозволяє здійснювати маніпуляції з даними в компактний та зрозумілий спосіб.

Загальний вигляд:

const newArray = [...existingArray];

Спред-оператор дозволяє створити копію масиву. Це корисно, коли вам потрібно змінити новий масив, не змінюючи оригінал. Наприклад:

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Копіюємо всі елементи з arr1 в arr2

arr2.push(4); // Додаємо новий елемент у arr2

console.log(arr1); // Виведе: [1, 2, 3]
console.log(arr2); // Виведе: [1, 2, 3, 4]

Пояснення:

1. Ми використовуємо спред-оператор для копіювання всіх елементів масиву arr1 у новий масив arr2.
2. Оскільки це поверхневе копіювання, зміни в arr2 не впливають на arr1.

Спред-оператор дозволяє об’єднувати два або більше масивів в один. Наприклад:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArr = [...arr1, ...arr2]; // Об'єднуємо два масиви

console.log(combinedArr); // Виведе: [1, 2, 3, 4, 5, 6]

Ви можете використовувати спред-оператор для додавання елементів в середині масиву або на початку чи в кінці:

const arr = [2, 3, 4];

// Додаємо елемент на початок масиву
const newArrStart = [1, ...arr]; 
console.log(newArrStart); // Виведе: [1, 2, 3, 4]

// Додаємо елемент в кінець масиву
const newArrEnd = [...arr, 5];
console.log(newArrEnd); // Виведе: [2, 3, 4, 5]

Пояснення:

1. Спочатку ми додаємо елемент 1 на початок масиву arr за допомогою спред-оператора.
2. Потім додаємо елемент 5 в кінець масиву arr за допомогою спред-оператора.

Спред-оператор можна використовувати для “розпакування” елементів масиву в функціях або конструкторах.

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

function sum(a, b, c, d) {
    return a + b + c + d;
}

console.log(sum(...arr));  // Виведе: 10

Пояснення:

1. Ми передаємо масив arr у функцію sum() за допомогою спред-оператора, який розпаковує елементи масиву як окремі аргументи.
2. Функція отримує ці елементи як окремі аргументи a, b, c, d і виконує операцію над ними.

Спред-оператор у функціях з невизначеною кількістю аргументів (Rest/Spread)
Якщо у вас є функція, яка приймає декілька параметрів, спред-оператор може допомогти вам зібрати аргументи в масив. Це також відомо як Rest-оператор. Приклад:

function printAll(...args) {
    console.log(args);
}

printAll(1, 2, 3, 4); // Виведе: [1, 2, 3, 4]

Пояснення:

1. Оператор ...args збирає всі передані аргументи в масив args.
2. У цьому випадку, всі числа передаються у вигляді масиву.

Спред-оператор у поєднанні з іншими методами

Ви можете не тільки копіювати масив, а й модифікувати елементи під час його копіювання за допомогою спред-оператора. Наприклад:

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

// Створюємо новий масив, де замінюємо третій елемент
const modifiedArr = [...arr.slice(0, 2), 100, ...arr.slice(3)];

console.log(modifiedArr);  // Виведе: [1, 2, 100, 4]

Пояснення:

1. Спочатку за допомогою методу slice(0, 2) ми копіюємо перші два елементи.
2. Потім ми вставляємо значення 100 на третє місце.
3. В кінці використовуємо slice(3) для копіювання елементів з індексу 3 і далі.

Приклади деструктуризації

const arr = [1, 2, 3, 4, 5];
const [first, , third] = arr;

console.log(first); // 1
console.log(third); // 3

const arr = [1, 2, 3, 4, 5];
const [first, second, ...rest] = arr;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

const arr = [1, 2];
const [first, second, third = 3] = arr;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3 (значення за замовчуванням)

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

const arr = [1, [2, 3], 4];
const [first, [second, third], fourth] = arr;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
];

for (const { name, age } of users) {
  console.log(`${name} is ${age} years old.`);
}

7. Деструктуризація з функцій

Деструктуризація також може бути використана для отримання значень, які повертаються з функцій:

function getNumbers() {
  return [1, 2, 3];
}

const [first, second, third] = getNumbers();

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

Переваги деструктуризації

1. Скорочення коду: Не потрібно вручну звертатися до елементів масиву за індексами.
2. Зручність: Легко отримувати значення з вкладених структур.
3. Читабельність: Код стає більш зрозумілим і лаконічним.

Обмеження деструктуризації

1. Якщо масив коротший, ніж кількість змінних, “зайві” змінні отримають значення undefined.
2. Якщо ви намагаєтеся деструктуризувати щось, що не є ітерабельним (наприклад, null або undefined), виникне помилка.

Питання по масивах, які потрібно знати

Як об’єднати два масиви?

Для цього використовується метод concat() або оператор розпакування:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2);
// або
const combined2 = [...arr1, ...arr2];

Яка різниця між спред оператором та оператором розпакування?

Спред-оператор та оператор розпакування можуть здатися схожими, оскільки обидва використовують один і той самий синтаксис (...). Однак ці терміни використовуються в різних контекстах і мають різне застосування.

1. Спред-оператор (Spread Operator)

Спред-оператор використовується для розпакування елементів з масивів або об’єктів, щоб передати їх або вставити в інші структури даних.

Використання в масивах:

Спред-оператор застосовується, коли ви хочете об’єднати масиви, скопіювати масив або додати елементи до масиву.

Приклад:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Об'єднуємо два масиви в один
const combinedArr = [...arr1, ...arr2];
console.log(combinedArr);  // Виведе: [1, 2, 3, 4, 5, 6]

Використання в об’єктах:

Спред-оператор також може бути використаний для клонування об’єктів або об’єднання об’єктів.

Приклад:

const obj1 = { name: 'John', age: 30 };
const obj2 = { city: 'New York' };

// Об'єднуємо два об'єкти
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj);  // Виведе: { name: 'John', age: 30, city: 'New York' }

2. Оператор розпакування (Rest Operator)

Оператор розпакування — це також синтаксис ..., але він використовується для збирання елементів, а не для їх “розпакування”. Це дозволяє зібрати невизначену кількість аргументів у масив або об’єкт.

Використання в масивах:

В операторі розпакування ми збираємо залишкові елементи в масив.

Приклад:

function sum(a, b, ...rest) {
    console.log(a, b);  // Виведе: 1 2
    console.log(rest);  // Виведе: [3, 4, 5]
}

sum(1, 2, 3, 4, 5);

У цьому прикладі:

• Перші два аргументи (a і b) отримують значення 1 і 2.
• Оператор ...rest збирає решту аргументів у масив.

Використання в об’єктах:

Оператор розпакування можна також застосовувати до об’єктів для збирання залишкових властивостей.

Приклад:

const obj1 = { name: 'John', age: 30, city: 'New York' };
const { name, ...rest } = obj1;

console.log(name);  // Виведе: 'John'
console.log(rest);  // Виведе: { age: 30, city: 'New York' }

У цьому випадку:

• З об’єкта obj1 ми витягнули властивість name, а решту властивостей зібрали у об’єкт rest.

Об’єкти в JavaScript

Об’єкти в JavaScript — це структури даних, які дозволяють зберігати колекції пар “ключ-значення”. Ключі (також звані властивостями) — це рядки (або символи), а значення можуть бути будь-якого типу даних: числа, рядки, масиви, функції, інші об’єкти тощо. роботу з DOM, AJAX, та іншими API.

Створення об’єктів

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    isStudent: false,
    greet: function() {
        console.log("Hello, my name is " + this.firstName);
    }
};

let person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 30;
person.isStudent = false;
person.greet = function() {
    console.log("Hello, my name is " + this.firstName);
};

function Person(firstName, lastName, age, isStudent) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.isStudent = isStudent;
    this.greet = function() {
        console.log("Hello, my name is " + this.firstName);
    };
}

let person = new Person("John", "Doe", 30, false);

Доступ до властивостей об’єкта

Доступ до властивостей об’єкта можна отримати двома способами:

console.log(person.firstName); // "John"
console.log(person.age); // 30

console.log(person["firstName"]); // "John"
console.log(person["age"]); // 30

Квадратні дужки корисні, коли ім’я властивості зберігається у змінній:

let key = "firstName";
console.log(person[key]); // "John"

Додавання зміна та видалення властивостей

Ви можете додавати нові властивості до об’єкта або видаляти існуючі:

person.email = "john.doe@example.com";
console.log(person.email); // "john.doe@example.com"

delete person.age;
console.log(person.age); // undefined

'name' in user; // true

let person = {
    name: "Іван",
    age: 30
};

// Змінюємо значення властивості "age"
person.age = 31;

let person = {
    name: "Іван",
    age: 30
};

// Змінюємо значення властивості за допомогою змінної
let property = "name";
person[property] = "Петро";

Деструктуризація об’єктів

Деструктуризація – це синтаксична зручність в JavaScript, яка дозволяє витягувати значення з об’єктів та масивів і присвоювати їх до змінних в одному рядку коду. Це робить код більш компактним, читабельним та виразним.

Основний синтаксис деструктуризації об’єктів:

const обєкт = { ключ1: значення1, ключ2: значення2 };
const { ключ1, ключ2 } = обєкт;

Приклад деструктуризації об’єкта:

const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

const { name, age } = person;

console.log(name);  // Виведе: John Doe
console.log(age);   // Виведе: 30

Ви можете перейменувати змінні під час деструктуризації:

const person = {
  firstName: 'John',
  lastName: 'Doe'
};

const { firstName: name, lastName: surname } = person;

console.log(name);   // Виведе: John
console.log(surname); // Виведе: Doe

Методи об’єкта

Методи — це функції, які є властивостями об’єкта. Вони можуть використовувати this для доступу до інших властивостей об’єкта.

let person = {
    firstName: "John",
    lastName: "Doe",
    greet: function() {
        console.log("Hello, my name is " + this.firstName);
    }
};

person.greet(); // "Hello, my name is John"

Використання за замовчуванням:

Якщо властивість відсутня в об’єкті, ви можете задати значення за замовчуванням:

const person = {
  name: 'John'
};

const { name, age = 25 } = person;

console.log(age);   // Виведе: 25

Деструктуризація працює і з вкладеними об’єктами:

const user = {
  name: 'Alice',
  address: {
    city: 'London',
    street: 'Oxford Street'
  }
};

const { name, address: { city } } = user;

console.log(city);  // Виведе: London

Ви можете використовувати деструктуризацію для розпакування аргументів функцій:

function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

const person = { name: 'Bob', age: 35 };
greet(person);

Методи об’єкта this

this в методі об’єкта JavaScript – це особливе ключове слово, яке посилається на сам об’єкт, всередині якого викликається метод. Іншими словами, це контекст виконання функції, що є методом об’єкта.

Наочний приклад:

const person = {
    firstName: "Іван",
    lastName: "Петров",
    fullName() {
        return this.firstName + " " + this.lastName;
    }
};

console.log(person.fullName()); // Виведе: "Іван Петров"

Як JavaScript визначає значення this?

Важливо розуміти: значення this може змінюватися в залежності від контексту виконання. Неправильне розуміння this може призвести до помилок у коді. this – це потужний інструмент для створення об’єктно-орієнтованого коду в JavaScript.

Додаткові нюанси: this може бути null або undefined в деяких випадках, наприклад, при виклику стрілочної функції в строгому режимі без об’єкта. bind() – це метод, який дозволяє фіксувати значення this для функції.

Перебір властивостей об’єкта

Ви можете перебирати властивості об’єкта за допомогою циклу for...in:

for (let key in person) {
    console.log(key + ": " + person[key]);
}

Цей код виведе всі ключі та їх значення з об’єкта person.

Вкладені об’єкти

Об’єкти можуть містити інші об’єкти:

let person = {
    firstName: "John",
    lastName: "Doe",
    address: {
        street: "123 Main St",
        city: "Anytown",
        country: "USA"
    }
};

console.log(person.address.city); // "Anytown"

Копіювання об’єктів

Копіювання об’єктів може бути складним, оскільки простого присвоєння недостатньо для глибокого копіювання.

let person = {
    firstName: "John",
    lastName: "Doe"
};

let personCopy = Object.assign({}, person);
console.log(personCopy); // { firstName: "John", lastName: "Doe" }

let person = {
    firstName: "John",
    lastName: "Doe",
    address: {
        street: "123 Main St",
        city: "Anytown"
    }
};

let personCopy = JSON.parse(JSON.stringify(person));
console.log(personCopy);
// { firstName: "John", lastName: "Doe", address: { street: "123 Main St", city: "Anytown" } }

Статичний метод JSON.stringify() перетворює значення JavaScript на рядок JSON, необов’язково замінюючи значення, якщо вказано функцію заміни, або додатково включаючи лише вказані властивості, якщо вказано масив заміни.

Статичний метод JSON.parse() аналізує рядок JSON, створюючи значення JavaScript або об’єкт, описаний рядком. Додаткова функція Reviver може бути надана для виконання трансформації отриманого об’єкта перед його поверненням.

Статичні методи об’єкта Object

JavaScript надає кілька статичних методів для роботи з об’єктами:

• Object.keys(obj) — повертає масив ключів об’єкта.
• Object.values(obj) — повертає масив значень об’єкта.
• Object.entries(obj) — повертає масив пар [ключ, значення]

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};

console.log(Object.keys(person)); // ["firstName", "lastName", "age"]
console.log(Object.values(person)); // ["John", "Doe", 30]
console.log(Object.entries(person)); // [["firstName", "John"], ["lastName", "Doe"], ["age", 30]]

Приклади перебору обєктів з поясненнями

Приклад 1. Перебір властивостей одного об’єкта та їх модифікація

Опис задачі: уявімо, що в нас є об’єкт із даними про користувача. Ми хочемо:

1. Перебрати кожну властивість об’єкта (тобто кожен ключ).
2. Перевірити, чи значення цієї властивості є рядком.
3. Якщо це рядок, зробити його великими літерами (наприклад, admin -> ADMIN).
4. Зберегти зміни назад в об’єкт.

Код із детальними поясненнями

// Створюємо об'єкт user з різними властивостями
const user = {
  name: "alice",
  role: "admin",
  age: 25,
  active: true
};

// Використовуємо цикл for...in, щоб перебрати всі ключі об'єкта user
for (let key in user) {
  // key буде послідовно мати значення "name", "role", "age", "active"

  // Знаходимо значення поточної властивості об'єкта за її ключем
  let value = user[key]; 
  // Наприклад, коли key = "name", value = "alice"

  // Перевіряємо, чи value є рядком
  if (typeof value === "string") {
    // Якщо так, замінюємо рядок на той самий рядок, але великими літерами
    user[key] = value.toUpperCase();
    // Наприклад, "alice" -> "ALICE"
  }
}

// Виводимо результат, щоб перевірити зміни
console.log(user);

Пояснення

1. const user = { ... }; – Створюємо змінну user, якій присвоюємо об’єкт із властивостями:

• active (булеве значення).
• name (рядок),
• role (рядок),
• age (число),

2. for (let key in user) { – Оголошуємо цикл for...in, який дозволяє перебрати всі наявні ключі (property names) об’єкта. Змінна key на кожній ітерації буде приймати значення одного з ключів нашого об’єкта (спочатку name, потім role і т.д.).

3. let value = user[key]; – Створюємо змінну value, якій присвоюємо значення властивості user з ключем key. Якщо на цей момент key є "name", то value буде "alice".

4. if (typeof value === "string") { – Перевіряємо, чи value є рядком (string). Використовуємо оператор порівняння ===, щоб перевірити тип даних.

5. user[key] = value.toUpperCase(); – Якщо це рядок, викликаємо метод toUpperCase(), який перетворює всі літери на великі. Потім оновлюємо властивість user[key] новим рядком. Наприклад, "alice" стане "ALICE".

6. console.log(user); – Виводимо результат у консоль, щоб побачити, чи всі потрібні зміни внеслися. У результаті отримаємо об’єкт, де всі рядкові значення записані великими літерами.

Приклад 2. Перебір об’єкта за допомогою методів Object.keys(), Object.values(), Object.entries()

Опис задачі: тепер уявімо, що ми маємо об’єкт product, який містить інформацію про товар. Ми хочемо:

1. Отримати список усіх ключів об’єкта.
2. Отримати список усіх значень.
3. Отримати список пар [ключ, значення].
4. Вивести цю інформацію у зрозумілому вигляді.

Код із детальними поясненнями:

const product = {
  title: "Laptop",
  price: 1200,
  currency: "USD",
  inStock: true
};

// 1. Отримуємо масив усіх ключів об'єкта product
const keys = Object.keys(product);
// keys -> ["title", "price", "currency", "inStock"]

// 2. Отримуємо масив усіх значень об'єкта product
const values = Object.values(product);
// values -> ["Laptop", 1200, "USD", true]

// 3. Отримуємо масив пар [ключ, значення]
const entries = Object.entries(product);
// entries -> [["title", "Laptop"], ["price", 1200], ["currency", "USD"], ["inStock", true]]

// 4. Приклад використання циклу for...of для масиву entries
for (let [key, value] of entries) {
  console.log(`Ключ: ${key}, Значення: ${value}`);
}

Пояснення кожного рядка:

1. const product = { ... }; – Створюємо змінну product, якій присвоюємо об’єкт з інформацією про товар:

• inStock – булеве значення, що вказує на наявність на складі.
• title – назва товару,
• price – ціна,
• currency – валюта,

2.const keys = Object.keys(product); – Викликаємо вбудований метод Object.keys(), який повертає масив усіх ключів об’єкта product. Результат зберігаємо в змінну keys.

3. const values = Object.values(product); – Викликаємо метод Object.values(), який повертає масив усіх значень об’єкта product.

4. const entries = Object.entries(product); – Викликаємо метод Object.entries(), який повертає масив пар [ключ, значення].

5. for (let [key, value] of entries) { ... } – Використовуємо цикл for...of, щоб перебрати кожен елемент масиву entries.Оскільки кожен елемент масиву entries – це маленький масив із двома елементами [ключ, значення], ми застосували деструктуризацію let [key, value], аби одразу витягти key і value у змінні.

6. console.log(`Ключ: ${key}, Значення: ${value}`); – На кожній ітерації виводимо рядок, де показуємо поточний ключ і його значення.

У результаті в консолі ми побачимо послідовно:

Ключ: title, Значення: Laptop
Ключ: price, Значення: 1200
Ключ: currency, Значення: USD
Ключ: inStock, Значення: true

Зверніть увагу, що перебір об’єктів у JavaScript можна здійснювати кількома способами:

for...in (перебір властивостей об’єкта),

Object.keys() / Object.values() / Object.entries() (отримання масиву ключів/значень/пар),

for...of (перебір елементів масиву, якщо об’єкт – це масив або якщо ти використовуйте Object.entries()).

Завжди пам’ятайте про тип даних, із яким працюєте (рядок, число, булеве, масив чи об’єкт). Залежно від нього, будуть різні методи й підходи.
Коли працюєте із вкладеними структурами (наприклад, масив усередині об’єкта, об’єкт усередині масиву, або навіть об’єкт у полі об’єкта), впевніться, що послідовно звертаєтесь до правильного рівня вкладеності (через крапку . або через дужки []).

Функції в масивах і об’єктах JavaScript: детальний огляд

В JavaScript функції є першосортними громадянами (first-class citizens), що означає, що їх можна:

let greet = function(name) {
    console.log(`Привіт, ${name}!`);
};

function callFunction(func) {
    func();
}
callFunction(greet);

function createGreeter(greeting) {
    return function(name) {
        console.log(`${greeting}, ${name}!`);
    };
}

Функції в об’єктах: методи

Коли функція є властивістю об’єкта, її називають методом. Методи дозволяють об’єктам виконувати певні дії.

const person = {
    firstName: "Іван",
    lastName: "Петров",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

console.log(person.fullName()); // Виведе: "Іван Петров"

this: Всередині методу this посилається на сам об’єкт. Це дозволяє методу отримувати доступ до інших властивостей об’єкта.

Функції в масивах: методи масивів

Масиви в JavaScript є об’єктами, тому вони також мають свої методи. Методи масивів дозволяють виконувати різноманітні операції з елементами масиву, такі як додавання, видалення, пошук та сортування.

const numbers = [1, 2, 3, 4, 5];

// Додавання елемента в кінець масиву
numbers.push(6);

// Видалення останнього елемента
numbers.pop();

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

// Перевірка чи елемент існує в масиві
console.log(numbers.includes(3)); // Виведе: true

Функції як елементи масивів

Хоча масиви зазвичай зберігають примітивні значення або інші об’єкти, вони також можуть зберігати функції:

const functions = [
    function() { console.log("Функція 1"); },
    function() { console.log("Функція 2"); }
];

functions[0](); // Виведе: "Функція 1"

Особливості використання функцій в масивах і об’єктах

• Контекст виконання (this): Важливо розуміти, як працює this всередині функцій, особливо в методах об’єктів.
• Зв’язування контексту: Для керування значенням this можна використовувати bind(), call() та apply().
• Стрілочні функції: Стрілочні функції мають особливе поводження щодо this.
• Використання this в методах масивів: Деякі методи масивів, такі як map, filter, reduce, приймають функції як аргументи. У цих функціях this може посилатися на різні об’єкти в залежності від контексту.

Чому стрілочні функції часто використовують з методами масивів?

Стрілочні функції особливо зручні для використання в методах масивів завдяки лексичному this.

this: В методах масивів, переданих як аргументи, this зазвичай посилається на глобальний об’єкт. Стрілочні функції успадковують this з оточуючого контексту, що дозволяє використовувати this з об’єкта, в якому викликається метод масиву. Лаконічність: Стрілочні функції часто роблять код більш читабельним і компактним.

Лаконічність: Стрілочні функції часто роблять код більш читабельним і компактним.

Методи масивів, де використовуються функції:

map: Створює новий масив, застосовуючи функцію до кожного елемента.

filter: Створює новий масив, включаючи тільки ті елементи, для яких функція повернула true.

forEach: Виконує функцію для кожного елемента масиву.

find: Повертає перший елемент, для якого функція повернула true.