Using [].push.call() to modify an object's len

Question

Cannot reproduce MDN's example («Using an object in an array-like fashion»).

  let obj = {
    length: 0,
    addEl: function (element) {
       [].push.call(this, element);
    };
  };
  // Node REPL still expect me to do something, so there's an error. Why?

Could you, guys, explain what's wrong here? Also it seems that I don't get the point with the mechanics here:

// from the example:
obj.addElem({});
obj.addElem({});
console.log(obj.length);
// → 2

What if we call the function with some different agrument, not {}, will it work? And if it won't, then why we should use {} exactly? What is the this context here: addEl method or the object itself? If the second, why not addEl function: it's not an array function, so it should have its own this (and, I guess, I'd use something like objThis = this; property).

One more related question is here.

Answer 1

Since an object is not an array, but can behave like an array you need to borrow push from the Array object.

But in this case this refers to the array object created with the shorthand []. So we need to change this into the scope for obj using call.

Because there is a length property defined, push will update this value.

An empty object is passed as an element {}, but any other will do:

let obj = {
  length: 0,
  addEl: function(element) {
    Array.prototype.push.call(this, element); //also borrowing push from the array.prototype prevents an extra array to be made in memory every time we call upon this function.
  } //« fixed the typo here
};

obj.addEl({});
obj.addEl(1);
obj.addEl('a');
obj.addEl(true);
console.log(obj);

Answer 2

var array = {
    length: 0,
    push: function(obj){
        this[this.length] = obj;
        this.length++;
    }
}

array.push(23);

You can try this, this solves your problrm i guess.

Answer 3

The code in your post has some typos:

  let obj = {
    length: 0,
    addEl: function (element) {
       [].push.call(this, element);
    };
     ^ syntax error
  };
  // Node REPL still expect me to do something, so there's an error. Why?

As you suspected in your comment in the code, there is a syntax error, which I marked for you. Remove that semicolon.

And then, when trying the example you wrote obj.addElem, but in the above object literal you have addEl.

The example should work just fine, if you simply copy-paste it.

var obj = {
    length: 0,

    addElem: function addElem(elem) {
        // obj.length is automatically incremented 
        // every time an element is added.
        [].push.call(this, elem);
    }
};

// Let's add some empty objects just to illustrate.
obj.addElem({});
obj.addElem({});
console.log(obj.length);
// → 2

---

What if we call the function with some different argument, not {}, will it work?

Sure it will. Why wouldn't it? An array in JavaScript can contain values of different types. It doesn't need to be homogeneous, so yes, you can insert other things than {}.

What is the this context here: addEl method or the object itself?

It's the object on which the method is called. So it's obj. This is how method invocation works. When you call obj.something(), the this inside something will be the obj.

---

If you still have some doubts about this example, feel free to drop a comment.