Working with Objects

What Are Objects in JavaScript?

const book = {
  title: "JavaScript: The Good Parts",
  author: "Douglas Crockford",
  yearPublished: 2008,
  pages: 176,
  isInPrint: true
};

javascript

Creating Objects

There are several ways to create objects in JavaScript:

1. Object Literals

The most common way to create objects is using object literal notation:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

javascript

Nested Objects

Objects can contain other objects as properties, creating a nested structure.

let person = {
  name: 'Alice',
  address: {
    street: '123 Main St',
    city: 'Wonderland'
  }
};

console.log(person.address.city); // Output: Wonderland

javascript

2. Using ES6 Classes

ES6 (2015) introduced class syntax, which provides a more familiar way to create objects for programmers coming from class-based languages:

class Person {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const john = new Person("John", "Doe", 30);
console.log(john.getFullName()); // "John Doe"

javascript

3. Constructor Functions

Constructor functions let you create multiple objects with the same structure:

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

const john = new Person("John", "Doe", 30);
const jane = new Person("Jane", "Smith", 25);

javascript

Working with Object Properties

Accessing Properties

You can access object properties in two ways:

Dot Notation

Syntax: objectName.propertyName

const person = { name: "John", age: 30 };
console.log(person.name); // "John"
person.age = 31;

javascript

Bracket Notation

Syntax: object["property"]

const propertyName = "name";
console.log(person[propertyName]); // "John"

// Adding a property with spaces in its name
person["favorite color"] = "blue";

javascript

Destructuring Objects

ES6 introduced destructuring to extract properties into variables.

const user = { name: "Eve", age: 28 };
const { name, age } = user;
console.log(name, age); // "Eve", 28

// With aliasing
const { name: userName } = user;
console.log(userName); // "Eve"

javascript

Adding and Modifying Properties

Properties can be added or updated after creation.

const person = { name: "Charlie" };
person.age = 30;              // Add
person.name = "Charlotte";    // Modify

javascript

Deleting Properties

Use the delete operator to remove a property.

delete person.age;
console.log(person.age); // undefined

javascript

Property Existence Checking

To check if a property exists in an object, you can use:

The `in` operator:

console.log("make" in car); // true
console.log("model" in car); // false after deletion

javascript

hasOwnProperty() method:

console.log(car.hasOwnProperty("make")); // true

javascript

Unlike the in operator, hasOwnProperty() only checks for the object’s own properties, not properties inherited from its prototype.

Comparing with undefined:

console.log(car.model === undefined); // true if the property doesn't exist

javascript

Object Methods

Methods are functions stored as object properties. They allow objects to have behavior in addition to data.

const dog = {
  name: "Rex",
  bark() {
    console.log(`${this.name} says woof!`);
  }
};

dog.bark(); // "Rex says woof!"

javascript

Shorthand Method Syntax: ES6 allows omitting the function keyword.

Extending Classes

Use extends for inheritance in ES6 classes.

class Vehicle {
  constructor(type) {
    this.type = type;
  }
  move() {
    console.log(`${this.type} is moving`);
  }
}

class Car extends Vehicle {
  constructor(make, model) {
    super("Car"); // Call parent constructor
    this.make = make;
    this.model = model;
  }
}

const myCar = new Car("Hyundai", "Sonata");
myCar.move(); // "Car is moving"

javascript