Part of process about learning framework-based frontend development is being able to manipulate JavaScript data types and you often need to understand how to handle JavaScript Object. Object is a broad topic, but today I want to share some of the notes I took while trying to understand this data type.

JavaScript Object !== JSON Object

It can be easily misleading if you’re new to JavaScript because they look so similar. The key difference is that JavaScript Object can store wide range of data types as the key, meanwhile JSON can only store string as the key.

You can visit MDN to learn more about the difference in-depth.

I like to use a magic chest as an analogy for JavaScript object. Here is how you can create a new chest.

// Create an empty object and refer to it as 'chest'
let chest = {};

What makes object magical is that you can store anything with reference/name inside it. Take a look at this piece of code to add something into the chest.

chest = {diamond: 5};

We’re not exactly adding 5 diamonds into the chest. There is no concept of “diamond” in the chest. What we did was creating a reference called diamond and assign the value of 5 to it. In fact, we might come up with some other references to describe this object.

chest = { 
	material: 'iron',
	sturdiness: 10,
	content: []}

I’ve added some references to describe the nature of the chest. There is also a new property called content with array as its data type.