← JavaScript/Объекты#57 из 383← Предыдущий Следующий →+25 XP

Полезно по теме:Гайд: как учить JavaScript Практика: JS база Практика: async и сеть Термин: Closure

Объекты

Профиль пользователя в LinkedIn содержит имя, должность, компанию, навыки, контакты. Карточка товара на Wildberries — название, цену, рейтинг, размеры, фотографии. Всё это — объекты: структуры данных с именованными полями.

На основе предыдущих уроков

Массивы хранят упорядоченные списки. Объекты хранят именованные данные — ключ-значение. Часто они работают вместе: массив объектов (список товаров, список пользователей).

Какую проблему решают объекты?

Без объектов пришлось бы хранить данные о пользователе в десяти отдельных переменных: userName, userAge, userEmail... Объект группирует связанные данные в одну структуру.

Создание объекта

const user = {
  id: 42,
  name: 'Мария Иванова',
  email: 'maria@example.com',
  isAdmin: false,
}

Доступ к свойствам

// Через точку (когда знаешь имя свойства)
console.log(user.name)    // 'Мария Иванова'

// Через скобки (когда имя свойства динамическое)
const field = 'email'
console.log(user[field])  // 'maria@example.com'

// Изменение свойства
user.isAdmin = true

// Добавление нового свойства
user.lastLogin = new Date().toISOString()

Деструктуризация — быстро достать нужные поля

const { name, email } = user
console.log(name, email)  // 'Мария Иванова' 'maria@example.com'

// С переименованием
const { name: userName } = user
console.log(userName)  // 'Мария Иванова'

// Вложенные объекты
const { preferences: { theme } } = user

Spread оператор — копирование и обновление

// Копирование объекта
const copy = { ...user }

// Обновление: создаём новый объект с изменёнными полями
const updatedUser = { ...user, isAdmin: true, role: 'editor' }
// Исходный user не изменился!

Методы объекта

Функции внутри объекта — это методы:

const cart = {
  items: [],
  add(product) {
    this.items.push(product)
  },
  getTotal() {
    return this.items.reduce((sum, p) => sum + p.price, 0)
  }
}

cart.add({ name: 'Книга', price: 500 })
console.log(cart.getTotal())  // 500

Object.keys / values / entries

const config = { theme: 'dark', lang: 'ru', fontSize: 14 }

Object.keys(config)     // ['theme', 'lang', 'fontSize']
Object.values(config)   // ['dark', 'ru', 14]
Object.entries(config)  // [['theme', 'dark'], ['lang', 'ru'], ['fontSize', 14]]

Типичные ошибки

Ошибка 1: Обратиться к несуществующему свойству

const product = { name: 'Кофе', price: 450 }
console.log(product.discount)        // undefined (не ошибка, но часто баг)
console.log(product.discount * 0.1)  // NaN — умножение на undefined!
// Правильно: проверяй наличие свойства
if (product.discount !== undefined) { ... }

Ошибка 2: Мутировать объект вместо создания нового

function applyDiscount(product) {
  product.price *= 0.9  // изменяем оригинал! Это сайд-эффект
  return product
}
// Правильно:
function applyDiscount(product) {
  return { ...product, price: product.price * 0.9 }
}

Ошибка 3: Перепутать {} в деструктуризации с объектом

const user = { name: 'Иван', age: 25 }
const { name, age } = user  // OK — деструктуризация
const obj = { name, age }   // OK — создание объекта
// Это разные операции с одинаковым синтаксисом!

В реальных проектах

Объекты — главная структура данных в JS. Ответы от API приходят как объекты (JSON). React-компоненты получают пропсы как объекты. Redux хранит состояние приложения как объект. Деструктуризация и spread используются в каждом файле реального проекта.

Примеры

Управление профилем пользователя

// Профиль пользователя с вложенными объектами
const user = {
  id: 'usr_42',
  name: 'Мария Иванова',
  email: 'maria@example.com',
  preferences: {
    theme: 'dark',
    language: 'ru',
    notifications: true,
  },
  stats: {
    ordersCount: 14,
    totalSpent: 87500,
  }
}

// Деструктуризация с вложенными объектами
const { name, preferences: { theme, language } } = user
console.log(name, theme, language)  // 'Мария Иванова' 'dark' 'ru'

// Обновление настроек (не мутируем оригинал!)
const updatedUser = {
  ...user,
  preferences: {
    ...user.preferences,
    theme: 'light',        // изменяем только тему
  }
}
console.log(updatedUser.preferences.theme)  // 'light'
console.log(user.preferences.theme)          // 'dark' — оригинал не изменился

// Получить список ключей настроек
console.log(Object.keys(user.preferences))  // ['theme', 'language', 'notifications']

// Динамический доступ к свойству
const statKey = 'ordersCount'
console.log(user.stats[statKey])  // 14

Объекты

На основе предыдущих уроков

Какую проблему решают объекты?

Создание объекта

const user = {
  id: 42,
  name: 'Мария Иванова',
  email: 'maria@example.com',
  isAdmin: false,
}

Доступ к свойствам

// Через точку (когда знаешь имя свойства)
console.log(user.name)    // 'Мария Иванова'

// Через скобки (когда имя свойства динамическое)
const field = 'email'
console.log(user[field])  // 'maria@example.com'

// Изменение свойства
user.isAdmin = true

// Добавление нового свойства
user.lastLogin = new Date().toISOString()

Деструктуризация — быстро достать нужные поля

const { name, email } = user
console.log(name, email)  // 'Мария Иванова' 'maria@example.com'

// С переименованием
const { name: userName } = user
console.log(userName)  // 'Мария Иванова'

// Вложенные объекты
const { preferences: { theme } } = user

Spread оператор — копирование и обновление

// Копирование объекта
const copy = { ...user }

// Обновление: создаём новый объект с изменёнными полями
const updatedUser = { ...user, isAdmin: true, role: 'editor' }
// Исходный user не изменился!

Методы объекта

Функции внутри объекта — это методы:

const cart = {
  items: [],
  add(product) {
    this.items.push(product)
  },
  getTotal() {
    return this.items.reduce((sum, p) => sum + p.price, 0)
  }
}

cart.add({ name: 'Книга', price: 500 })
console.log(cart.getTotal())  // 500

Object.keys / values / entries

const config = { theme: 'dark', lang: 'ru', fontSize: 14 }

Object.keys(config)     // ['theme', 'lang', 'fontSize']
Object.values(config)   // ['dark', 'ru', 14]
Object.entries(config)  // [['theme', 'dark'], ['lang', 'ru'], ['fontSize', 14]]

Типичные ошибки

Ошибка 1: Обратиться к несуществующему свойству

const product = { name: 'Кофе', price: 450 }
console.log(product.discount)        // undefined (не ошибка, но часто баг)
console.log(product.discount * 0.1)  // NaN — умножение на undefined!
// Правильно: проверяй наличие свойства
if (product.discount !== undefined) { ... }

Ошибка 2: Мутировать объект вместо создания нового

function applyDiscount(product) {
  product.price *= 0.9  // изменяем оригинал! Это сайд-эффект
  return product
}
// Правильно:
function applyDiscount(product) {
  return { ...product, price: product.price * 0.9 }
}

Ошибка 3: Перепутать {} в деструктуризации с объектом

const user = { name: 'Иван', age: 25 }
const { name, age } = user  // OK — деструктуризация
const obj = { name, age }   // OK — создание объекта
// Это разные операции с одинаковым синтаксисом!

В реальных проектах

Примеры

Управление профилем пользователя

// Профиль пользователя с вложенными объектами
const user = {
  id: 'usr_42',
  name: 'Мария Иванова',
  email: 'maria@example.com',
  preferences: {
    theme: 'dark',
    language: 'ru',
    notifications: true,
  },
  stats: {
    ordersCount: 14,
    totalSpent: 87500,
  }
}

// Деструктуризация с вложенными объектами
const { name, preferences: { theme, language } } = user
console.log(name, theme, language)  // 'Мария Иванова' 'dark' 'ru'

// Обновление настроек (не мутируем оригинал!)
const updatedUser = {
  ...user,
  preferences: {
    ...user.preferences,
    theme: 'light',        // изменяем только тему
  }
}
console.log(updatedUser.preferences.theme)  // 'light'
console.log(user.preferences.theme)          // 'dark' — оригинал не изменился

// Получить список ключей настроек
console.log(Object.keys(user.preferences))  // ['theme', 'language', 'notifications']

// Динамический доступ к свойству
const statKey = 'ordersCount'
console.log(user.stats[statKey])  // 14

Задание

Ты разрабатываешь функцию для создания карточки товара в магазине. Функция createProduct получает название, цену и категорию, и возвращает объект товара. Потом используй деструктуризацию чтобы достать нужные поля.

Подсказка

В функции: name: name можно сократить до просто name (shorthand). Для обновления: { ...laptop, price: 170000 }

Загружаем среду выполнения...

Загружаем AI-помощника...

← JavaScript/Объекты#57 из 383← Предыдущий Следующий →+25 XP

Полезно по теме:Гайд: как учить JavaScript Практика: JS база Практика: async и сеть Термин: Closure

Объекты

На основе предыдущих уроков

Какую проблему решают объекты?

Создание объекта

const user = {
  id: 42,
  name: 'Мария Иванова',
  email: 'maria@example.com',
  isAdmin: false,
}

Доступ к свойствам

// Через точку (когда знаешь имя свойства)
console.log(user.name)    // 'Мария Иванова'

// Через скобки (когда имя свойства динамическое)
const field = 'email'
console.log(user[field])  // 'maria@example.com'

// Изменение свойства
user.isAdmin = true

// Добавление нового свойства
user.lastLogin = new Date().toISOString()

Деструктуризация — быстро достать нужные поля

const { name, email } = user
console.log(name, email)  // 'Мария Иванова' 'maria@example.com'

// С переименованием
const { name: userName } = user
console.log(userName)  // 'Мария Иванова'

// Вложенные объекты
const { preferences: { theme } } = user

Spread оператор — копирование и обновление

// Копирование объекта
const copy = { ...user }

// Обновление: создаём новый объект с изменёнными полями
const updatedUser = { ...user, isAdmin: true, role: 'editor' }
// Исходный user не изменился!

Методы объекта

Функции внутри объекта — это методы:

const cart = {
  items: [],
  add(product) {
    this.items.push(product)
  },
  getTotal() {
    return this.items.reduce((sum, p) => sum + p.price, 0)
  }
}

cart.add({ name: 'Книга', price: 500 })
console.log(cart.getTotal())  // 500

Object.keys / values / entries

const config = { theme: 'dark', lang: 'ru', fontSize: 14 }

Object.keys(config)     // ['theme', 'lang', 'fontSize']
Object.values(config)   // ['dark', 'ru', 14]
Object.entries(config)  // [['theme', 'dark'], ['lang', 'ru'], ['fontSize', 14]]

Типичные ошибки

Ошибка 1: Обратиться к несуществующему свойству

const product = { name: 'Кофе', price: 450 }
console.log(product.discount)        // undefined (не ошибка, но часто баг)
console.log(product.discount * 0.1)  // NaN — умножение на undefined!
// Правильно: проверяй наличие свойства
if (product.discount !== undefined) { ... }

Ошибка 2: Мутировать объект вместо создания нового

function applyDiscount(product) {
  product.price *= 0.9  // изменяем оригинал! Это сайд-эффект
  return product
}
// Правильно:
function applyDiscount(product) {
  return { ...product, price: product.price * 0.9 }
}

Ошибка 3: Перепутать {} в деструктуризации с объектом

const user = { name: 'Иван', age: 25 }
const { name, age } = user  // OK — деструктуризация
const obj = { name, age }   // OK — создание объекта
// Это разные операции с одинаковым синтаксисом!

В реальных проектах

Примеры

Управление профилем пользователя

// Профиль пользователя с вложенными объектами
const user = {
  id: 'usr_42',
  name: 'Мария Иванова',
  email: 'maria@example.com',
  preferences: {
    theme: 'dark',
    language: 'ru',
    notifications: true,
  },
  stats: {
    ordersCount: 14,
    totalSpent: 87500,
  }
}

// Деструктуризация с вложенными объектами
const { name, preferences: { theme, language } } = user
console.log(name, theme, language)  // 'Мария Иванова' 'dark' 'ru'

// Обновление настроек (не мутируем оригинал!)
const updatedUser = {
  ...user,
  preferences: {
    ...user.preferences,
    theme: 'light',        // изменяем только тему
  }
}
console.log(updatedUser.preferences.theme)  // 'light'
console.log(user.preferences.theme)          // 'dark' — оригинал не изменился

// Получить список ключей настроек
console.log(Object.keys(user.preferences))  // ['theme', 'language', 'notifications']

// Динамический доступ к свойству
const statKey = 'ordersCount'
console.log(user.stats[statKey])  // 14

Объекты

На основе предыдущих уроков

Какую проблему решают объекты?

Создание объекта

const user = {
  id: 42,
  name: 'Мария Иванова',
  email: 'maria@example.com',
  isAdmin: false,
}

Доступ к свойствам

// Через точку (когда знаешь имя свойства)
console.log(user.name)    // 'Мария Иванова'

// Через скобки (когда имя свойства динамическое)
const field = 'email'
console.log(user[field])  // 'maria@example.com'

// Изменение свойства
user.isAdmin = true

// Добавление нового свойства
user.lastLogin = new Date().toISOString()

Деструктуризация — быстро достать нужные поля

const { name, email } = user
console.log(name, email)  // 'Мария Иванова' 'maria@example.com'

// С переименованием
const { name: userName } = user
console.log(userName)  // 'Мария Иванова'

// Вложенные объекты
const { preferences: { theme } } = user

Spread оператор — копирование и обновление

// Копирование объекта
const copy = { ...user }

// Обновление: создаём новый объект с изменёнными полями
const updatedUser = { ...user, isAdmin: true, role: 'editor' }
// Исходный user не изменился!

Методы объекта

Функции внутри объекта — это методы:

const cart = {
  items: [],
  add(product) {
    this.items.push(product)
  },
  getTotal() {
    return this.items.reduce((sum, p) => sum + p.price, 0)
  }
}

cart.add({ name: 'Книга', price: 500 })
console.log(cart.getTotal())  // 500

Object.keys / values / entries

const config = { theme: 'dark', lang: 'ru', fontSize: 14 }

Object.keys(config)     // ['theme', 'lang', 'fontSize']
Object.values(config)   // ['dark', 'ru', 14]
Object.entries(config)  // [['theme', 'dark'], ['lang', 'ru'], ['fontSize', 14]]

Типичные ошибки

Ошибка 1: Обратиться к несуществующему свойству

const product = { name: 'Кофе', price: 450 }
console.log(product.discount)        // undefined (не ошибка, но часто баг)
console.log(product.discount * 0.1)  // NaN — умножение на undefined!
// Правильно: проверяй наличие свойства
if (product.discount !== undefined) { ... }

Ошибка 2: Мутировать объект вместо создания нового

function applyDiscount(product) {
  product.price *= 0.9  // изменяем оригинал! Это сайд-эффект
  return product
}
// Правильно:
function applyDiscount(product) {
  return { ...product, price: product.price * 0.9 }
}

Ошибка 3: Перепутать {} в деструктуризации с объектом

const user = { name: 'Иван', age: 25 }
const { name, age } = user  // OK — деструктуризация
const obj = { name, age }   // OK — создание объекта
// Это разные операции с одинаковым синтаксисом!

В реальных проектах

Примеры

Управление профилем пользователя

// Профиль пользователя с вложенными объектами
const user = {
  id: 'usr_42',
  name: 'Мария Иванова',
  email: 'maria@example.com',
  preferences: {
    theme: 'dark',
    language: 'ru',
    notifications: true,
  },
  stats: {
    ordersCount: 14,
    totalSpent: 87500,
  }
}

// Деструктуризация с вложенными объектами
const { name, preferences: { theme, language } } = user
console.log(name, theme, language)  // 'Мария Иванова' 'dark' 'ru'

// Обновление настроек (не мутируем оригинал!)
const updatedUser = {
  ...user,
  preferences: {
    ...user.preferences,
    theme: 'light',        // изменяем только тему
  }
}
console.log(updatedUser.preferences.theme)  // 'light'
console.log(user.preferences.theme)          // 'dark' — оригинал не изменился

// Получить список ключей настроек
console.log(Object.keys(user.preferences))  // ['theme', 'language', 'notifications']

// Динамический доступ к свойству
const statKey = 'ordersCount'
console.log(user.stats[statKey])  // 14

Задание

Подсказка

В функции: name: name можно сократить до просто name (shorthand). Для обновления: { ...laptop, price: 170000 }

Загружаем среду выполнения...

Загружаем AI-помощника...