Need some JavaScript explanation for this code

Question

Hi there,

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.

Answer 2

If you call createBox(0,0,0), then margin is 0 (which has the truth value of false), so the expression margin || 2 becomes 0 || 2 which is equal to 2.

Answer 3

0 evaluates to false List of Truthy Values

Answer 4

// This function creates a new box by receiving three parameters
var createBox = function(width, height, margin){
    // Output the margin of the box, zero in current case
    alert("Margin is set to " + margin);
    // If the margin is zero or undefined, '' set default value to 2
    var margin = margin || 2;
    // Output the new value of the margin which is 2
    alert("Margin is now " + margin);
}
// here will show Margin: 0 after that Margin: 2
createBox(0,0,0);

// here will show Margin: 1 after that Margin: 1
createBox(0,0,1);

// here will show Margin: 3 after that Margin: 3
createBox(1,2,3);