DEV Community

Cover image for Javascript Interview Question Explanation- Object Properties
Kawal Jain
Kawal Jain

Posted on

Javascript Interview Question Explanation- Object Properties

Hello Reader,

I am going to explain javascript interview coding question. How javascript compiler works and what it actually produces as output.
I'll break down each part of the output, explain why it appears this way, and connect it back to the specific lines of code responsible

let a = {};
let b = { key: 'b' };
let c = { key: 'c' };

a[b] = 123;
a[c] = 456;

console.log(a[b])
Enter fullscreen mode Exit fullscreen mode

Before we dive into the details, take a moment to look at this code snippet. Try to guess what the output will be based on your current understanding. This approach not only helps reinforce your JavaScript skills but also makes the explanation that follows much more meaningful
"Think about how JavaScript will process each line. Once you've made your guess, keep reading to see if you got it right!"

Explanation of above code

  1. For Line-1
let a = {};
Enter fullscreen mode Exit fullscreen mode

Above code, creates an empty object, and assign to the variable 'a'.

  1. For Line-2
let b = { key: 'b' };
Enter fullscreen mode Exit fullscreen mode

This line creates an object with a single property key and the value 'b', and assigns it to the variable 'b'.

  1. For Line-3
let c = { key: 'c' };
Enter fullscreen mode Exit fullscreen mode

This line creates an object with a single property key and the value 'c', and assign it to the variable 'c'.

  1. For Line-4
a[b] = 123;
Enter fullscreen mode Exit fullscreen mode

a[b] = 123 This line sets a property of the object a using the object b as the key. In JavaScript, when an object is used as a key in another object, the object is first converted to a string using the toString() method. In this case, the string representation of the object b is "[object Object]" . So, the property "[object Object]" of the object a is set to the value 123.

  1. For Line-5
a[c] = 456;
Enter fullscreen mode Exit fullscreen mode

Similar to the Previous step, "c" is also a object and converted to string, it becomes ""[object Object]"".

Therefore, the line a[c] = 456; is equivalent to "a[object Object]"=456, which means that object has "[object Object]" property and its value is 456.

  1. For Line-6
console.log(a[b])
Enter fullscreen mode Exit fullscreen mode

Output is 456. when you try to access the the property "a[b]", javascript again convert b to string, which is "[object Object]". Since object has a property with the key "[object Object]" and its value is 456. So it will print the output.


Conclusion

In Summary, the code demonstrate that when an object is used as a key in the another object, the object is first converted to a string representation, which is "[object Object]" by default. This means that the objects b and c are treated as the same key, and the last value assigned to that key is the one that is retrieved.


Mission Accomplished: Unraveling the Code!

I hope this explanation not only clarified the code but also sparked some curiosity to explore further. JavaScript is full of surprises and powerful tools, and each piece you learn brings you closer to mastering it.
Thanks for reading, and I hope you enjoyed this breakdown! Feel free to share your thoughts, questions, or ideas for future topics in the comments.

Happy coding!

Top comments (0)