Поняття об’єкта в JS

У програмуванні існує річ, здатна оживити код і дати йому здатність організовувати дані та функціональність. І ця річ називається javascript об’єкт. Це основні будівельні блоки мови, які дають нам змогу організовувати і структурувати дані. Вони являють собою контейнери, в яких ми можемо зберігати пов’язані дані та функціональність. У цій статті ви дізнаєтеся, яку ключову роль вони відіграють у програмуванні, відкриваючи вам нові можливості. Отже…

Оголошення об’єкта JS

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

1. Літеральне оголошення об’єкта:

Найпростіший спосіб створити об’єкт – це використовувати фігурні дужки {}. Усередині фігурних дужок ми визначаємо властивості об’єкта та їхні значення. Наприклад:

let person = {

    firstName: "John",

    lastName: "Doe",

    age: 30

};

Тут ми створили об’єкт person, який містить інформацію про людину, включно з ім’ям, прізвищем і віком.

2. Конструктор об’єкта:

Ви також можете використовувати конструктор об’єкта, щоб створити новий об’єкт. Ось приклад:

function Person(firstName, lastName, age) {

    this.firstName = firstName;

    this.lastName = lastName;

    this.age = age;

}

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

Ми визначили функцію Person, яка приймає параметри firstName, lastName і age та ініціалізує об’єкт person з цими значеннями.

3. Створення об’єкта за допомогою Object.create():

Ви також можете використовувати метод Object.create() для створення об’єкта із зазначеним прототипом. Приклад:

// Defining a prototype object for a person

let personPrototype = {

    greet: function() {

        console.log("Hello, I am " + this.firstName + " " + this.lastName);

    }

};

// Creating an object based on the personPrototype

let person = Object.create(personPrototype);

// Adding properties to the person object

person.firstName = "John";

person.lastName = "Doe";

person.age = 30;

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

Додавання властивостей і елементів в об’єкт 

Давай поговоримо, як додати властивість в об’єкт js після його створення (це дає нам змогу розширювати функціональність та інформацію, які ми можемо зберігати в об’єкті).

Отже, припустимо, у нас є об’єкт, який являє собою інформацію про користувача:

let user = {

  name: 'John',

  age: 30

};

Тепер додамо нову властивість до цього об’єкта, щоб вказати його професію. Просто використовуйте синтаксис з крапкою і дайте новій властивості ім’я та значення:

user.profession = 'developer';

Ось і все! Тепер у нас є властивість “profession” зі значенням “developer”.

А як додати елемент в об’єкт js? У JavaScript ми можемо використовувати масиви, щоб зберігати безліч елементів, але іноді нам може знадобитися додати елементи безпосередньо в об’єкт. Тоді ми використовуємо синтаксис із квадратними дужками. Ось приклад:

user['hobbies'] = ['reading', 'coding', 'hiking'];

У цьому прикладі ми додали властивість “hobbies” в об’єкт “user” і привласнили йому масив із кількома хобі.

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

Не варто також забувати про те, як додати значення в об’єкт js, оскільки це теж є важливим аспектом роботи з об’єктами в JavaScript. Це дає нам змогу оновлювати та розширювати дані в об’єкті;

Видалення об’єктів та їхніх властивостей 

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

Для початку розглянемо видалення властивостей з об’єкта. Припустимо, у нас є об’єкт, що представляє інформацію про людину:

let person = {

  name: 'John',

  age: 30,

  profession: 'developer'

};

Тепер уявімо, що ви хочете видалити властивість “age” з цього об’єкта. Просто використовуйте оператор “delete” із зазначенням імені властивості:

delete person.age;

Ось і все! Тепер властивість “age” більше не існує в об’єкті “person”. Зверніть увагу, що сам об’єкт “person” залишається незмінним, ми просто видалили посилання на властивість.

Тепер давайте поговоримо про те, як видалити об’єкт js цілком. Просто використовуйте оператор “delete” із зазначенням імені об’єкта:

delete person;

Але тут є нюанси. Видалення об’єкта може викликати деякі проблеми, особливо якщо він містить посилання на інші об’єкти або використовується в інших частинах коду. У деяких випадках це може призвести до витоків пам’яті або несподіваної поведінки програми. Тому, потрібно бути обережним.

Порівняння об’єктів JS

Цей процес може бути дещо заплутаним, тому давай розберемося, як це працює.

Ось приклад:

let obj1 = { name: 'John' };

let obj2 = { name: 'John' };

console.log(obj1 === obj2); // false

У цьому прикладі у нас є два об’єкти, obj1 і obj2, з однаковим вмістом. Але під час порівняння за допомогою оператора === ми отримуємо false. Чому? Тому що порівняння об’єктів у JavaScript базується на порівнянні посилань на них, а не їхніх властивостей. У цьому випадку obj1 і obj2 – це два різні посилання на два різні об’єкти.

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

1. Перший метод – порівняння властивостей об’єктів по черзі. Ми можемо перебрати всі властивості одного об’єкта і перевірити їх на рівність із властивостями іншого об’єкта. Ось приклад:

function areObjectsEqual(obj1, obj2) {

  let keys1 = Object.keys(obj1);

  let keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {

    return false;

  }

  for (let key of keys1) {

    if (obj1[key] !== obj2[key]) {

      return false;

    }

  }

  return true;

}

let obj1 = { name: 'John', age: 30 };

let obj2 = { name: 'John', age: 30 };

console.log(areObjectsEqual(obj1, obj2)); // true

Ми створили функцію areObjectsEqual, яка порівнює властивості двох об’єктів. Ми отримуємо масиви ключів об’єктів за допомогою Object.keys(), потім порівнюємо їхні довжини і кожну властивість по черзі. Якщо всі властивості рівні, то повертаємо true.

2. Другий метод – ми можемо перетворити об’єкти в JSON-рядки і потім порівняти ці рядки. Ось приклад:

let obj1 = { name: 'John', age: 30 };

let obj2 = { name: 'John', age: 30 };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

Ми перетворили об’єкти obj1 і obj2 на JSON-рядки за допомогою JSON.stringify(), а потім порівняли їх. Однак, цей метод має обмеження. Наприклад, якщо об’єкти містять функції або невпорядковані властивості, результат порівняння може бути непередбачуваним.

Як бачимо, порівняння об’єктів у JavaScript вимагає особливої уваги і вибору відповідного методу залежно від контексту;

Виведення об’єктів 

Поговорімо про те, що таке виведення об’єкта js і чому це може бути корисно під час налагодження коду.

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

Один зі способів вивести об’єкт – використовувати метод console.log(). Просто передайте об’єкт як аргумент цьому методу, і його вміст буде виведено в консоль розробника. Ось приклад:

let person = {

  name: 'John',

  age: 30,

  profession: 'developer'

};

console.log(person);

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

Також веб-браузери пропонують різні інструменти розробника, які дають змогу виводити об’єкти в більш читабельному форматі. Наприклад, в інструментах розробника Google Chrome або Mozilla Firefox ви можете розгорнути об’єкт, щоб побачити його структуру і властивості у вигляді ієрархічного дерева.

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

Висновок

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

Врахуйте, що порівняння об’єктів у JavaScript відрізняється від порівняння примітивних типів даних. Це важливо пам’ятати, щоб уникнути непорозумінь під час роботи з об’єктами.

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

Це ключова навичка, яка допоможе вам розробляти ефективний і чистий код і ще більше розкрити свій потенціал як розробника!