Как работает именованный аргумент функции в JS?

Question

[Александр Ка]

Имеется следующий код :

options = {
    width: 10,
    height: 20,
    contents: 'some text'
};

function show(options) {
    var width = options.width || "";
    var height = options.height || "";
    var contents = options.contents || "Предупреждение";
    return width + height + contents;
}

console.log(show({
    contents: 'Другой текст'
}));

Интересно, почему в функции не присваиваются значения из объекта options ?

Answer 1

[Сергей Соколов]

options, которым даёте значение в начале, и options внутри функции – это две разные штуки. Разберитесь с «областью видимости» переменных в JavaScript. Внутри функции как бы объявляется собственная версия переменной options, значение которой передаётся в функцию при её вызове.

Для читаемости назовите аргумент функции иначе, например, opts – и всё встанет на свои места:

options = {
    width: 10,
    height: 20,
    contents: 'some text'
};

function show(opts) {
    var width = opts.width || "";
    var height = opts.height || "";
    var contents = opts.contents || "Предупреждение";
    return width + height + contents;
}

console.log(show( options)); // 30some text
options.contents = 'Другой текст';
console.log(show( options)); // 30Другой текст

p.s. почему "30", а не "1020"? Берётся число 10, к нему прибавляется число 20, результат – число. Потом к числу прибавляется строка, тут уже действует сложение строк (конкатенация). Чтобы с самого начала складывались строки начните с пустой строки: '' + width + height + contents

Comments

[alvvi]

Или можно обойтись без магии и привести width и height к строкам явно

[Ingernirated]

Подскажи, пожалуйста, почему во втором варианте есть возможность использования или в присвоении, а в первом, нет?
1) var sec = x || "no data";
2)

function show(el) {
	var x = el.x || "no data x";
	var z = el.z || x;
	console.log(x + " " + z);
}

[Сергей Соколов]

Ingernirated: без контекста непонятно, почему нельзя. Вроде, можно в обоих вариантах.

[Ingernirated]

Сергей Соколов: задаем значение sec = илиx, или текст
т.к. хне существует, пусть будет текст, но он ругается
как итог процесс умер

var sec = x || "no data";
console.log(sec);
function show(el) {
	var x = el.x || "no data x";
	var z = el.z || x;
	console.log(x + " " + z);
}

[Сергей Соколов]

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

[Ingernirated]

Сергей Соколов: нет, это весь скрипт. use strict отсутствует.
и почему, если задать false, он не присвоим переменной значение false, а отработает или?
хотя с true он присвоит true

var x = false;
var sec = x || "no data";
console.log(sec);

no data

[Сергей Соколов]

Ingernirated: почитайте, как работает ||

Answer 2

[Дмитрий]

вы передаете не options в console.log(), а совершенно другой объект.
вот так туда попадет options
console.log(show(options));

Answer 3

[Александр Аксентьев]

Почему оно должно-то?
https://maxello.gitbooks.io/js-note/content/04_fun...