Can anyone explain what this statement means?

e = e || x

Specifically,

e = e || window.event

This appears in a chunk of code I am looking at.

I'm not at a complete loss, however My understanding is that it assigns both e and window.event (or x/whatever) to e. It's only natural, right?

But what is the value in assigning e to e? Shouldn't e = window.event be enough? Perhaps is depends on how it is used?

Can anyone explain what this statement means?

e = e || x

Specifically,

e = e || window.event

This appears in a chunk of code I am looking at.

I'm not at a complete loss, however My understanding is that it assigns both e and window.event (or x/whatever) to e. It's only natural, right?

But what is the value in assigning e to e? Shouldn't e = window.event be enough? Perhaps is depends on how it is used?

• javascript
• events
• dom-events

• Isn't || a boolean operator? So e should be either true or false after this? – Cobra_Fast Commented Jul 15, 2013 at 15:42
• 1 it's "use e if it's already defined/available, otherwise use x". It's a nice bit of syntactical sugar in javascript, in pseudo-code, "if (exists e) then return e else return x". – Marc B Commented Jul 15, 2013 at 15:43
• 5 @Cobra_Fast || doesn't return true / false in javascript, it returns the first object that is "truthy". – Matthew Commented Jul 15, 2013 at 15:44
• IE doesn't pass the event argument to the handler – dandavis Commented Jul 15, 2013 at 15:45
• 2 possible duplicate of JavaScript OR (||) variable assignment explanation – Quentin Commented Jul 15, 2013 at 15:46

10 Answers 10

e = e || x assigns x to e if e evalutes to false.

This is the same as:

if (!e) {
  e = x;
}
// or
e = e ? e : x

Here is a table which shows which values evalute to false: https://stackoverflow.com/a/7615236/603003

The most important values are: null and undefined.

function handler(e) {
  e = e || window.event;
}

Where handler is an event listener attached to a DOM element. Since older versions of IE did not pass the event object as a parameter, one had to check if the parameter was undefined. If the latter was the case, one assigns the global window.event object (which IE supplied) to e.

It doesn't assign both to "e", just the one that's not either undefined, null, 0, NaN, "", or false. It prefers the original value of "e" to window.event because "e" is on the left side of ||, but if it's empty (one of those values I listed) then "e" will be assigned window.event.

It's done because Internet Explorer didn't pass the event reference as a parameter, instead simply binding to a global symbol. Event handlers were very often written:

function someHandler(e) {
  e = e || window.event;
  // ...
}

It would probably have been more rigorously "correct" to write:

function pedanticHandler(e) {
  if (e === undefined) // or arguments.length == 0 perhaps
    e = window.event;
  // ...
}

You're misunderstanding operators.

This line assigns the expression e || x to the variable e.

The value of e || x is the first truthy value.
If e is truthy, that will be e; if e is falsy, it will be x.

If e is undefined (or null, or any other false value), it is initialized with x.

It is implicitly :

var e = e ? e : x;

It doesn't assign both values to e. It's just a way of assigning x to e if the original value of e is null, undefined, 0, false, NaN, or an empty string (""). If the original value of e doesn't match any of the aforementioned conditions, it keeps the original value.

Basically, it's a shorthand form for:

if(!e) {
   e = x;
}

it is redundant to assign e = e, they do it as part of this statement because it is an idiom.

The statement checks if e is defined and if it is not then it initializes it with the expression that follows ||. This works because when || expression is evaluated the interpreter stops evaluation when the first true part (from the left) is found.

In particular, if e evaluates to true then evaluation stops right then and effectively you have e = e, which is redundant. But if e is undefined or evaluates to false then the right part of the || is evaluated and assigned to e.

I personally would use an if statement instead of being clever. Or restructure the code even more to avoid if altogether.

EDIT: I think the original code is buggy. Clearly the intention is check if e is already initialized. But here it can be reassigned to itself if it is already initialized and evaluates to true. This can have unwanted side effects.

The above answer (ComFreek) is correct. The reason it does this is because of lazy evaluation. The boolean x || y, evaluated lazily will check x first. If it evaluates to TRUE (i.e. is non-zero, non-null), then the expression stops and returns TRUE. If x evaluates to FALSE, it will return y.

This is clever code. Clever is stupid. (opinion) As a maintainer, I prefer to see

if (!e) {
    e = x;
}

It set e equal to either itself (if it is not null, undefined or false) otherwise window.event.

It is like saying

if (!e) e = window.event;

In your example e = e || window.event; is equivalent to :

if(!e){
     e = window.event;
}

when you add an eventhandler to an element

document.addEventListener('click',handler,false);

in most browsers it passes the event as first parameter.

handler=function(e){// e is the event in some browsers
 e=e||window.event; // but in some old browsers the event is window.event
  // so you check if e(event) exists else you use window.event.
  // '||' means or...
  // e is already defined as a placeholder in the handler function
  // so you don't need to put var infront of it
}