Making an object
An object keeps related values together under names. Curly braces make one: { name: "Mochi", age: 3 }. The engine builds the object in memory, and the variable cat refers to it.
Each entry is a property: a key, which is its name, then a colon, then its value. The key name holds the string "Mochi"; the key age holds the number 3. Commas separate properties.
Reading and changing
cat.name means: in the object that cat refers to, find the property called name and give its value. The engine finds "Mochi", and console.log prints Mochi.
Assigning to a property that exists replaces its value. cat.age = 4 puts 4 in age, and the old 3 is gone. cat is a const, yet this works: const only stops cat referring to a different object.
Assigning to a key the object does not have yet adds it. cat.color = "grey" creates a third property, color, after the other two. An object can grow at any time.
Keys in variables
Keys are strings, so a key can sit in a variable. Line 5 stores the string "color" in a variable named key. The object does not change: we only hold a key name, ready to use.
Square brackets take any expression as the key. cat[key] first reads key, which is "color", then looks up cat.color, and console.log prints grey. cat.key would instead look for a key named "key".
Removing a property
The delete operator removes a property: its key and its value together. After delete cat.age, the object has two properties left, name and color, in the order they were added.
Reading a key the object does not have is not an error. cat.age now gives undefined, the value JavaScript uses for "nothing here", and console.log prints undefined.
console.log(cat) prints the whole object: { name: 'Mochi', color: 'grey' }. One variable now carries a small record about one cat, and you can read, change, add or remove its parts by name.
What happens
// step 1/10 · object-literal
line 1 const cat = { name: "Mochi", age: 3 };
{ ... } an object literal: build a new object
engine makes it with two properties
cat refers to it (it holds a reference)
cat { name: "Mochi", age: 3 }
key (not made yet)
console (empty)
cat does not contain the object; it holds a reference to it. Two variables can refer to the same object, and a change made through one shows through the other. That is why const cat still lets you change, add and delete properties. The tray of named slots is a picture, not how an engine stores an object. Engines such as V8 use hidden shapes and fast lookups, but the result is the same as the picture: a set of key and value pairs.