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

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

Когда вы выводите массив в консоль с помощью `console.log()`, консоль отображает текущее состояние массива на момент вызова функции `console.log()`. Даже если вы добавите элементы в массив после первого вывода в консоль, они могут появиться в консоли как свежедобавленные элементы, потому что консоль отслеживает изменения в реальном времени.

Для точного отображения содержимого массива в момент времени, когда вы хотите это сделать, лучше использовать `JSON.stringify()` для сериализации массива в строку, а затем выводить эту строку в консоль. Например:

```javascript
let myArray = ['name1', 'name2'];

console.log(JSON.stringify(myArray)); // Выводит: ["name1","name2"]

myArray.push('name3');
myArray.push('name4');

console.log(JSON.stringify(myArray)); // Выводит: ["name1","name2","name3","name4"]
```

Этот способ позволяет сохранить точное состояние массива на определенный момент времени.

Браузерная консоль показывает содержимое объектов в том виде, в котором они находятся в данный момент, а не в момент логирования - такая вот у неё особенность в целях экономии памяти. Обратите внимание, что на вашем скриншоте изначально написано, что в массиве два элемента, как это было на момент логирования, а вот при разворачивании показывается уже текущее состояние. <br/> Чтобы этого избежать, приходится делать так: <br/> <code class="javascript">console.log({...names});</code> <br/> <br/> Но, если в объекте находятся другие объекты (как у вас) и они изменяются тоже, то простое копирование не поможет. <br/> Поэтому используют вот такую конструкцию: <br/> <code class="javascript">console.log(JSON.parse(JSON.stringify(data)));</code> <br/> Есть и другие способы сделать глубокую копию объекта, но я для этих целей предпочитаю такой. <br/>