Коли ви вивчаєте JavaScript (або будь-яку іншу мову програмування), ви швидко зіштовхнетеся з двома основними концепціями: літерали об'єктів (object literals) і масиви (Arrays). Це обидва типи даних, що використовуються для зберігання колекцій даних. Це означає, що вони є інструментами для організації та зберігання даних, але роблять це різними способами.

Давайте розглянемо, що це таке, чим вони відрізняються та як ефективно їх використовувати.

Ми будемо пояснювати все якнайпростіше і без складних термінів. Спочатку розглянемо кожен тип окремо, а потім порівняємо їх у таблиці. LFG!!🚀🚀

Що таке літери об'єктів?

Літерали об'єктів — це незапорядкована колекція пар "ключ-значення". Це як спосіб згрупувати пов'язані дані за допомогою ярликів. Уявіть об'єкт як колекцію властивостей, де кожна властивість має назву (ключ) і значення. Ключі (або властивості) є рядками (strings) (згадайте, що коли ми говоримо про рядки в JS, ми маємо на увазі алфавітні символи) або символами, а значення можуть бути будь-якого типу.

Об'єкти визначаються за допомогою фігурних дужок { }.

Приклад:

Давайте візьмемо приклад з реального життя. Уявімо, що ви хочете описати мене, Gerald Nwodo:

let user = {  
 name: "Gerald Nwodo",  
 occupation: "Product Engineer",  
 experienceYears: 3,  
 gender: "Male",  
 tools: ["Figma", "Webflow", "Bubble", "JavaScript", "HTML", "CSS"],  
 isAvailableForHire: true, // Boolean indicating availability  
 contact: { // Nested object for contact details  
 email: "[email protected]",  
 phone: "+12349031815631",  
 linkedIn: "https://www.linkedin.com/in/geralduxdesigner/",  
 portfolio: "https://nwodogerald.webflow.io/"  
 }  
};

Це виглядає як багато, правда? Це може здатися складним, але важливо пояснити, що відбувається:

Ось що відбувається:

• Ключі — це ярлики (name, occupation, або tools), і вони представляють конкретні частини даних.
• Значення — це дані, пов'язані з ключами ("Gerald Nwodo", "Product Engineer", або 3).
• Значення можуть бути будь-якого типу — рядки, числа, масиви, булеві значення, або навіть інші об'єкти (як, наприклад, об'єкт contact, вкладений всередину).

Доступ до даних:

Ви можете отримати доступ до цих значень, використовуючи позначення через крапку або через дужки.

console.log(user.name); // Виводить: Gerald Nwodo  
console.log(user.tools[1]); // Виводить: Webflow  
console.log(user.contact.email); // Виводить: [email protected]

Я, до речі, надаю перевагу нотації через крапку.

Що можна робити з об'єктами?

• Додавати нові ключі: Ви можете додавати нові ключі до існуючого об'єкта.

user.specialization = "Frontend Development"; // Додає новий ключ

• Оновлювати властивості: Ви можете оновлювати властивості існуючого ключа:

user.isAvailableForHire = false; // Оновлює наявність

• Видаляти ключі: Також можна видалити існуючий ключ з об'єкта:

delete user.gender;  
console.log(user); // Видаляє ключ gender

Що таке масиви?

Масиви — це впорядковані колекції елементів. В той час як об'єкти чудово підходять для організації даних за ярликами (ключами), масиви ідеально підходять для зберігання списків елементів. Уявіть масив як полицю, де кожен елемент має своє місце. У JavaScript масиви записуються за допомогою квадратних дужок [].

Масиви зазвичай складаються з елементів одного типу і індексуються за числовими індексами, починаючи з 0 (про лічбу з нуля (zero-based counting) ми поговоримо якось іншим разом).

Приклад:

Уявімо, що я (Gerald Nwodo) використовую кілька інструментів у своїй роботі.
Ось як ви можете представити це в масиві.

let tools = ["Figma", "Webflow", "Bubble", "JavaScript", "HTML", "CSS"];

Ось що вам слід знати про масиви:

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

console.log(tools[0]); // Виводить: Figma  
console.log(tools[3]); // Виводить: JavaScript  

// зверніть увагу на їх позиції, рахунок починається з 0

Що можна робити з масивами?

Як і з об'єктами, ви також можете виконувати деякі операції з масивами, використовуючи методи масивів (це просто властивості масивів, які містять функції).

• Додавати елементи: Ви можете додавати нові елементи в кінець масиву, використовуючи метод масиву .push():

tools.push("React"); // Додає 'React' в кінець  
console.log(tools);  
// виведе: ['Figma', 'Webflow', 'Bubble', 'JavaScript', 'HTML', 'CSS', 'React']

• Видаляти елементи: Використовуйте .pop(), щоб видалити останній елемент:

tools.pop(); // Видаляє останній елемент  
console.log(tools);  
// виведе: ['Figma', 'Webflow', 'Bubble', 'JavaScript', 'HTML']

• Перебирати елементи: Масиви чудово підходять для перебору всіх елементів:

tools.forEach((tool) => {  
 console.log(tool); // Перебирає і виводить кожен елемент масиву  
});

Основні відмінності між об'єктами та масивами

Давайте підсумуємо це в таблиці для тих, хто хоче отримати короткий огляд:

Таблиця, що надає стислий огляд об'єктів і масивів.

Коли використовувати об'єкти чи масиви

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

Використовуйте літерали об'єктів, коли:

• Вам потрібно згрупувати пов'язані дані за допомогою ярликів.
• Дані більш складні і можуть містити вкладені структури.
• Приклад: Зберігання деталей користувача або продукту.

Використовуйте масиви, коли:

• Вам потрібно зберігати список подібних елементів.
• Порядок елементів важливий.
• Приклад: Зберігання списку інструментів або навичок.

Як не використовувати їх

Ми вже розглянули, що таке об'єкти і масиви, що з ними можна робити та коли і як їх використовувати. Тепер давайте поговоримо, як не використовувати їх:

• Не ускладнюйте об'єкти: Тримайте об'єкти сфокусованими на одній меті. Якщо це здається заплутаним, розгляньте можливість поділу на менші об'єкти.
• Не використовуйте масиви для не пов'язаних даних: Масиви повинні містити подібні елементи. Наприклад, не змішуйте числа, рядки та об'єкти в одному масиві, якщо це не має сенсу.
  Якщо ви зберігаєте дані користувача, не робіть ось так:

let user = ["Gerald Nwodo", "Product Engineer", 3];  
console.log(user[0]); // Це працює, але не зовсім зрозуміло, що означає 'user[0]'

Замість цього, використовуйте літерал об'єкта, щоб це було зрозуміло:

let user = {  
 name: "Gerald Nwodo",  
 occupation: "Product Engineer",  
 experienceYears: 3  
};  
console.log(user.name); // Виводить: Gerald Nwodo

• Не ускладнюйте літерал об'єкта: Подібно до попереднього пункту, якщо ваші дані просто є списком, не використовуйте літерал об'єкта, використовуйте список:

// Занадто складно:  
let tools = {  
 tool1: "Figma",  
 tool2: "Webflow",  
 tool3: "Bubble"  
};  

// Краще:  
let tools = ["Figma", "Webflow", "Bubble"];

Висновок

Літерали об'єктів і масиви — це потужні інструменти в JavaScript, кожен з яких має свої сильні сторони. Об'єкти чудово підходять для організації даних з ярликами, в той час як масиви ідеально підходять для управління списками елементів в порядку.
Коли ви комбінуєте їх, ви можете працювати практично з будь-якою структурою даних, яку зустрінете.

Використовуйте об'єкти та масиви розумно, дотримуючись таких принципів:

• Тримайте їх простими та зрозумілими.
• Дотримуйтесь їх сильних сторін (пари ключ-значення для об'єктів, списки для масивів).
• Уникайте зайвої складності.

Найкращий спосіб звикнути до них? Практика! Чим більше ви використовуєте об'єкти та масиви, тим природніше вони виглядають. Успіхів у програмуванні і до зустрічі в наступній статті.

Перекладено з: A friendly guide into Array and Object Literal