Chapter 4: Objects

In JavaScript, objects are a fundamental data type used to store collections of data and more complex entities. This chapter will cover object literals, properties, methods, and essential object-oriented programming concepts such as prototypes and inheritance.

Object Literals, Properties, and Methods

Object Literals

An object literal is a way to define an object using a set of key-value pairs. Each key is a property name, and each value is the corresponding property value.

Syntax:

let person = {
  name: "John",
  age: 30,
  job: "Developer",
};

Properties

Properties are the characteristics or attributes of an object. They are defined by the key-value pairs in an object literal.

Example:

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

console.log(car.brand); // Output: Toyota
console.log(car["model"]); // Output: Corolla

Methods

Methods are functions defined as properties of an object. They allow objects to perform actions or computations.

Example:

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

console.log(person.greet()); // Output: Hello, Alice Smith!

In this example, greet is a method of the person object that returns a greeting message.

Object-Oriented Programming Concepts

Prototypes

Prototypes are a core concept in JavaScript's object-oriented programming model. Every object has a prototype, which is another object that it inherits properties and methods from. Prototypes allow for inheritance and sharing of properties and methods between objects.

Example:

// Define a prototype object
let animal = {
  eats: true,
};

// Create a new object that inherits from the prototype
let rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // Output: true
console.log(rabbit.hops); // Output: true

In this example, rabbit inherits the eats property from the animal prototype.

Inheritance

Inheritance allows one object to use properties and methods of another object. In JavaScript, inheritance is achieved through prototypes. You can create a chain of objects where each object inherits from its prototype.

Example:

// Parent object (prototype)
let animal = {
  eats: true,
};

// Child object inheriting from the parent
let dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // Output: true
console.log(dog.barks); // Output: true

In this example, dog inherits from animal and has its own property barks.

Constructor Functions

Constructor functions are used to create multiple objects with the same properties and methods. They work as templates for creating new objects.

Syntax:

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

Person.prototype.greet = function () {
  return "Hello, " + this.firstName + " " + this.lastName + "!";
};

let person1 = new Person("John", "Doe");
let person2 = new Person("Jane", "Doe");

console.log(person1.greet()); // Output: Hello, John Doe!
console.log(person2.greet()); // Output: Hello, Jane Doe!

In this example, Person is a constructor function that creates new objects with firstName and lastName properties. The greet method is added to the Person prototype, so it is available to all instances created by the constructor.

ES6 Classes

ES6 introduced a class syntax for creating objects and handling inheritance, providing a more intuitive way to work with prototypes and constructors.

Syntax:

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

  greet() {
    return "Hello, " + this.firstName + " " + this.lastName + "!";
  }
}

let person1 = new Person("John", "Doe");
let person2 = new Person("Jane", "Doe");

console.log(person1.greet()); // Output: Hello, John Doe!
console.log(person2.greet()); // Output: Hello, Jane Doe!

In this example, Person is defined as a class with a constructor and a method greet. The Person class can be used to create new instances with new.