Почему в консоль выводятся элементы, которые ещё не добавлены?

Question

[Дмитрий]

let names = {
'group1': ['name1', 'name2']
}

console.log(names);

names.group1.push('name3')
names.group1.push('name4')

console.log(names);

Вопрос, почему первый вывод в консоль отображает элементы name3 и name4, которые добавляются только в дальнейшем. Хотя длина массива указана верно...

Answer 1

[Алексей Уколов]

Браузерная консоль показывает содержимое объектов в том виде, в котором они находятся в данный момент, а не в момент логирования - такая вот у неё особенность в целях экономии памяти. Обратите внимание, что на вашем скриншоте изначально написано, что в массиве два элемента, как это было на момент логирования, а вот при разворачивании показывается уже текущее состояние.
Чтобы этого избежать, приходится делать так:
console.log({...names});

Но, если в объекте находятся другие объекты (как у вас) и они изменяются тоже, то простое копирование не поможет.
Поэтому используют вот такую конструкцию:
console.log(JSON.parse(JSON.stringify(data)));
Есть и другие способы сделать глубокую копию объекта, но я для этих целей предпочитаю такой.

Comments

[Kentavr16]

забавно что в ноде вывод следующий

{ group1: [ 'name1', 'name2' ] }
{ group1: [ 'name1', 'name2', 'name3', 'name4' ] }

,
ну а в браузерном движке через средства разработчика такой как на картинке

[Дмитрий]

Спасибо большое!! ожидал ответа типа - "читай документацию", поэтому долго гуглил, но в итоге сдался и написал сюда ))

[Алексей Уколов]

Kentavr16, ну так Нода не интерактивная же в этом плане, у неё и нет возможности показать что там будет в неизвестном будущем.

[Kentavr16]

И при этом длинна массива указывается корректно,2. Но там 4 элемента. Интересно, столько писал на джС и впервые сталкиваюсь )

[Kentavr16]

Алексей Уколов,

Нода не интерактивная же в этом плане,

что-то в случае с браузером для меня это смахивает на баг среды выполнения )

[Алексей Уколов]

Kentavr16, браузер просто пытается экономить память.