Объект

Непримитивный тип данных. Представляет собой набор свойств.

Время чтения: 6 мин

Кратко

Секция статьи "Кратко"

Кроме примитивных типов в JavaScript существуют и сложные — например, объект.

Объект (object) — это набор свойств. Каждое свойство состоит из названия и значения. Название может быть строкой или символом, а значение может быть любым.

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

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

Секция статьи "Создание объектов"

Чаще всего объекты создают с помощью литеральной записи.

Пустой объект без свойств можно создать парой фигурных скобок:

        
          
          const cat = {}
          const cat = {}

        
        
          
        
      

Когда нужно создать объект со свойствами, то их описывают внутри фигурных скобок. Свойства указываются в формате имяСвойства : значение, между свойствами ставится запятая:

        
          
          const book = {  title: 'Война и мир',  author: 'Лев Толстой',  pages: 1274,  isFinished: true}
          const book = {
  title: 'Война и мир',
  author: 'Лев Толстой',
  pages: 1274,
  isFinished: true
}

        
        
          
        
      

Значением может быть другой объект или массив:

        
          
          const cat = {  kittens: ['Беляш', 'Михаил', 'Чарли'],  favoriteToy: {    name: 'мячик',    size: 'маленький',  },}
          const cat = {
  kittens: ['Беляш', 'Михаил', 'Чарли'],
  favoriteToy: {
    name: 'мячик',
    size: 'маленький',
  },
}

        
        
          
        
      

Или даже функция:

        
          
          const cat = {  name: 'Том',  meow: function () {    console.log('мяу мяу')  },}cat.meow()// мяу мяу
          const cat = {
  name: 'Том',
  meow: function () {
    console.log('мяу мяу')
  },
}

cat.meow()
// мяу мяу

        
        
          
        
      

Свойства можно добавлять и после создания объекта:

        
          
          const cat = {}cat.name = 'Simon'cat.gender = 'male'cat.color = 'brown'cat.age = 2cat.adorable = trueconsole.log(cat)// {//   name: 'Simon',//   gender: 'male',//   color: 'brown',//   age: 2,//   adorable: true// }
          const cat = {}
cat.name = 'Simon'
cat.gender = 'male'
cat.color = 'brown'
cat.age = 2
cat.adorable = true

console.log(cat)
// {
//   name: 'Simon',
//   gender: 'male',
//   color: 'brown',
//   age: 2,
//   adorable: true
// }

        
        
          
        
      

Создать объект также можно с помощью конструктора Object. Это объектно-ориентированный стиль программирования:

        
          
          const book = new Object({ title: 'Война и мир', author: 'Лев Толстой' })
          const book = new Object({ title: 'Война и мир', author: 'Лев Толстой' })

        
        
          
        
      

Объекты, созданные через фигурные скобки и через new Object() совершенно идентичны.

Чтение свойств

Секция статьи "Чтение свойств"

Существует два вида синтаксиса для обращения к значению свойства объекта, в обоих случаях используется имя свойства.

Самый распространённый способ — с помощью точки:

        
          
          console.log(`На полке стоит «${book.title}»`)// На полке стоит «Война и мир»const pagesPerDay = book.pages / 365console.log(`Чтобы прочитать её за год, читайте ${pagesPerDay.toFixed(1)} страницы в день`)// Чтобы прочитать её за год, читайте 3.5 страницы в день
          console.log(`На полке стоит «${book.title}»`)
// На полке стоит «Война и мир»

const pagesPerDay = book.pages / 365
console.log(`Чтобы прочитать её за год, читайте ${pagesPerDay.toFixed(1)} страницы в день`)
// Чтобы прочитать её за год, читайте 3.5 страницы в день

        
        
          
        
      

Альтернативно для чтения можно использовать квадратные скобки:

        
          
          console.log(`На полке стоит «${book['title']}»`)const pagesPerDay = book['pages'] / 365console.log(`Чтобы прочитать её за год, читайте ${pagesPerDay.toFixed(1)} страницы в день`)
          console.log(`На полке стоит «${book['title']}»`)

const pagesPerDay = book['pages'] / 365
console.log(`Чтобы прочитать её за год, читайте ${pagesPerDay.toFixed(1)} страницы в день`)

        
        
          
        
      

Если прочитать свойство, которого нет у объекта, то вернётся undefined:

        
          
          const signature = book.signatureconsole.log(signature)// undefined
          const signature = book.signature

console.log(signature)
// undefined

        
        
          
        
      

Добавление и изменение свойств

Секция статьи "Добавление и изменение свойств"

Созданный объект можно изменять — добавлять, изменять и удалять свойства.

Для добавления и изменения свойств используется одинаковый синтаксис. Нужно обратиться к свойству и присвоить в него значение с помощью стандартного оператора присваивания =. Если свойство не существует, оно будет создано:

        
          
          const book = {  title: 'Капитанская дочка'}// добавляем новое свойствоbook.author = 'А.С.Пушкин'// изменяем существующееbook.title = 'Сказка о царе Салтане'console.log(book)// { title: 'Сказка о царе Салтане', author: 'А.С.Пушкин'}
          const book = {
  title: 'Капитанская дочка'
}

// добавляем новое свойство
book.author = 'А.С.Пушкин'

// изменяем существующее
book.title = 'Сказка о царе Салтане'

console.log(book)
// { title: 'Сказка о царе Салтане', author: 'А.С.Пушкин'}

        
        
          
        
      

Синтаксис с квадратными скобками работает и здесь:

        
          
          const book = {  title: 'Капитанская дочка'}// добавляем новое свойствоbook['author'] = 'А.С.Пушкин'// изменяем существующееbook['title'] = 'Сказка о царе Салтане'console.log(book)// { title: 'Сказка о царе Салтане', author: 'А.С.Пушкин'}
          const book = {
  title: 'Капитанская дочка'
}

// добавляем новое свойство
book['author'] = 'А.С.Пушкин'

// изменяем существующее
book['title'] = 'Сказка о царе Салтане'

console.log(book)
// { title: 'Сказка о царе Салтане', author: 'А.С.Пушкин'}

        
        
          
        
      

Удаление свойств

Секция статьи "Удаление свойств"

Для удаления свойств используют оператор delete:

        
          
          const book = {  title: 'Война и мир',  author: 'Лев Толстой',  pages: 1274,  isFinished: true,  usersReading: [1946, 1293, 7743]}delete book.usersReadingdelete book['isFinished']console.log(book)// { title: 'Война и мир', author: 'Лев Толстой', pages: 1274 }
          const book = {
  title: 'Война и мир',
  author: 'Лев Толстой',
  pages: 1274,
  isFinished: true,
  usersReading: [1946, 1293, 7743]
}

delete book.usersReading
delete book['isFinished']

console.log(book)
// { title: 'Война и мир', author: 'Лев Толстой', pages: 1274 }

        
        
          
        
      

Чаще всего свойства не удаляют, а сбрасывают значение, устанавливая undefined или подходящее по смыслу:

        
          
          const book = {  title: 'Война и мир',  author: 'Лев Толстой',  pages: 1274,  isFinished: true,  usersReading: [1946, 1293, 7743]}book.usersReading = undefinedbook['isFinished'] = undefined// {//    title: 'Война и мир',//    author: 'Лев Толстой',//    pages: 1274//    isFinished: undefined,//    usersReading: undefined// }
          const book = {
  title: 'Война и мир',
  author: 'Лев Толстой',
  pages: 1274,
  isFinished: true,
  usersReading: [1946, 1293, 7743]
}

book.usersReading = undefined
book['isFinished'] = undefined
// {
//    title: 'Война и мир',
//    author: 'Лев Толстой',
//    pages: 1274
//    isFinished: undefined,
//    usersReading: undefined
// }

        
        
          
        
      

Имена свойств

Секция статьи "Имена свойств"

Имена свойств (иногда их называют ключи, или поля) могут быть либо строками, либо символами. Если использовать в качестве ключа другой тип данных, то он будет приведён к строке с помощью вызова метода toString():

        
          
          const obj = {}const key = {}obj[key] = 'value for the object key'console.log(obj)// { '[object Object]': 'value for the object key' }
          const obj = {}
const key = {}
obj[key] = 'value for the object key'

console.log(obj)
// { '[object Object]': 'value for the object key' }

        
        
          
        
      

Если ключ содержит пробел, то обращаться к нему возможно только через синтаксис квадратных скобок:

        
          
          const obj = {  'the answer': 42}console.log(obj['the answer'])// 42
          const obj = {
  'the answer': 42
}

console.log(obj['the answer'])
// 42

        
        
          
        
      

Сравнение объектов

Секция статьи "Сравнение объектов"

Объекты — ссылочный тип данных. Сравнению по ссылке посвящена отдельная статья.

При сравнении двух объектов JavaScript сравнивает не значения свойств этих объектов, а адреса в памяти, по которым эти объекты хранятся. Поэтому любое сравнение двух объектов будет возвращать false, даже если они выглядят одинаково:

        
          
          // создаётся один объектconst book = { title: 'Дюна' }// создаётся другой объектconst anotherBook = { title: 'Дюна' }console.log(book === anotherBook)// false
          // создаётся один объект
const book = { title: 'Дюна' }
// создаётся другой объект
const anotherBook = { title: 'Дюна' }

console.log(book === anotherBook)
// false

        
        
          
        
      

Сравнение будет возвращать true, только если мы сравниваем переменные, указывающие на один и тот же объект:

        
          
          // создаётся один объектconst book = { title: 'Дюна' }// в anotherBook записывается ссылка на объектconst anotherBook = bookconsole.log(book === anotherBook)// true
          // создаётся один объект
const book = { title: 'Дюна' }
// в anotherBook записывается ссылка на объект
const anotherBook = book

console.log(book === anotherBook)
// true

        
        
          
        
      

На практике

Секция статьи "На практике"

Дока Дог советует

Секция статьи "Дока Дог советует"

🛠 Современные версии JavaScript содержат много упрощений синтаксиса.

Например, методы объявлять по-старому:

        
          
          const cat = {  name: 'Том',  meow: function () {    console.log('мяу мяу')  },}
          const cat = {
  name: 'Том',
  meow: function () {
    console.log('мяу мяу')
  },
}

        
        
          
        
      

А можно использовать короткий синтаксис:

        
          
          const cat = {  name: 'Том',  meow() {    console.log('мяу мяу')  },}
          const cat = {
  name: 'Том',
  meow() {
    console.log('мяу мяу')
  },
}

        
        
          
        
      

Если у вас есть переменная со значением, и вы хотите создать свойство с тем же именем, то вместо старого подхода:

        
          
          const firstName = 'Иван'const username = 'Killer3000'const user = {  firstName: firstName,  username: username}console.log(user)// { firstName: 'Иван', username: 'Killer3000' }
          const firstName = 'Иван'
const username = 'Killer3000'

const user = {
  firstName: firstName,
  username: username
}

console.log(user)
// { firstName: 'Иван', username: 'Killer3000' }

        
        
          
        
      

Можно сократить запись:

        
          
          const firstName = 'Иван'const username = 'Killer3000'const user = {  firstName,  username}console.log(user)// { firstName: 'Иван', username: 'Killer3000' }
          const firstName = 'Иван'
const username = 'Killer3000'

const user = {
  firstName,
  username
}

console.log(user)
// { firstName: 'Иван', username: 'Killer3000' }

        
        
          
        
      

🛠 Если название свойства хранится в переменной, его значение можно прочитать через синтаксис квадратных скобок:

        
          
          const user = {  firstName: 'Марина',  username: 'zloyDuh'}const prop = 'firstName'console.log(user[prop])// Марина
          const user = {
  firstName: 'Марина',
  username: 'zloyDuh'
}

const prop = 'firstName'
console.log(user[prop])
// Марина

        
        
          
        
      

🛠 Для проверки, есть ли свойство у объекта, используйте оператор in:

        
          
          const user = {  firstName: 'Марина',  username: 'zloyDuh'}console.log('firstName' in user)// trueconsole.log('age' in user)// false
          const user = {
  firstName: 'Марина',
  username: 'zloyDuh'
}

console.log('firstName' in user)
// true
console.log('age' in user)
// false

        
        
          
        
      

🛠 Чтобы обойти все ключи объекта, используют цикл for...in

🛠 Для копирования объектов используется спред-синтаксис:

        
          
          const user = {  firstName: 'Марина',  username: 'zloyDuh'}const copy = { ...user }console.log(copy)// { firstName: 'Марина', username: 'zloyDuh'}
          const user = {
  firstName: 'Марина',
  username: 'zloyDuh'
}

const copy = { ...user }
console.log(copy)
// { firstName: 'Марина', username: 'zloyDuh'}

        
        
          
        
      

При этом происходит поверхностное копирование — полностью копируются только свойства первого уровня вложенности. Подробнее об этом читайте статью «Поверхностное и глубокое копирование».