JavaScript array default assignment syntax confusion

Question

If I create a function constructor in JavaScript like so:

function Emitter() {
  this.events={}
}

and then I add a method to its prototype like so:

Emitter.prototype.on = function(type,listener) {
  this.event[type] = this.events[type] | [];
  this.event[type].push(listener);
}

When I call the method 'on' an instance of Emitter twice, why does it not just overwrite the original property called greet and assign it the second function? I guess I do not understand the stricture of what is happening in:

this.event[type] = this.events[type] | [];

var emtr = new Emitter();
emtr.on('greet',function(){
  console.log('Hello once'); 
});
emtr.on('greet', function(){
   console.log('Hello twice');
});

Ivan · Accepted Answer · 2018-07-10 10:39:39Z

You should be using || for OR instead of |, this is invalid:

this.event[type] = this.events[type] | [];

Also, you are calling event instead of events. You should have:

this.events[type] = this.events[type] || [];

This way if this.events[type] is not undefined it will stay as is. However if it is undefined is will be assigned as an empty array: []

The code below will successfully add the two functions to emtr.events['greet'] (an array of functions):

function Emitter() {
  this.events = {}
}

Emitter.prototype.on = function(type, listener) {
  this.events[type] = this.events[type] || [];
  this.events[type].push(listener);
}

var emtr = new Emitter();
emtr.on('greet', function() {
  console.log('Hello once');
});
emtr.on('greet', function(){
  console.log('Hello twice');
});

console.log(emtr.events['greet'])

So you can call them like so:

emtr.events['greet'][0]();

And

emtr.events['greet'][1]()

If instead, you would like to replace the listener then you shouldn't be using an array. Pointing to a function instead of an array of functions will suffice:

function Emitter() {
  this.events = {}
}

Emitter.prototype.on = function(type, listener) {
  this.events[type] = listener;
}

var emtr = new Emitter();
emtr.on('greet', function() {
  console.log('Hello once');
});
emtr.on('greet', function(){
  console.log('Hello twice');
});

emtr.events['greet'](); // notice how the first listener was replaced by the new one

This way you can call your listener with emtr.events['greet']().

Paul · Accepted Answer · 2018-07-10 10:40:12Z

While @Ivan is completely correct, he missed your main question of “why?”

The answer is that the logical OR operator in JS also functions as a null coalescing operator when used as part of an assignment statement.

Essentially, in the case

    let x = y || “default”;

The right hand side will evaluate to the first “truthy” value and return that. In JS most things evaluate true in a logical operation except values like false, 0, null, and a few others not relevant to this question.

So in your syntax (as corrected by Ivan), you’re telling JS to assign to the events[type] property the first thing that’s true. Either itself (which will evaluate true if it’s not null, unassigned, 0, etc) or else an empty array.

The first time you add an event, it’ll be unassigned and therefore get an empty array added. Subsequently, arrays eval as true, so you’ll just keep re-assigning the property to itself which has no effect.

Make sense?

pr0p · Accepted Answer · 2018-07-10 10:40:31Z

0

function Emitter() {
    this.events = []
}

Emitter.prototype.on = function (type, listener) {
    
    this.events[type] = this.events[type]||[]

    this.events[type].push(listener);
}

Emitter.prototype.emit = function(type){
    var listener = this.events[type].pop()
    if(this.events[type].length>=0)
        listener()
    else
        console.log('Nothing to emit')
}


var emtr = new Emitter();
emtr.on('greet',function(){
  console.log('Hello once'); 
});

emtr.emit('greet')

answered Jul 10, 2018 at 10:40

pr0p

2,34816 silver badges34 bronze badges

Collectives™ on Stack Overflow

JavaScript array default assignment syntax confusion

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related