Javascript | Understanding Objects and Prototypes

JavaScript is an object-oriented language, which means that everything in JavaScript is an object, or is a property or method of an object. In this article, we will explore the concepts of objects and prototypes in JavaScript.

Objects

In JavaScript, an object is a collection of key-value pairs, where the keys are strings and the values can be any JavaScript data type, including other objects. Objects can be created using the object literal syntax or using the new keyword with a constructor function.

Object Literal Syntax

The object literal syntax is a shorthand way of creating an object:

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

Constructor Function Syntax

Constructor functions are used to create objects that have the same properties and methods. The constructor function is called with the new keyword and returns a new object:

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

const person1 = new Person('John', 30);
const person2 = new Person('Jane', 25);

Prototypes

In JavaScript, every object has a prototype, which is an object that provides properties and methods that can be shared by all instances of the object. When a property or method is accessed on an object, JavaScript first looks for the property or method on the object itself. If it is not found, it looks for it on the object’s prototype, and so on, up the prototype chain until the property or method is found or the end of the chain is reached.

Prototype Chain

The prototype chain is the series of objects linked together through their prototypes. The prototype chain starts with the object’s prototype and continues up the chain until it reaches null, which is the end of the chain.

// Person constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Add a method to the Person prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
}

// Create a new person
const person = new Person('John', 30);

// Access the greet method on the person object
person.greet(); // Output: Hello, my name is John

Reusable Functions with Prototypes

One of the benefits of using prototypes is that you can add reusable functions to the prototype, which can be shared by all instances of the object. This can reduce the amount of code you need to write and can make your code more efficient.

// Person constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Add a method to the Person prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
}

// Add a method to the Person prototype that returns the person's age in dog years
Person.prototype.getAgeInDogYears = function() {
  return this.age * 7;
}

// Create a new person
const person = new Person('John', 30);

// Access the getAgeInDogYears method on the person object
console.log(person.getAgeInDogYears()); // Output: 210

Conclusion

Understanding objects and prototypes is an essential part of becoming a proficient JavaScript developer. By using prototypes, you can create more efficient and reusable code.