Объекты: свойства и значения

Обычно одно значение живёт в одной переменной, и этого достаточно. Но часть данных в программе описывает одну и ту же сущность: имя, возраст и город – это не три независимых факта, а три части одного пользователя. Пока они лежат в отдельных переменных, их связь существует только у нас в голове: для программы это просто три значения, которые ничто не соединяет.

three-variables.jsjs

1const userName = 'Ира';2const userAge = 20;3const userCity = 'Москва';

Для одного пользователя это терпимо. Но стоит появиться второму, и переменные начинают размножаться, а связь между ними по-прежнему держится только на именах:

two-users.jsjs

1const userName = 'Ира';2const userAge = 20;3const userCity = 'Москва';45const secondUserName = 'Макс';6const secondUserAge = 31;7const secondUserCity = 'Казань';

Нам не хватает способа сказать программе: вот один пользователь, а вот его данные. Для этого в JavaScript есть объекты.

Один объект – несколько связанных значений

user.jsjs

1const user = {2  name: 'Ира',3  age: 20,4  city: 'Москва',5};

Теперь user – одна переменная и одно значение. Внутри этого значения – три именованные части, и у каждой есть имя и то, что под этим именем хранится:

Объект связывает несколько значений в одну структуру.

Каждая такая часть называется свойством. Свойство – это запись вида имя: значение внутри объекта: слева стоит ключ – имя, по которому к свойству обращаются, справа – значение, которое под этим именем хранится. У user три свойства: name со значением 'Ира', age со значением 20 и city со значением 'Москва'.

Имя свойства хранится как строковый ключ, а его значением может быть любое значение JavaScript: строка, число, булево значение и не только.

key-as-string.jsjs

1const user = {2  'name': 'Ира',3  age: 20,4};56console.log(user.name);

Консоль

Ира

Имя можно записать и в кавычках: 'name' и name в литерале – одно и то же свойство. Для простых имён кавычки обычно опускают.

Как записывается объект

Фигурные скобки { ... } в такой записи создают новый объект. Внутри перечисляются его свойства:

literal.jsjs

1const user = {2  name: 'Ира',3  age: 20,4};

Здесь объект сохраняется в переменной user. Такую запись называют литералом объекта. Литерал – это запись, с помощью которой значение задают прямо в коде: 20, 'Ира', { name: 'Ира' }.

В паре name: 'Ира' слева от двоеточия – имя свойства, справа – его значение. Соседние свойства разделяет запятая.

Висячая запятая

Запятая после последнего свойства не обязательна – её называют висячей. JavaScript её допускает, и ставить её удобно: чтобы добавить свойство, достаточно дописать одну строку, а предыдущую трогать не нужно.

trailing-comma.jsjs

1// без висячей запятой: добавляя city, правим и строку с age2const a = {3  name: 'Ира',4  age: 205};67// с висячей запятой: добавляется только новая строка8const b = {9  name: 'Ира',10  age: 20,11};

Фигурные скобки здесь – не блок кода

Фигурные скобки вам уже знакомы по функциям и if, но здесь их роль другая. После = запись { ... } создаёт значение-объект, а в функции или условии { ... } ограничивает блок инструкций:

braces.jsjs

1// значение-объект2const user = { name: 'Ира' };34const isReady = true;56if (isReady) {7  console.log('Готово');8}  // блок инструкций

Свойства могут хранить разные значения

product.jsjs

1const product = {2  title: 'Клавиатура',3  price: 4500,4  inStock: true,5};

Свойствам одного объекта необязательно иметь одинаковый тип. Здесь рядом лежат строка, число и булево значение. Объект не превращает их в какой-то новый общий тип – он просто собирает связанные значения вместе.

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

Как получить значение свойства

read.jsjs

1const user = {2  name: 'Ира',3  age: 20,4  city: 'Москва',5};67console.log(user.name);8console.log(user.age);

Консоль

Ира

Чтобы обратиться к конкретной части объекта, после имени объекта ставят точку и пишут имя свойства: user.name. Эту запись удобно читать буквально: «у user взять name».

Доступ к свойству – обычное выражение, поэтому его сразу можно использовать в вычислениях и проверках:

greeting.jsjs

1const user = {2  name: 'Ира',3  age: 20,4};56const greeting = `Привет, ${user.name}!`;7const isAdult = user.age >= 18;89console.log(greeting);10console.log(isAdult);

Консоль

Привет, Ира!

true

Если user.age содержит 20, JavaScript подставляет эти 20 в сравнение точно так же, как значение обычной переменной.

А если свойства нет?

missing.jsjs

1const user = {2  name: 'Ира',3  age: 20,4};56console.log(user.city);

Консоль

undefined

Ошибки не будет. Если обратиться к свойству, которого у объекта сейчас нет, выражение даст undefined. У user есть name и age, но city мы не создавали – поэтому user.city даёт undefined.

Тот же результат даёт свойство, в котором явно записан undefined: по одному чтению эти два случая не различить.

Объект можно менять

Объект не обязан оставаться таким, каким был в момент создания. Его свойства можно менять, добавлять и удалять:

change.jsjs

1const user = {2  name: 'Ира',3  age: 20,4};56user.age = 21;7user.city = 'Москва';8delete user.age;910console.log(user);

Консоль

{ name: 'Ира', city: 'Москва' }

Как меняется объект

const user = {

name: 'Ира',

age: 20,

};

Литерал создаёт объект user с двумя свойствами: name и age.

user.age = 21;

user.city = 'Москва';

delete user.age;

console.log(user);

Литерал создаёт объект user с двумя свойствами: name и age.

Свойство age уже существует, поэтому присваивание заменит его значение.

Значение age в объекте стало 21.

Свойства city ещё нет, поэтому присваивание добавит новое свойство.

В объекте появилось новое свойство city – ещё одна строка.

delete удаляет свойство age целиком, вместе с его значением.

Свойства age больше нет – строка исчезла из объекта.

В объекте остались только name и city.

Объект можно менять после создания: присваивание изменяет или добавляет свойства, а delete удаляет их.

Консоль

Нет вывода в консоль.

Четыре операции – одна простая модель

operations.jsjs

1const user = {2  name: 'Ира',3  age: 20,4};56user.name;  // прочитать78user.name = 'Макс';  // изменить910user.city = 'Москва';  // добавить1112delete user.age;  // удалить

Для изменения и добавления используется одна и та же запись с =. JavaScript просто смотрит, существует ли такое свойство уже.

Почему const не мешает менять объект

const запрещает повторно присваивать переменной новое значение, но не запрещает менять свойства объекта, который в ней хранится:

const-reassign.jsjs

1const user = {2  name: 'Ира',3};45// ошибка: переменной присваивают другой объект6user = {7  name: 'Макс',8};

Консоль

TypeError: Assignment to constant variable.

Но запись user.name = 'Макс' не заменяет значение переменной user другим объектом. Она меняет свойство уже существующего объекта:

const-property.jsjs

1const user = {2  name: 'Ира',3};45user.name = 'Макс';  // можно6console.log(user.name);

Консоль

Макс

Короткая запись свойств

long-form.jsjs

1const name = 'Ира';2const age = 20;34const user = {5  name: name,6  age: age,7};

Значение будущего свойства часто уже лежит в переменной, и её имя совпадает с именем свойства. Запись name: name в таком случае выглядит повторяющейся, поэтому JavaScript разрешает сократить её:

короткая запись

const user = {  name,  age,};

как её понимает JavaScript

const user = {  name: name,  age: age,};

JavaScript понимает короткую запись как name: name и age: age.

mixed.jsjs

1const name = 'Ира';2const age = 20;3const city = 'Москва';45const user = {6  name,7  age,8  city,9  isAdmin: false,10};

Короткие и обычные свойства можно свободно смешивать. Работает это только при совпадении имён: если переменная называется userName, а свойство должно быть name, придётся написать name: userName.

// теперь вы знаете

Объект объединяет связанные данные в одно значение; внутри находятся свойства вида ключ: значение
Объектный литерал { ... } создаёт объект, а свойства внутри разделяются запятыми
Свойства могут хранить значения разных типов
user.name читает значение свойства; отсутствующее свойство возвращает undefined
Через присваивание свойство можно изменить или добавить, а delete удаляет его
const запрещает присвоить переменной другой объект, но не запрещает менять свойства текущего
Если имя переменной совпадает с именем свойства, { name, age } сокращает { name: name, age: age }

Проверьте себя

Что появится в консоли?

const book = { title: 'Дюна', pages: 412 };
book.year = 1965;
delete book.pages;
console.log(book.pages);

undefined

412

1965

ошибка: свойства нет

Верно ли, что запись const user = { name: 'Ира' }; создаёт блок кода, как в if или функции?

Какая строка вызовет ошибку?

1const user = { name: 'Ира' };
2
3user.name = 'Макс';
4user.age = 20;
5user = { name: 'Ян' };

строка 5: переменной в const присваивают другой объект

строка 3: у const нельзя менять свойства

строка 4: добавлять свойства можно только в литерале

ошибок нет

Что по очереди появится в консоли?

const game = {
  score: 10,
  lives: 3,
};
game.score = 25;
game.level = 2;
delete game.lives;
console.log(game.score);
console.log(game.level);
console.log(game.lives);

25, 2, undefined

10, 2, 3

25, undefined, 3

25, 2, ошибка

Верно ли, что при const age = 20 записи { age } и { age: age } создают свойство age с одинаковым значением?

Какие две записи создают объект со свойствами name и age?

Выбери все верные варианты

const user = { name: 'Ира', age: 20 };

const user = { name = 'Ира', age = 20 };

const user = { 'name': 'Ира', 'age': 20 };

const user = { name: 'Ира'; age: 20 };

Верно ли, что после строки user.Age = 21; код напечатает 21?

const user = {
  name: 'Ира',
  age: 20,
};
user.Age = 21;
console.log(user.age);

Какое число напечатает этот код?

const order = {
  price: 400,
  count: 2,
};
order.count = order.count + 1;
order.discount = 200;
const total = order.price * order.count;
console.log(total - order.discount);

Карточка товара

Создайте объект product с тремя свойствами: title – строка «Клавиатура», price – число 4500, inStock – значение true. Проверочные строки печатают свойства.

// объект product: title, price, inStock


// ── проверочный код: не меняйте ──
console.log(product.title);
console.log(product.price);
console.log(product.inStock);

Решение

1const product = {2  title: 'Клавиатура',3  price: 4500,4  inStock: true,5};67// ── проверочный код: не меняйте ──8console.log(product.title);9console.log(product.price);10console.log(product.inStock);

Три свойства разных типов – строка, число и булево значение – лежат в одном объекте, и каждое читается через точку по своему имени.

Правки профиля

Объект profile уже создан. Измените name на 'Макс', добавьте свойство city со значением 'Москва', затем удалите age. Проверочные строки внизу печатают результат.

const profile = {
  name: 'Ира',
  age: 20,
};

// измените name, добавьте city, удалите age


// ── проверочный код: не меняйте ──
console.log(profile.name);
console.log(profile.age);
console.log(profile.city);

Решение

1const profile = {2  name: 'Ира',3  age: 20,4};56profile.name = 'Макс';7profile.city = 'Москва';8delete profile.age;910// ── проверочный код: не меняйте ──11console.log(profile.name);12console.log(profile.age);13console.log(profile.city);

Три независимых действия над одним объектом: присваивание изменило name, второе присваивание добавило city, delete удалил age – проверочные строки видят результат каждого.

Дочитать книгу

Объект book описывает книгу, read – сколько страниц уже прочитано. Ира читает по 60 страниц в день (perDay), а в последний день – только остаток. Посчитайте циклом, за сколько дней книга будет дочитана: доведите book.read ровно до book.pages, число дней запишите в новое свойство book.days и напечатайте строку вида «Три товарища: 390 из 390 за <число> дней».

const book = {
  title: 'Три товарища',
  pages: 390,
  read: 0,
};
const perDay = 60;

// дочитайте книгу и напечатайте итог


// ── проверочный код: не меняйте ──
console.log(book.read);
console.log(book.days);

Решение

1const book = {2  title: 'Три товарища',3  pages: 390,4  read: 0,5};6const perDay = 60;78book.days = 0;9while (book.read < book.pages) {10  if (book.pages - book.read < perDay) {11    book.read = book.pages;12  } else {13    book.read += perDay;14  }15  book.days += 1;16}17console.log(`${book.title}: ${book.read} из ${book.pages} за ${book.days} дней`);1819// ── проверочный код: не меняйте ──20console.log(book.read);21console.log(book.days);

Цикл идёт, пока book.read меньше book.pages: в обычный день к book.read прибавляется perDay, а когда остаток меньше perDay, в свойство записывается ровно book.pages – иначе вышло бы 420 из 390. Число дней копится в новом свойстве book.days, которое появилось у объекта обычным присваиванием до цикла, и все четыре значения подставляются в шаблонную строку как обычные переменные.

Почините короткую запись

Из переменных userName, userAge и city собран объект user, но проверочный код печатает undefined вместо имени и возраста. Почините объект так, чтобы у него были свойства name, age и city.

const userName = 'Ира';
const userAge = 20;
const city = 'Москва';

const user = {
  userName,
  userAge,
  city,
};

// ── проверочный код: не меняйте ──
console.log(user.name);
console.log(user.age);
console.log(user.city);

Решение

1const userName = 'Ира';2const userAge = 20;3const city = 'Москва';45const user = {6  name: userName,7  age: userAge,8  city,9};1011// ── проверочный код: не меняйте ──12console.log(user.name);13console.log(user.age);14console.log(user.city);

Короткая запись { userName } создаёт свойство с именем переменной, поэтому user.name давал undefined. Пары name: userName и age: userAge задают имена свойств явно, а city совпадает с именем переменной и остаётся короткой записью.

Предыдущий урокСтрелочные функции Следующий урок Свойства: точка и квадратные скобки