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