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

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

numbers.jsjs

1let a = 5;2let b = a;34b = 6;56console.log(a);7console.log(b);

Консоль

Когда выполнилось let b = a, значение 5 скопировалось в b. После этого у каждой переменной своё значение: в a лежит 5, в b – 6. С объектами похожая запись приводит к неожиданному результату:

two-names.jsjs

1const user = {2  name: 'Ира',3};45const admin = user;67admin.name = 'Макс';89console.log(user.name);

Консоль

Макс

Мы меняли admin.name. Почему же изменился user.name?

Объект не копируется при присваивании

Когда выполняется литерал { name: 'Ира' }, JavaScript создаёт один объект. Для понимания удобно представлять, что переменная user хранит ссылку на него – возможность обратиться именно к этому объекту.

Теперь выполним const admin = user. Новый объект здесь не создаётся: в admin попадает ссылка на тот же самый объект. Поэтому строка admin.name = 'Макс' не изменяет какой-то отдельный объект admin – она идёт по ссылке к общему объекту и меняет его. После этого и user.name, и admin.name читают одно и то же свойство одного объекта.

Две переменные не означают два объекта.

Если одной переменной присвоили другую переменную с объектом, обе указывают на один объект.

Два имени – один объект

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

Литерал { ... } создаёт объект. user получает ссылку на него.

const admin = user;

admin.name = 'Макс';

console.log(user.name);

Литерал { ... } создаёт объект. user получает ссылку на него.

admin получает ту же ссылку. Новый объект не создаётся.

Через admin находим общий объект и меняем его свойство name.

Объект один, и name в нём стал 'Макс' – это видно и через user.

user ведёт к тому же объекту. Его name уже равен 'Макс'.

Две переменные – две ссылки – один объект.

Консоль

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

Имён может быть сколько угодно, а объект по-прежнему один:

three-names.jsjs

1const user = { name: 'Ира' };23const admin = user;4const owner = user;56owner.name = 'Лена';78console.log(user.name);9console.log(admin.name);

Консоль

Лена

Это не три копии пользователя, а три пути к одному объекту.

Изменить объект и сменить ссылку – разные действия

Возьмём let, чтобы переменную можно было переназначить. Сначала обе переменные ведут к одному объекту, и изменение свойства через admin меняет общий объект. Но совсем другое происходит, когда переменной admin присваивают новый литерал:

reassign.jsjs

1let user = {2  name: 'Ира',3};4let admin = user;56// меняется общий объект7admin.name = 'Макс';89// новый объект: admin теперь указывает на него10admin = {11  name: 'Лена',12};1314console.log(user.name);15console.log(admin.name);

Консоль

Макс

Лена

Литерал { name: 'Лена' } создаёт новый объект, а admin начинает указывать уже на него. Старый объект никуда не переместился – изменилась только связь между переменной admin и объектом:

Первая запись меняет объект, вторая – только связь admin с объектом.

Отсюда важное различие: admin.name = 'Макс' меняет объект, на который указывает admin, а admin = { name: 'Макс' } меняет значение самой переменной admin – теперь она указывает на другой объект.

Новый литерал – новый объект

two-literals.jsjs

1const a = { name: 'Ира' };2const b = { name: 'Ира' };

Каждое выполнение литерала { ... } создаёт отдельный объект. Хотя содержимое выглядит одинаково, объектов здесь два. Одинаковые свойства ещё не делают их одним объектом – и именно это важно при сравнении.

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

Для чисел и строк === отвечает на привычный вопрос: одинаковы ли значения.

primitives-equal.jsjs

1console.log(5 === 5);2console.log('Ира' === 'Ира');

Консоль

true

С объектами вопрос другой:

objects-equal.jsjs

1const a = { name: 'Ира' };2const b = { name: 'Ира' };34console.log(a === b);

Консоль

false

Почему false, хотя объекты выглядят одинаково? Потому что литерал { ... } выполнился дважды и создал два разных объекта. При сравнении объектов === проверяет: это один и тот же объект или два разных? Теперь другая ситуация:

same-object.jsjs

1const a = { name: 'Ира' };2const c = a;34console.log(a === c);

Консоль

true

Здесь обе переменные ведут к одному объекту, поэтому результат true:

Два литерала – два объекта; вторая ссылка – тот же объект.

`===` не сравнивает свойства объекта

Выражение { name: 'Ира' } === { name: 'Ира' } даёт false не потому, что JavaScript «не заметил» одинаковые свойства. Просто === вообще не занимается таким сравнением. Для объектов он отвечает на другой вопрос: слева и справа тот же самый объект? Если нужно узнать, одинаковы ли данные внутри двух разных объектов, свойства сравнивают отдельно:

compare-props.jsjs

1const a = { name: 'Ира' };2const b = { name: 'Ира' };34console.log(a.name === b.name);

Консоль

true

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

Примитив копируется, объект – нет

Теперь можно вернуться к примеру из начала урока. После let b = a у нас два независимых значения: 5 в a и ещё одно 5 в b. Если поменять b, a не изменится. После const admin = user второй объект не создаётся: обе переменные ведут к одному.

примитив: два независимых значения

let a = 5;let b = a;// два значения: 5 и 5

объект: один общий объект

const user = { name: 'Ира' };const admin = user;// один объект, две ссылки

При обычном присваивании примитивов вроде числа или строки копируется само значение. При присваивании объекта две переменные получают ссылки на один и тот же объект. Поэтому изменение объекта через одну переменную становится видно через другую.

Почему язык устроен именно так

Число, строка или булево значение – маленькие значения фиксированного размера, и меняться после создания они не могут. Скопировать такое значение при присваивании дёшево, а копия ничем не отличается от оригинала – поэтому язык просто копирует его.

Объект – другое дело. Он может быть большим: десятки свойств, вложенные объекты, а внутри них ещё объекты. И он меняется по ходу работы программы. Если бы каждое присваивание создавало полную копию, программа тратила бы память и время на копирование при каждом =, а разные части кода не видели бы изменений друг друга: одна часть поменяла бы свою копию, другая продолжала бы работать со своей.

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

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

При const admin = user новый объект не создаётся: обе переменные указывают на один объект
Изменение свойства через одну ссылку видно через остальные ссылки на тот же объект
admin.name = … изменяет объект, а admin = { … } перенаправляет переменную на другой объект
Каждый новый литерал { … } создаёт новый объект
Для объектов === проверяет, один ли это объект: одинаковые свойства сами по себе равенства не дают

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

Что выведет программа?

const player = {
  score: 10,
};
const copy = player;
copy.score = 20;
console.log(player.score);

20

10

undefined

ошибка

Лидер турнира

Два игрока начинают с нулевым счётом, а leader ведёт к тому, кто впереди. Начислите очки за четыре раунда (в раунде i Ира получает i очков, Макс – 3), после раундов направьте leader на игрока с большим счётом и запишите в report строку вида Лидер: Макс, 12 очков. Проверочный код печатает отчёт, leader === maks, а также имя и счёт Иры – у неё должны остаться своё имя и свои 10 очков, а не данные Макса.

const ira = { name: 'Ира', score: 0 };
const maks = { name: 'Макс', score: 0 };

// leader ведёт к тому, кто впереди; в начале – Ира
let leader = ira;
let report = '';

// раунды 1..4: Ира получает i очков, Макс – по 3 очка
// после раундов leader должен вести к игроку с большим счётом
// report – строка «Лидер: <имя>, <счёт> очков»


// ── проверочный код: не меняйте ──
console.log(report);
console.log(leader === maks);
console.log(ira.name);
console.log(ira.score);

Решение

1const ira = { name: 'Ира', score: 0 };2const maks = { name: 'Макс', score: 0 };34// leader ведёт к тому, кто впереди; в начале – Ира5let leader = ira;6let report = '';78for (let i = 1; i <= 4; i++) {9  ira.score += i;10  maks.score += 3;11}1213if (maks.score > ira.score) {14  leader = maks;15}1617report = `Лидер: ${leader.name}, ${leader.score} очков`;1819// ── проверочный код: не меняйте ──20console.log(report);21console.log(leader === maks);22console.log(ira.name);23console.log(ira.score);

Цикл накапливает очки в самих объектах, а leader = maks перенаправляет переменную на уже существующий объект Макса: объект Иры этим присваиванием не затронут – в нём остаются её имя и счёт 10, а leader === maks даёт true. Правка свойств через leader записала бы в объект Иры имя и счёт Макса, а новый литерал { name: 'Макс', score: 12 } был бы отдельным объектом, и сравнение дало бы false.

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

let cart = { items: 1 };
const saved = cart;
cart = { items: 1 };
console.log(cart === saved);
saved.items = 2;
console.log(cart.items);

false, затем 1

true, затем 2

false, затем 2

true, затем 1

Сменить ссылку, не трогая объект

Переменные current и previous ведут к одному объекту. Сделайте так, чтобы current указывал на новый объект { name: 'Макс' }, а previous остался прежним. Проверочные строки печатают оба имени и сравнивают переменные.

let current = { name: 'Ира' };
const previous = current;

// current – на новый объект { name: 'Макс' },
// previous – прежний


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

Решение

1let current = { name: 'Ира' };2const previous = current;34current = { name: 'Макс' };56// ── проверочный код: не меняйте ──7console.log(previous.name);8console.log(current.name);9console.log(previous === current);

Присваивание переменной нового литерала не трогает старый объект: previous по-прежнему ведёт к нему, а current указывает на другой – поэтому сравнение даёт false.

Сколько объектов создаётся при выполнении этого кода?

const start = { count: 0 };
let last = start;
for (let i = 1; i <= 3; i++) {
  last = { count: i };
}
const copy = last;

Почему

4 – Объект создаёт каждое выполнение литерала: { count: 0 } выполнился один раз, { count: i } – три раза, по разу на каждой итерации. let last = start и const copy = last новых объектов не создают – в переменную попадает ссылка на уже существующий объект. Итого четыре объекта.

Почините подсчёт очков

Программа запоминает счёт игрока до раунда и считает, сколько очков добавил раунд. Раунд прибавил к счёту 15, но в gained получается 0. Исправьте запоминание счёта так, чтобы gained считался верно. Ожидаемый вывод: 25, затем 15.

const player = { name: 'Ира', score: 10 };

// запоминаем счёт до раунда
const before = player;

player.score += 15;
const gained = player.score - before.score;

// ── проверочный код: не меняйте ──
console.log(player.score);
console.log(gained);

Решение

1const player = { name: 'Ира', score: 10 };23// запоминаем счёт до раунда4const before = player.score;56player.score += 15;7const gained = player.score - before;89// ── проверочный код: не меняйте ──10console.log(player.score);11console.log(gained);

В before лежала ссылка на тот же объект, поэтому после player.score += 15 значение before.score тоже стало 25, и разность давала 0. Число при присваивании копируется: const before = player.score сохраняет 10, изменение объекта это значение не трогает, и gained получает 25 - 10.

В объекте catalog тысяча свойств. Верно ли, что const copy = catalog; выполняется дольше, чем такое же присваивание объекта с одним свойством?

Почините смену темы

Переменные settings и editor ведут к одному объекту настроек. Редактор должен включить светлую тему для всей программы, но settings.theme остаётся 'dark', а у editor пропадает fontSize. Исправьте код так, чтобы тема сменилась в общем объекте. Ожидаемый вывод: light, 14, true.

const settings = { theme: 'dark', fontSize: 14 };
let editor = settings;

// редактор включает светлую тему для всей программы
editor = { theme: 'light' };

// ── проверочный код: не меняйте ──
console.log(settings.theme);
console.log(editor.fontSize);
console.log(editor === settings);

Решение

1const settings = { theme: 'dark', fontSize: 14 };2const editor = settings;34// редактор включает светлую тему для всей программы5editor.theme = 'light';67// ── проверочный код: не меняйте ──8console.log(settings.theme);9console.log(editor.fontSize);10console.log(editor === settings);

editor = { theme: 'light' } меняло только переменную: editor начинала указывать на новый объект без fontSize, а settings оставалась ссылкой на прежний объект с темой 'dark'. editor.theme = 'light' меняет сам общий объект: новую тему видно через обе переменные, и они по-прежнему указывают на один объект. Переназначать editor больше не нужно, поэтому в решении она объявлена через const.

Что выведут два сравнения?

const player = { score: 10 };
const copy = player;
const other = { score: 10 };
console.log(player === copy);
console.log(player === other);

true, затем false

true, затем true

false, затем false

false, затем true

Та же точка

Робот вышел из точки start и остановился в точке finish. Точки совпадают, когда у них равны и x, и y. Объявите переменные: atStart – совпадает ли finish с точкой start, atFlag – совпадает ли finish с точкой flag. Проверочный код печатает finish === start и обе переменные.

const start = { x: 2, y: 5 };
const finish = { x: 2, y: 5 };
const flag = { x: 2, y: 8 };

// atStart: finish в той же точке, что start
// atFlag: finish в той же точке, что flag


// ── проверочный код: не меняйте ──
console.log(finish === start);
console.log(atStart);
console.log(atFlag);

Решение

1const start = { x: 2, y: 5 };2const finish = { x: 2, y: 5 };3const flag = { x: 2, y: 8 };45const atStart = finish.x === start.x && finish.y === start.y;6const atFlag = finish.x === flag.x && finish.y === flag.y;78// ── проверочный код: не меняйте ──9console.log(finish === start);10console.log(atStart);11console.log(atFlag);

start и finish созданы двумя литералами – это два объекта, поэтому finish === start даёт false, хотя свойства совпадают. Совпадение точек проверяют по свойствам: x и y сравнивают по отдельности и соединяют через &&. У flag другой y, поэтому atFlag – false.

Предыдущий урокВложенные объекты и безопасный доступ Следующий урок Объекты и функции

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

Объект не копируется при присваивании

Изменить объект и сменить ссылку – разные действия

Новый литерал – новый объект

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

=== не сравнивает свойства объекта

Примитив копируется, объект – нет

Почему язык устроен именно так

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

Лидер турнира

Сменить ссылку, не трогая объект

Почините подсчёт очков

Почините смену темы

Та же точка

Лидер турнира

Сменить ссылку, не трогая объект

Почините подсчёт очков

Почините смену темы

Та же точка

`===` не сравнивает свойства объекта