Diving into Objects: The Building Blocks of JavaScript

After arrays, JavaScript objects – how to create them, read and change properties, add methods, and loop over them.

What is an object in JavaScript?

An object is a collection of related data. Think of a car: it has properties (colour, brand, model) and things it can do (drive, brake). A JavaScript object works the same way – properties hold data, and methods are functions stored on the object.

Creating an object

Define an object with curly braces {} and a list of properties inside.

Example

let car = {
    brand: "Toyota",
    model: "Corolla",
    year: 2021
};

console.log(car);

Accessing object properties

Use dot notation or bracket notation to read a property.

Dot notation

console.log(car.brand);  // Outputs: Toyota

Bracket notation

console.log(car["model"]);  // Outputs: Corolla

Adding and modifying object properties

Objects are dynamic. You can add properties or change values after the object is created.

Example

car.color = "blue";
car.year = 2022;

console.log(car);

Deleting properties

Remove a property with the delete keyword.

Example

delete car.color;

console.log(car);

Object methods

Methods are functions stored as object properties. They give the object behaviour.

Example

let person = {
    firstName: "Alice",
    lastName: "Smith",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

console.log(person.fullName());  // Outputs: Alice Smith

Iterating over an object

Loop through an object’s properties with a for...in loop.

Example

for (let key in person) {
    console.log(key + ": " + person[key]);
}

Nested objects

Objects can contain other objects. Useful when your data has a natural hierarchy.

Example

let student = {
    name: "John Doe",
    age: 20,
    address: {
        street: "123 Main St",
        city: "Anytown",
        zipCode: "12345"
    }
};

console.log(student.address.city);  // Outputs: Anytown

Constructors and object instances

A constructor is a blueprint for creating multiple similar objects. The traditional approach is a function called with new.

Example

function Car(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
}

let myCar = new Car("Honda", "Civic", 2020);
console.log(myCar);

ES6 classes

ES6 added a class syntax – a cleaner way to define constructors and methods.

Example

class Vehicle {
    constructor(brand, model, year) {
        this.brand = brand;
        this.model = model;
        this.year = year;
    }

    displayInfo() {
        return `${this.brand} ${this.model} (${this.year})`;
    }
}

let myVehicle = new Vehicle("Ford", "Mustang", 2021);
console.log(myVehicle.displayInfo());

Objects turn up everywhere in JavaScript. Try building a few of your own – add properties, methods, and nested data – and see how much of your program logic they can hold.