Почему порядок вывода ключа объекта именно такой?

Question

[t33271]

Изучаю JavaScript и в книге есть такой пример.

function f(o) {
	o.message = "Изменено в f";
	o = {
		message: "Новый объект!"
	};

console.log (`Внутри f: o.message="${o.message}" (после присваивания)`);
}

let o = {
	message: 'Начальное значение'
};

console.log(`Перед вызовом f: o.message="${o.message}"`);
f(o);
console.log(`После вызова f: o.message="${o.message}"`);

Результат выполнения следующий:
Перед вызовом f: o.message="Начальное значение"
Внутри f: o.message="Новый объект!" (после присваивания)
После вызова f: o.message="Изменено в f"

Вопрос
Почему в строку выводится "Новый объект!", вместо "Изменено в f", когда в теле функции первым идет
o.message = "Изменено в f";
Дело в приоритете оператов или здесь какое-то другое правило?

Сильно не ругайте, если вопрос глупый, я новичок, пытался гуглить, но выходили совершенно иные темы.

spoiler

В самом учебнике этому не уделено внимание.

Answer 1

[Антон Спирин]

Потому что в функции f вы присвоили локальной переменной(аргументу) o новый объект:

{
  message: "Новый объект!"
}

За пределами функции глобальная o ссылается на старый объект, в котором вы во время вызова f заменили ключ message на "Изменено в f"
Другими словами, во время первого и третьего вызова console.log выводится ключ старого объекта, во время второго нового.
Хороший пример, демонстрирующий базовые принципы языка.
Передача по ссылке
Область видимости

Answer 2

[vvovas]

Здесь, на мой взгляд, стоит понять следующее:

let o = {
	message: 'Начальное значение'
};

Это создание объекта в памяти и переменной, которая на этот объект ссылается.

f(o);
Здесь мы передаем в метод именно ссылку на объект.

function f(o) { ... }
Ссылка, которую мы передали продублировалась параметром. Т.е. снаружи метода, у нас есть переменная и внутри метода у нас есть параметр, которые ссылаются на один и тот же объект. Но, это две независимых ссылки, просто в примере они названы одинаково, что может сбить с толку. И при этом объект в памяти как был один, так и остался

o.message = "Изменено в f";
Тут мы, используя ссылку-параметр, меняем значение поля объекта.

o = {
		message: "Новый объект!"
	};

Здесь мы создали второй объъект и присвоили ссылку на него нашему параметру "о". Т.е. теперь у нас 2 объекта в памяти, ссылка-параметр ссылается на новый(второй) объект, ссылка-переменная снаружи, не менялась и ссылается на старый(первый) объект.

Теперь, когда вы в методе обращаетесь к объекту через параметр, вы будете работать со вторым объектом, никак не влияя на первый. А когда вы после метода обращаетесь к объекту через ссылку-переменную, вы работаете с первым объектом.

Comments

[AngReload]

Если назвать ссылки по разному, то может стать понятнее.

function f(link2) {
	link2.message = "Изменено в f";
	link2 = {
		message: "Новый объект!"
	};

	console.log (`Внутри f: link2.message="${link2.message}" (после присваивания)`);
}

let link1 = {
	message: 'Начальное значение'
};

console.log(`Перед вызовом f: link1.message="${link1 .message}"`);
f(link1);
console.log(`После вызова f: link1.message="${link1.message}"`);

Answer 3

[Андрей Панов]

Прочитай что делает console.log. И за одно как работает присваивание