[Just JavaScript] 07. Properties

[allenGKC]

07. Properties

Check this codes:

let sherlock = {
  surname: 'Holmes',
  address: { city: 'London' } 
};

let john = {
  surname: 'Watson',
  address: sherlock.address
};

john.surname = 'Lennon';
john.address.city = 'Malibu';

console.log(sherlock.surname); // ?
console.log(sherlock.address.city); // ?
console.log(john.surname); // ?
console.log(john.address.city); // ?

Here is the answer:

console.log(sherlock.surname); // "Holmes"
console.log(sherlock.address.city); // "Malibu"
console.log(john.surname); // "Lennon"
console.log(john.address.city); // "Malibu"

Properties

let's check the demo step by step:

let sherlock = {}

let sherlock = {
  surname: 'Holmes',
  age: 64,
};

Here, we can see that the sherlock variable points to an object we have created. That object has two properties. Its surname property points to the "Holmes" string value, and its age property points to the 64 number value.

Importantly, properties don’t contain values — they point at them!

Reading a Property

We can read a property’s current value by using the “dot notation”:

console.log(sherlock.age); // 64

Property Names

Properties have names. A single object can’t have two properties with the same name.

The property names are always case-sensitive!

Assigning to a Property

sherlock.age = 65;

Missing Properties

let sherlock = { surname: 'Holmes', age: 64 };
console.log(sherlock.boat); // undefined

The JavaScript universe follows certain rules to decide which value to “answer” us with.

1. Figure out the value of the part before the dot (.).

2. If that value is null or undefined, throw an error immediately.

3. Check whether a property with that name exists in our object.

   • If it exists, answer with the value this property points to.
   • If it doesn’t exist, answer with the undefined value.

Note this does not mean that our object has a boat property pointing to undefined! It only has two properties, and neither of them is called boat.

It looks at the object that sherlock points to, sees that it doesn’t have a boat property, and gives us back the undefined value because that’s what the rules say. There is no deeper reason to this: computers follow the rules.

let sherlock = { surname: 'Holmes', age: 64 };
console.log(sherlock.boat); // undefined
console.log(sherlock.boat.name); // TypeError!

Recap

1. Properties are wires — a bit like variables. They both point at values. Unlike variables, properties start from objects in our universe.
2. Properties have names. Properties belong to particular objects. You can’t have more than one property with the same name on an object.
3. Generally, you can perform an assignment in three steps:
   1. Figure out which wire is on the left.
   2. Figure out which value is on the right.
   3. Point that wire to that value.
4. An expression like obj.property is calculated in three steps:
   1. Figure out which value is on the left.
   2. If it’s null or undefined, throw an error.
   3. If that property exists, the result is the value its wire points to.
   4. If that property doesn’t exist, the result is undefined.