JavaScript object definition conditionals - which is better?

Question

I've come across two different ways to define/name objects and functions in JavaScript that first check for the existence of the name before using it. The issue is, I don't know which one is better (from speed and usability standpoints) and it's impossible to use the boolean operators in a Google search to figure it out.

The first one I see most often:

var myNewObject = myNewObject ? myNewObject : function () {
    // Code goes here.
};

The second one seems more concise, but I've only seen it one or two places, so I don't know if there's a standard or even a name for it:

var myNewObject = myNewObject || function() {
    // Code goes here.
};

Functionally, they both do the same thing and they both seem to work in every browser I can test in. My question is this - which is better and why? Also, while the first definition is essentially a single-line conditional ... what is the second one called?

the second one is more common imho. At least for people who know the language... — gblazex, Jul 09 '10 at 17:51
Cool, does anyone know if this works also with prototype: i.e. Array.prototype.forEach = Array.prototype.forEach || function(... I'm asking because on Mozilla website they use a normal if(!Array.prototype.forEach) Array.prototype.forEach = function(... — Marco Demaio, Jul 09 '10 at 18:16
@Marco Demaio Following the same logic is *should* work. I'd suggest slapping it in a test script and seeing if it does. You're still defining an object method ... it just happens to be in a specific namespace already. — EAMann, Jul 10 '10 at 21:14

John Hartsock · Answer 1 · 2010-07-09T17:59:18.940

5

I would use the second example, which is described as (Minimum Eval). Its simpler and seems more readable.

It's just like getting an event from onClick method across multiple browsers.

element.onclick = function (evt) {
  evt = evt || window.event
}

edited Jul 09 '10 at 17:59

answered Jul 09 '10 at 17:41

John Hartsock

85,422
23
131
146

score 5 · Accepted Answer · answered Jul 09 '10 at 17:42

5

I would choose the latter if only for the fact that you type myNewObject twice instead of thrice.

Also, while the first definition is essentially a single-line conditional ... what is the second one called?

Short-circuit evaluation

answered Jul 09 '10 at 17:42

Matt

43,482
6
101
102

2

Accepting this as the answer since you also gave me the name of the second approach. It would have saved so much time had I know what it was called ... I didn't know it was a legitimate approach, just that it seemed to work. – EAMann Jul 09 '10 at 17:51

score 2 · Answer 3 · edited May 23 '17 at 12:06

2

The latter, it's similar to the null coalesce operator in c# ?? when used in that manner

see: Is there a "null coalescing" operator in JavaScript?

edited May 23 '17 at 12:06

Community

1
1

answered Jul 09 '10 at 17:44

CaffGeek

21,856
17
100
184

1

Note that is not completely equivalent, `??` in C# it will return the default value only when its left operand value is `null`, in JavaScript `||` will do it when its first operand is *falsy*, falsy values are: `null`, `undefined`, `0`, `NaN`, empty string, and `false`. – Christian C. Salvadó Jul 09 '10 at 17:55
@CMS, yeah, hence the link for clarification. I should have wrote that it's *similar* to the `??` operator – CaffGeek Jul 09 '10 at 19:05

score 1 · Answer 4 · answered Jul 09 '10 at 17:40

1

FWIW I see the second approach more often, and (for my part) I feel it's more clear, concise, and idiomatic.

answered Jul 09 '10 at 17:40

Drew Wills

8,408
4
29
40

score 0 · Answer 5 · edited Nov 25 '13 at 10:13

Both methods work. But I think the most optimized version is to simply use a normal if test like:

if(!myNewObject)
   myNewObject = ...

Doing in any one of the method you suggest in your answer, it might involve an unnecessary reassignment every time the function/object is already defined. I mean if myNewObject is already defined, the JavaScript runtime would have to perform an unnecessary reassignment myNewObject = myNewObject (unless the runtime doesn't optimize it out).

On Mozilla website they suggest to use a simple if, view this.

JavaScript object definition conditionals - which is better?

5 Answers5