Javascript statement with || {};

Question

Im studying javascript and today I found this code :

window.Picture2 = window.Picture2 || {};

I dont understand the || {} ; Can someone explain this for me? Tks so much :)

Christoph · Accepted Answer · 2020-05-06T10:01:04.257

8

This is a dangerous way to assign a default value to a global variable Picture2.

window.Picture2 = window.Picture2 || {};

This will initialize window.Picture2 as a new Object {} if it is not defined. However since this is a check for truthyness, Picture2 also will be assigned an empty object if it has any of these falsy values:

// these are all falsy
0, NaN, null, '', undefined, false

which might not be the desired behaviour for all these cases, especially for the 0, NaN, false or '' Value.

EDIT
The ?? "NULLISH COALESCING" operator is now part of the ECMAScript standard and has pretty decent browser support already.

So the syntax for your use case would be:

window.Picture2 ?? {};

This will evaluate to false if Picture2 equals undefined or null, but not for the rest of the falsy values.

If you want to assign a default value for a function parameter, you can now also write the following:

function myfunc(Picture2 = {}){
   /* function body */
}

Both, the default parameter syntax and the nullish coalescing operator are the only correct ways to assign default values without side effects.

edited May 06 '20 at 10:01

answered Apr 22 '13 at 09:42

Christoph

50,121
21
99
128

+1 And wouldn't it be better to check `if (!window.Picture2) { window.picture2 = {} }`? The comparison need to be done in both cases but the re-assign could be skipped. Event though this code is slightly longer, it should be faster and for some people more readable. – insertusernamehere Apr 22 '13 at 09:47
1

@insertusernamehere this assignment * might* be internally optimised away, but nonetheless you are right, althoug still having the pitfall of the falsy values your code is a step in the right direction. – Christoph Apr 22 '13 at 09:49
@insertusernamehere the save option is `if(typeof window.Picture2 != undefined){...}` - very verbose but one could put this into a `defined` function or something similar. – Christoph Apr 22 '13 at 10:20
This is exactly how I would write it, only in Yoda Notation. :) I wanted to point out that a ternary operator might not be the best choice everywhere in addition to what you already said in your answer. – insertusernamehere Apr 22 '13 at 10:29
@insertusernamehere Yoda notation doesn't help you for older browsers since `undefined` was not write protected before ES5. – Christoph Apr 22 '13 at 11:22
True that, but I write nearly all conditions this way to be consistent. – insertusernamehere Apr 22 '13 at 11:24

Arun P Johny · Answer 2 · 2013-04-22T09:52:52.053

6

It assigns a default empty object to window.Picture2 if window.Picture2 is undefined(falsy)

edited Apr 22 '13 at 09:52

answered Apr 22 '13 at 09:35

Arun P Johny

384,651
66
527
531

sadly not only when being `undefined`... – Christoph Apr 22 '13 at 09:45
@Christoph that is why In `()` I said `falsy` – Arun P Johny Apr 22 '13 at 09:46
That's true, but it's the most important point to note when using this technique (see my answer)! – Christoph Apr 22 '13 at 09:47
There is a proposal for ecmascript 6 to fill this gap with a default operator. – Christoph Apr 22 '13 at 09:55

Darren · Answer 3 · 2013-04-22T09:49:17.650

4

It will check that .Picture2 has been defined, if it has use that value, else assign Window.Picture2 to a new object literal.

As @Christoph states - Picture2 will be assigned a new object literal, if the object is falsy.

http://www.sitepoint.com/javascript-truthy-falsy/

edited Apr 22 '13 at 09:49

answered Apr 22 '13 at 09:35

Darren

68,902
24
138
144

1

to be precise: if it is falsy - this includes `0`, `""`, `NaN`, `null` and `false`. – Christoph Apr 22 '13 at 09:38

score 1 · Answer 4 · answered Apr 22 '13 at 09:35

1

It is read as :

If window.Picture2 is undefined or null assign empty object to window.Picture2

answered Apr 22 '13 at 09:35

loxxy

12,990
2
25
56

2

empty json? what's that? – Christoph Apr 22 '13 at 09:36
@GeraldSchneider sorry my bad. – loxxy Apr 22 '13 at 09:37

score 1 · Answer 5 · edited Apr 22 '13 at 09:37

1

If the window.Picture2 is undefined (false in a conditional evaluation) then the OR (||) is exectuted and the window.Picture2 becomes an empty object.

edited Apr 22 '13 at 09:37

Christoph

50,121
21
99
128

answered Apr 22 '13 at 09:36

smassey

5,875
24
37

Javascript statement with || {};

5 Answers5