CODEWITHSUNDEEP
javascript
shapeshifta
shapeshifta

Reputation: 298

Need some JavaScript explanation for this code

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

Upvotes: 1

Views: 154

Answers (4)

Daniel Vassallo
Daniel Vassallo

Reputation: 344521

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 operator1. 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;

1 Douglas Crockford: The Elements of JavaScript Style - Part 2 - Idioms.

Upvotes: 3

Alex Rashkov
Alex Rashkov

Reputation: 10015

// 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);

Upvotes: 1

epascarello
epascarello

Reputation: 207557

0 evaluates to false List of Truthy Values

Upvotes: 2

Kos
Kos

Reputation: 72319

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.

Upvotes: 3

Related Questions