Intro to Objects in JavaScript

Last Updated: 25th April, 2024

What are objects in JavaScript?

In JavaScript, an object is a collection of properties and methods that represent a real-world entity. An object is a data type that represents a collection of properties, which are key-value pairs. An object can have methods, which are functions that can be executed on the object. Objects can also have other objects as properties, making them versatile data structures.

Creating objects in JavaScript

There are several ways to create objects in JavaScript, such as object literals a constructors.

Object literal syntax

One way is to use object literals, which are enclosed in curly braces {}. The key-value pairs are separated by colons, and each pair is separated by commas. Here's an example:

Loading...
 Run

This creates an object named person with four properties: name, age, address, and sayHello. The address property is an object itself, with its own properties. The sayHello property is a function that can be executed on the person object.

Constructor function

Another way to create objects in JavaScript is to use constructor functions. Constructor functions are used to create instances of objects that have the same properties and methods.

Here's an example:

Loading...
 Run

This creates a constructor function named Person that takes two parameters: name and age. The function sets the name and age properties of the object, and it also has a sayHello method. The new keyword is used to create instances of the Person object, which can have different values for the name and age properties.

Properties and Methods of Objects in JavaScript

Objects in JavaScript have properties and methods. Properties are the values associated with the object, while methods are the functions associated with the object.

For example, consider the following object:

Loading...
 Run

In this object, "name" and "age" are properties, while "sayHello" is a method.

Accessing object properties and methods

To access an object's property, we can use either dot notation or bracket notation. For example, we can access the "name" property of the "person" object created above using the following code:

Loading...
 Run

To call a method on an object, we can use dot notation as well. For example, we can call the "sayHello" method of the "person" object using the following code:

Loading...
 Run

Modifying object properties and methods

We can modify an object's property or method by reassigning it to a new value. For example, we can change the value of the "name" property of the "person" object using the following code:

Loading...
 Run

We can also add a new property or method to an object using the dot notation or bracket notation. For example, we can add a new "address" property to the "person" object using the following code:

Loading...
 Run

Object prototypes

In JavaScript, objects are created from prototypes, which are essentially blueprints for objects. When we create a new object, it inherits all the properties and methods of its prototype. We can define a prototype using the constructor function or the object literal notation. For example, consider the following prototype:

Loading...
 Run

In this prototype, we define the "Person" constructor function that takes two arguments, "name" and "age", and assigns them to the corresponding properties of the object. We also define the "sayHello" method.

To create a new object from this prototype, we can use the following code:

Loading...
 Run

Prototype chain

In JavaScript, objects inherit properties and methods from their prototypes, which can create a chain of inheritance called the prototype chain. If an object tries to access a property or method that it does not have, JavaScript will look for it in the object's prototype, and if it does not find it there, it will look for it in the prototype's prototype, and so on, until it reaches the end of the chain.

For example, consider the following prototypes:

Loading...
 Run

In this example, we define the "Animal" prototype and the "Dog" prototype. The "Dog" prototype inherits from the "Animal" prototype using the "prototype" property.

If we create a new "Dog" object, and try to access a property or method that it does not have, JavaScript will look for it in the "Dog" prototype, and if it does not find it there, it will look for it in the "Animal" prototype, and so on, until it reaches the end of the chain.

Loading...
 Run

In this example, we create a new "Dog" object called "fido". We call the "bark" method, which is defined in the "Dog" prototype, so JavaScript can find it easily. We also call the "eat" method, which is defined in the "Animal" prototype, so JavaScript has to look for it in the prototype chain.

Conclusion

In conclusion, objects are a fundamental concept in JavaScript and play a crucial role in building complex applications. They have properties and methods, which can be created using object literals or constructor functions. We can create objects using various methods, access and modify their properties and methods, and implement inheritance using the prototype chain. By understanding objects and their features, we can build powerful and flexible applications in JavaScript.