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

Admin 1
Viewed 1771

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.

javascript-objects javascript
6 Answers

[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.

user_5116210
user_137452580

The datatype of what you're returning is an Object

user_102175230

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).

user_129834080

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.

user_40067110

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
user_2411530
Related