Об’єкти в 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.