bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Object Properties

Concept visual

JavaScript Object Properties

Pointer walk
two pointers
leftright102132436485116
left=0
right=6
1
3

Start at both ends

Properties are key:value

Pairs

A

JavaScript object is a collection of properties

Properties can be changed, added, and deleted.

Accessing JavaScript Properties

You can access object properties in these ways:

Dot notation

Bracket notation

Expression

Examples

//

objectName.property let age = person.age;

// objectName [" property "]

let age = person["age"];

// objectName [ expression ]

let age = person[x];
Dot Notation objectName.propertyName person.firstname + " is " + person.age;
Bracket Notation objectName["propertyName"]
person["firstname"] + " is " + person["age"];

In general, dot notation is preferred for readability and simplicity. Bracket notation is necessary in some cases: The property name is stored in a variable: person[myVariable] The property name is not a valid identifier:

Formula

person["last - name"]

Bracket notation is useful when the property name is stored in a variable:

Example

let n1 = "firstName";
let n2 = "lastName";
let name = person[n2] + " " + person[n2];

Changing Properties

You can change the value of a property:

Example person.age = 10;

Adding New Properties

You can add a new property by simply giving it a value:

Example person.nationality = "English";

Deleting Properties

The delete keyword deletes a property from an object:

Examples const person = {
firstName: "John", lastName: "Doe", age: 50,
};
delete person.age;
const person = {
firstName: "John", lastName: "Doe", age: 50,
};
delete person["age"];

The delete keyword deletes both the value and the property.

After deleting, the property is removed. Accessing it will return undefined.

Check if a Property Exists

Use the in operator to check if a property exists in an object:

Example

const person = {
firstName: "John", lastName: "Doe"
};
let result = ("firstName" in person);

Nested Objects

Property values in an object can be other objects:

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

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

Examples myObj.myCars.car2;
myObj.myCars["car2"];
myObj["myCars"]["car2"];
let p1 = "myCars";
let p2 = "car2";
myObj[p1][p2];

Summary

Object properties are key:value pairs

Access properties with dot notation or bracket notation Add, change, and delete properties using assignment and delete Use the in operator to check if a property exists

See Also:

What are JavaScript Objects?

What are Object Methods?

What is this in Objects?

How to Display JavaScript Objects

What is an Object Constructor?

Advanced Chapters:

Previous

JavaScript Function Definitions

Next

JavaScript Temporal vs Date