Question

I know that it is bad practice to write code like this:

var createBox = function(width, height, margin){
    alert("Margin is set to " + margin);
    //margin is undefined in this context or why?
    var margin = margin || 2;
    alert("Margin is now " + margin);
}
createBox(0,0,0);

But can someone please explain, why margin is always set to 2?

Is it because it is undefined in the direct context of initializing a variable with the same name inside the function?

edit: sorry, I got the problem wrong …

Please give a small hint 🙂
Regards, Tom

Answer 1

The || operator in JavaScript returns the value of the first operand if the first operand is truthy. Otherwise it returns the value of the second operand. It doesn’t return 1/0, or true/false, as in some other languages.

Therefore when the margin argument holds a falsy value, such as 0 or undefined, it will return 2, since these are both falsy values in JavaScript.

The falsy values in JavaScript are: an empty string "", the null value, a value of 0, the NaN value, the boolean value false, and also undefined.

What you describe is a very common idiom in JavaScript. In fact the || operator is sometimes called the default operator¹. You can use it to assign default values to variables when they are undefined. The problem in this case is that since 0 is a valid argument, the default operator is not behaving as required. You may want to do the following instead:

margin = typeof margin === 'undefined' ? 2 : margin;

---

¹ Douglas Crockford: The Elements of JavaScript Style – Part 2 – Idioms.