what does this do in js "xin || {}"?

Question

Possible Duplicate:
What does var x = x || {} ;

I have this lines in js, it is simple i am sure but i am not sure what the last part does - (xin || {})

var xin = (function (name) {return name;}(xin || {}));

as I understand it, xin is a object constructor so now I can create object of xin. Just not too sure what the xin || {} does. Can someone enlighten me please, thanks

This question has been asked many times already. Looking for dups now... — Matt Ball, Nov 21 '11 at 16:06
possible duplicate of [What does var x = x || {} ;](http://stackoverflow.com/questions/3563153/) or [What does the or operator do in this bit of JavaScript?](http://stackoverflow.com/questions/4863516/) or [What does this Javascript line do?](http://stackoverflow.com/questions/5643740/) take your pick (no, it is not easy to search for something like `javascript || {}`) — Matt Ball, Nov 21 '11 at 16:08
@Matt Ball: Just wondering, how do you get Google/SO to search for characters as well? If I do a search for `javascript || {}` then Google seems to ignore the four symbols. — pimvdb, Nov 21 '11 at 16:20
@pimvdb you don't. I just searched for [`what does this do in JavaScript`](http://stackoverflow.com/search?&tab=relevance&q=what%20does%20this%20do%20in%20javascript) and skimmed through a few pages of questions. — Matt Ball, Nov 21 '11 at 16:27

gion_13 · Answer 1 · 2011-11-21T16:25:06.317

that attributes to the name argument the value of the variable xin if it is not false (or undefined or null) or a new object ({});

example :

var name = xin || {};

this is translated into :

if(xin)
    var name = xin;
else
    name = {};

In javascript you can use the conditional operators (|| and &&) to create expressions. Here's an example :

typeof f === 'function' && ((arguments.length ==  0 && f()) || f.apply({},arguments)) || g();

this expression can be translated into the following :

if(typeof f === 'function')
    {
        if(arguments.length == 0)
            f();
        else
            f.apply({},arguments);
    }
else
    g();

Anyway, this is just for demo purposes only, you shouldn't use large nested expressions built with conditional operators because it's highly unreadable (therefore very hard to maintain).

This kind of expression is often used on initializations , when you do not want to overwrite a certain value if it already exists. An good example would be the usage of a namespace within multiple js files. Using this technique (var namespace = namespace || {};) you can share the same namespace in all the files without overwriting it.

@Martin — Yes, it is. What did you think putting `(expression)` after the function would do? — Quentin, Nov 21 '11 at 16:11
@Martin — Because the choice between being a function declaration (which is subject to hoisting) and a function expression (which is evaluated at runtime) is determined by the context in which the `function` keyword appears, and you can't self-execute a function declaration. — Quentin, Nov 21 '11 at 16:31

Rich O'Kelly · Answer 2 · 2011-11-21T16:46:29.773

2

It evaluates to xin if xin is truthy, otherwise a new object is used.

edited Nov 21 '11 at 16:46

answered Nov 21 '11 at 16:06

Rich O'Kelly

41,274
9
83
114

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

xin || {}

is the same as:

xin ? xin : {};

or, in longer form:

if(xin) {
    return xin;
}
else {
    return {};
}

EDIT: See linked duplicate question. jAndy puts it nicely:

|| is the logical OR.

The expression

var x = x OR {};

should become more obvious then.

If x has a falsy value (like null, undefined, 0, ""), we assign x an empty object {}, otherwise just keep the current value. The long version of this would look like

var x = x ? x : {};

edited May 23 '17 at 12:03

Community

1
1

answered Nov 21 '11 at 16:07

Samuel Liew

76,741
107
159
260

i think you meant `(typeof(xin) != "undefined") ? xin : new Object();` – J. Holmes Nov 21 '11 at 16:09
@32bitkid — Which would still be wrong, since `||` doesn't care about type, just truth. – Quentin Nov 21 '11 at 16:10
@Quentin very true, i'm not saying its the right answer, but at least it would be somewhat valid valid syntax. – J. Holmes Nov 21 '11 at 16:12

score 1 · Answer 4 · answered Nov 21 '11 at 16:10

a || b

The OR operator || is short circuited. That means if a is true then the a || b is true and thus it does not evaluate b. It returns a which is true. If a is not true then it returns b, i.e. in this case if b is false then the expression is false and is true if b is true. So xin || {} returns xin if xin is true, otherwise it returns an empty object {}.

score 1 · Answer 5 · answered Nov 21 '11 at 16:12

1

This:

var xin = (function (name) {return name;}(xin || {}));

is identical to this:

var xin = xin || {};

Which can be re-expressed as:

var xin = xin ? xin : {};

Simplifying further, we get:

if(!xin) xin = {}

answered Nov 21 '11 at 16:12

Eric

95,302
53
242
374

score 1 · Answer 6 · answered Nov 21 '11 at 16:13

1

If there´s none xin object it craetes a new, so, it passes the new (or the existing) xin to the function.

This is a commom construction for artificial namespaces.

answered Nov 21 '11 at 16:13

Adilson de Almeida Jr

2,761
21
37

what does this do in js "xin || {}"?

6 Answers6