10.2 Object Properties

Accessing JavaScript Properties

The syntax for accessing the property of an object is:

objectName.property      // person.age

or

 objectName["property"]   // person["age"]

or

 objectName[expression]   // x = "age"; person[x]

The expression must evaluate to a property name.

Example 1: JS Object Properties - Access a property with .property

person.firstname + " is " + person.age + " years old."; 

Example 2: JS Object Properties - Access a property with ["property"]

person["firstname"] + " is " + person["age"] + " years old.";

JavaScript for...in Loop

The JavaScript for...in statement loops through the properties of an object.

Syntax

for (let variable in object) {
  // code to be executed
}

• The block of code inside of the for...in loop will be executed once for each property.
• Looping through the properties of an object:

Example 3: JS Object Properties - Looping object property values

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
  txt += person[x];
} 

Adding New Properties

• You can add new properties to an existing object by simply giving it a value.
• Assume that the person object already exists - you can then give it new properties:

Example 4: JS Object Properties - Add a new property to an existing object

person.nationality = "English"; 

Deleting Properties

The delete keyword deletes a property from an object:

Example 5: JS Object Properties - Deleting object properties part 1

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

or delete person["age"];

Example 6: JS Object Properties - Deleting object properties part 2

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

• The delete keyword deletes both the value of the property and the property itself.
• After deletion, the property cannot be used before it is added back again.
• The delete operator is designed to be used on object properties. It has no effect on variables or functions.
• The delete operator should not be used on predefined JavaScript object properties. It can crash your application.

Nested Objects

Values in an object can be another object:

Example

myObj = {
  name:"John",
  age:30,
  cars: {
    car1:"Ford",
    car2:"BMW",
    car3:"Fiat"
  }
}

You can access nested objects using the dot notation or the bracket notation:

Example 7: JS Objects - Access nested objects part 1

myObj.cars.car2;

or:

Example 8: JS Objects - Access nested objects part2

myObj.cars["car2"];

or:

Example 9: JS Objects - Access nested objects part 3

myObj["cars"]["car2"];

or:

Example 10: JS Objects - Access nested objects part 4

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

Nested Arrays and Objects

Values in objects can be arrays, and values in arrays can be objects:

Example

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

To access arrays inside arrays, use a for-in loop for each array:

Example 11: JS Arrays - Nested JS Objects and Arrays

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name + "</h1>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}