How to create array of objects of ES6 class while calling constructor of this class?

Question

I would like to create array or object of objects while calling constructor of class? I mean, everytime I'm calling class constructor it adds new object to array or object.

f.e.

let blocks = {};

class Block(){

    constructor(X,Y,width,height){
        this.X = X;
        this.Y = Y;
        ...
        and now I would like to add this created object to "blocks"
        something like: blocks.push(and this object here)
    }
}

How can I implement something like this? Or should it be another function?

You can add another method inside class and call this metod in constructor. — Kamil Naja
– Kamil Naja, Commented Aug 19, 2018 at 10:57

T.J. Crowder · Accepted Answer · 2018-08-19 11:00:40Z

3

something like: blocks.push(and this object here)

That's exactly how you'd do it, but blocks should be an array, not an object. So:

let blocks = [];

and then in the constructor:

blocks.push(this);

Live Example:

let blocks = []; // <== [], not {}

class Block {    // No ()

    constructor(X,Y,width,height){
        this.X = X;
        this.Y = Y;
        blocks.push(this);
    }
}

new Block(1, 1, 1, 1);
new Block(2, 2, 2, 2);
new Block(3, 3, 3, 3);

console.log(blocks.length); // 3

But, beware that that means the object (the block that was created) will always be retained in memory, even if whatever created it originally finishes with it and lets it go. Normally, you wouldn't have a constructor do something like this, you'd leave it to the caller.

Depending on why you're building this list of blocks, you may (or may not) want to use WeakSet or WeakMap instead.

edited Aug 19, 2018 at 11:00

answered Aug 19, 2018 at 10:56

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jonas Wilms Over a year ago

And concerning the WeakSet/Maps: they are not really useful as one cannot iterate them

Wojciech Jakubek Over a year ago

OMG.. Literally I spend at least half an hour to try to implement it. And I didn't think about simple "this". Thanks a lot ;)

T.J. Crowder Over a year ago

@JonasWilms - Well again, that depends on what the use case is. Traditional use of WeakMap is private per-instance information, so you don't need iteration. I've never actually needed a WeakSet, but I've heard there are use cases for it. ;-)

T.J. Crowder Over a year ago

@WojciechJakubek - Not sure how getters/setters would relate to using a WeakMap (for or against). :-)

T.J. Crowder Over a year ago

@WojciechJakubek - If your goal is to have a list of blocks to draw on a canvas, I recommend not having the Block constructor add the block to the list. Have the code calling the constructor do it. Make that code responsible for adding to (and possibly removing from) the list.

|

Willem van der Veen · Accepted Answer · 2018-08-19 11:26:17Z

0

Your cannot the push method because it is not present on an object. Currently your created an object by:

let blocks = [];  // creates object with literal syntax.

push is a method which is only available on arrays:

let obj = {};
let arr = [];

console.log(typeof obj.push );  // push not on obj
console.log(typeof arr.push );  // push is on array.prototype

You can solve it by changing from an object literal to an array literal.

let blocks = []; 

class Block {    

    constructor(X,Y,width,height){
        this.X = X;
        this.Y = Y;
        blocks.push(this);
    }
}

new Block(1, 2, 3, 4);
new Block(2, 4, 6, 8);

console.log(blocks); // 3

answered Aug 19, 2018 at 11:26

Willem van der Veen

37k19 gold badges208 silver badges177 bronze badges

Collectives™ on Stack Overflow

How to create array of objects of ES6 class while calling constructor of this class?

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related