Can someone please explain e = e || x? Why assign e to e?

Question

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?

Answer 1

e = e || x 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 .

---

What does it mean in your context? You probably have some sort of this code:

 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 .

Answer 2

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;
  // ...
}

Answer 3

You're misunderstanding operators.

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

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

Answer 4

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.

Answer 5

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

It is implicitly :

var e = e ? e : x;

Answer 6

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;
}

Answer 7

The above answer (ComFreek) is correct. The reason it does this is because of lazy evaluation. The boolean x || y x || y , evaluated lazily will check x first. If it evaluates to TRUE (ie 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;
}

Answer 8

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;

Answer 9

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

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

Answer 10

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
}