How to add instance of a class into a JavaScript object?

Question

I have a class as shown below

class test{
    constructor(x){
        this.x = x;
    }
}

And I have created an instance of this class and stored into a variable temp.

let temp = new test(10);

And I also have an object where I wish to put temp.

let obj = {};
obj[temp] = true;

But when I see obj, it does not contain what I expected, it contains

{[object Object]: true}
[object Object]: true
__proto__: Object

I am unable to figure out where am I going wrong, what does object Object stand for, any help would be highly appreciated.

UPDATE:

If I create another instance of the object let temp2 = new test(10); and check temp2 in obj it returns true and also temp in obj returns true.

keyvan · Accepted Answer · 2020-06-19T11:17:02.327

2

[object Object] is the text representation for objects in JavaScript, which certain printer functions will print out instead of traversing the object.

That said, you can't expect to be able to use an object (e.g. "{ foo: 123 }" as a key of another object (e.g. "foo" is the key in earlier example). It will get flattened to a string with key "object Object" as you saw, much like a printer function will do.

edited Jun 19 '20 at 11:17

answered Jun 19 '20 at 11:03

keyvan

2,947
1
18
13

@SomShekharMukherjee apologies for my earlier answer. check my update – keyvan Jun 19 '20 at 11:16
1

Ya, I also figured out that using object as a key is wrong, since it is mutable. – Jun 19 '20 at 11:16

score 0 · Answer 2 · answered Jun 19 '20 at 11:07

0

Class instances are represented by objects with class functions and attributes in JS. Further read Classes by MDN I created a codesandbox to briefly illustrate that https://codesandbox.io/s/cocky-wood-9fk4x?file=/src/index.js

answered Jun 19 '20 at 11:07

sebastian-ruehmann

483
2
12

score 0 · Answer 3 · answered Jun 19 '20 at 11:07

0

The datatype of what you're returning is an Object

answered Jun 19 '20 at 11:07

Žygimantas Pusvaškis

17
3

Son Nguyen · Answer 4 · 2020-06-19T11:31:50.240

0

When you do this:

obj[temp] = true;

You are actually putting a boolean value in to a property with its key being an object, which gets converted to a string. Consider if what you really want is:

obj['embeddedObject'] = temp;

Which makes more sense under console.log(obj).

edited Jun 19 '20 at 11:31

answered Jun 19 '20 at 11:24

Son Nguyen

1,412
4
10

score 0 · Answer 5 · answered Jun 19 '20 at 11:37

FYI, An Object stores properties (key-value pairs), where: Property keys must be strings or symbols (usually strings) and Values can be of any type. For more info you can go through this discussion.

In you case when you put temp to obj as a property key name, temp.toString() is called implicitly and by default implementation returns "[object Object]". As your class test didn't override the toString() method and your created instances also temp and temp2 didn't override it, you always get default implementation return value of toString(). Therefore you get same output for both temp2 in obj and temp in obj.

score 0 · Answer 6 · answered Jun 19 '20 at 12:18

Object declarations with the {} are a shorthand syntax that hides the object prototype:

let obj = {}; // what you wrote
let obj = new Object() // what your JS interpreter sees
obj.prototype.object // what your JS interpreter creates

This is very similar to using the class shorthand syntax. But class is a double abstraction, hiding the fact it is really creating a function and that it's doing so with the function prototype:

// what you wrote
class test{
    constructor(x){
        this.x = x;
    }
}

// what your JS interpreter creates
test.prototype.constructor

So when you are logging obj and you get [object Object], your JS interpreter is telling you that you have created an object of prototype Object. You're confusing yourself with test, just stop with that - they are in different scopes and don't mean the same thing. Learn prototypes first.

JS Under the Hood

The thing to remember is that Javascript is an object-oriented language but does not use class-based inheritance like most other OOP. Javascript uses prototype inheritance. When you instantiate a class in JS, it's not really a class in the classical programming sense.

Just to reiterate, your JS class actually gets defined as a function. Try it out:

console.log(typeof test) //output: function

There's more to it though. Let's say we extend your example a bit further with another method:

class test{
  constructor(x){
    this.x = x;
  }

  // Custom method
  outputX() {
    console.log(this.x)
  }
}

What have we actually done? As mentioned above, the JS interpreter will read your class and leverage the function prototype to create it. So what makes this different than just defining a function?

Because you used class, the function prototype automatically assigns a constructor method to your new test prototype. All other custom methods - like outputX that I added in - get added onto the test prototype.

// All valid
test.prototype.constructor
test.prototype.outputX
test.prototype.whateverMethodYouMake

How to add instance of a class into a JavaScript object?

6 Answers6

JS Under the Hood