Работа с объектами

3.1. Объекты: создание и основные операции

Что такое объекты и зачем они нужны? 🤔

Объекты в JavaScript — это структуры данных, которые позволяют хранить информацию в виде пар ключ-значение. Ключ — это строка (название свойства), а значение — это данные любого типа: число, строка, массив, другой объект или даже функция.

Зачем они нужны?
Объекты помогают организовать данные в удобной форме. Например, если вы хотите описать пользователя, вы можете создать объект, который будет содержать всю информацию о нем: имя, возраст, email и так далее. Это гораздо удобнее, чем использовать множество переменных.

Как создать объект? 🛠️

Есть два основных способа создания объектов:

1. Литерал объекта (самый простой и популярный способ)

const user = { 
  name: "Алексей", 
  age: 25, 
  isAdmin: false 
};

Здесь мы создали объект user с тремя свойствами: name, age и isAdmin.

1. Конструктор new Object() (менее популярный способ)

user = new Object();
user.name = "Алексей"; 
user.age = 25; 
user.isAdmin = false;

Этот способ делает то же самое, но выглядит более громоздко. Литерал объекта — наш выбор! 😉

Как получить доступ к свойствам объекта? 🔑

Есть два способа доступа к свойствам объекта:

1. Через точку

console.log(user.name); // "Алексей"

2. Через квадратные скобки (удобно, если ключ хранится в переменной)

const key = "age"; console.log(user[key]); // 25

Как добавить или изменить свойства? ✏️

Просто присвойте значение новому или существующему ключу:

user.city = "Москва"; // Добавили новое свойство
user.age = 26; // Изменили существующее свойство

Как удалить свойство? 🗑️

Используйте оператор delete:

delete user.isAdmin; // Удалили свойство isAdmin

Практический пример: объект-профиль 🎯

Давай создадим объект, который описывает профиль пользователя в социальной сети:

const profile = {
  username: "js_master",
  posts: 42,
  isVerified: true,
  bio: "Люблю JavaScript и котиков 🐱"
};

console.log(profile.username); // "js_master"
console.log(profile["bio"]); // "Люблю JavaScript и котиков 🐱"

3.2. Методы объектов: функции внутри объектов 🛠️

Что такое методы?

Методы — это функции, которые хранятся внутри объекта как его свойства. Они позволяют объекту "действовать" или выполнять какие-то операции.

Как создать метод?

Просто добавьте функцию как значение свойства:

const user = {
  name: "Алексей",
  age: 25,
  sayHello: function() {
    console.log(`Привет, меня зовут ${this.name}!`);
  }
};

user.sayHello(); // "Привет, меня зовут Алексей!"

Ключевое слово this

Внутри метода ключевое слово this ссылается на сам объект, в котором находится метод. В примере выше this.name означает "свойство name этого объекта".

Важно: Если вы используете стрелочную функцию, this будет вести себя иначе (об этом позже).

Практический пример: объект-калькулятор 🧮

Создадим объект, который умеет выполнять базовые математические операции:

const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(10, 4)); // 6

3.3. Контекст this 🎯

Что такое this?

this — это ключевое слово, которое ссылается на текущий контекст выполнения. В методах объекта this обычно ссылается на сам объект.

Как работает this?

• В методах объекта this ссылается на объект, в котором находится метод

const user = { 
  name: "Алексей", 
  greet: function() { 
    console.log(`Привет, ${this.name}!`); 
  } 
}; user.greet(); // "Привет, Алексей!"

• В глобальной области видимости (вне функций и объектов) this ссылается на глобальный объект (window в браузере, global в Node.js).

Проблемы с this

this может потерять контекст, если метод передается как callback или используется в стрелочной функции. Например:

const user = {
  name: "Алексей",
  greet: function() {
    setTimeout(function() {
      console.log(`Привет, ${this.name}!`); // Ошибка: this.name === undefined
    }, 1000);
  }
};

user.greet(); // "Привет, undefined!"

const user = {
  name: "Алексей",
  greet: function() {
    setTimeout(() => {
      console.log(`Привет, ${this.name}!`); // Работает!
    }, 1000);
  }
};

user.greet(); // "Привет, Алексей!"

3.4. Вложенные объекты 🎁

Что такое вложенные объекты?

Это объекты, которые находятся внутри других объектов. Они помогают организовать сложные структуры данных.

const user = {
  name: "Алексей",
  address: {
    city: "Москва",
    street: "Ленина",
    zip: "123456"
  }
};

console.log(user.address.city); // "Москва"

Как работать с вложенными объектами?

Доступ к свойствам вложенных объектов осуществляется через цепочку точек или квадратных скобок:

console.log(user["address"]["street"]); // "Ленина"

const key = "name"; 
console.log(user.key); // undefined (ошибка!) 
console.log(user[key]); // "Алексей" (правильно)

const colors = { 
  red: "#FF0000", 
  green: "#00FF00", 
  blue: "#0000FF" 
}; 
console.log(colors["green"]); // "#00FF00"

const key = "favoriteFood"; 
const user = { 
  [key]: "Пицца" 
}; 
console.log(user.favoriteFood); // "Пицца"

const user = { name: "Алексей" }; 
const userCopy = { ...user }; 
console.log(userCopy); // { name: "Алексей" }