CODEWITHSUNDEEP
javascripteventsdom-events
muiiu
muiiu

Reputation: 587

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

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?

Upvotes: 7

Views: 918

Answers (10)

James Noyes
James Noyes

Reputation: 39

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

Upvotes: 2

akonsu
akonsu

Reputation: 29536

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.

Upvotes: 2

cocco
cocco

Reputation: 16706

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
}

Upvotes: 1

ComFreek
ComFreek

Reputation: 29424

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.

Upvotes: 18

Yann
Yann

Reputation: 2221

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

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

Upvotes: 1

Vivin Paliath
Vivin Paliath

Reputation: 95518

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

Upvotes: 2

Richard Friend
Richard Friend

Reputation: 16018

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;

Upvotes: 1

AllTooSir
AllTooSir

Reputation: 49372

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

It is implicitly :

var e = e ? e : x;

Upvotes: 2

SLaks
SLaks

Reputation: 887415

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.

Upvotes: 4

Pointy
Pointy

Reputation: 413720

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

Upvotes: 6

Related Questions