Почему первый вывод в консоль выводит измененные значение в объекте, а не начальные?

Question

[olya_097]

https://jsfiddle.net/2y0d6qke/1/

Answer 1

[Somewhere Intech]

Если на jsFiddle нажать Run после загрузки то код выполняется корректно
Это говорит о том, что внутренний интерфейс браузера, отвечающий за вывод в консоль, срабатывает после того как объект изменяется.
Если обернуть скрипт в document.onload то он будет работать корректно. Ещё, как вариант, десериализовать объект в строку:console.log( JSON.stringify(object) )
примитивы в JS копируются в памяти, потому вывод будет правильный.
Подробнее про то, как хранятся в памяти типы в JS можно почитать тут (Спасибо Ярослав Иванов )

Comments

[Somewhere Intech]

Ярослав Иванов, причем здесь тупость? Сохранять он сохраняет ссылку в памяти на объект - это понятно.. Вопрос в другом - почему функция, которая в очереди вторая и не является WebEvent( async ), успевает менять объект? И ответ, очевидно, кроется в том что IO буффер притормаживает при загрузке страницы и выкидывает не верный ответ. Об этом я почти и написал в ответе. Решение - обернуть всё в document.onload или :

let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};
console.log( JSON.stringify(menu) );

function multiplyNumeric(obj) {
  for (let key in obj) {
    if (typeof obj[key] == 'number') {
	obj[key]*=2;
    }
  }

}

multiplyNumeric(menu);

console.log(menu);

[Ярослав Иванов]

Johnny Lowhunter, ты перед ответом статью хотя бы прочитал ну емае.

[Somewhere Intech]

Ярослав Иванов, прочитал - ничего нового не нашел

[Ярослав Иванов]

Johnny Lowhunter, jsfiddle тут не причём. Тут по ссылке. Я же написал.

[olya_097]

Ярослав Иванов, тупость? только вы это написали-значит только вы такой
Это очевидно
И меня поддержали

Я пытаюсь разобраться
Что плохого
Спасибо огромное, что ответили!

[Somewhere Intech]

Ярослав Иванов, Спасибо, исправил ответ( т.к. он выбран решением )

Answer 2

[RMate]

Потому что event loop)
Сначала вы ставите в очередь задание вывести в консоль
после этого происходит модификация объекта
после чего обработчик добирается до выполнения задания "вывести в консоль"

Comments

[Ярослав Иванов]

https://learn.javascript.ru/object-reference
Не неси чушь.

Answer 3

[akyl-kb]

Старайся писать чистые функции, что бы избежать таких неочевидных поведений

const menu = {
  width: 200,
  height: 300,
  title: "My menu"
};
console.log(menu);

function multiplyNumeric(obj) {
  const data = {}
  for (const [key, val] of Object.entries(obj)) {
    if (typeof val === 'number') {
	data[key]*=2;
    }
  }
  return {
    ...obj,
    ...data
}

const updated = multiplyNumeric(menu);

console.log(updated);