Bytes

Intro to Objects in JavaScript

Module - 8 OOPS in JavaScript
Intro to Objects in JavaScript

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:

let person = {
name: "John",
age: 30,
address: {
street: "123 Main St",
city: "Anytown",
state: "CA"
},
sayHello: function() {
console.log("Hello, my name is " + [this.name](<http://this.name/>));
}
};

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:

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

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name);
  };
}

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

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:

const person = {
  name: "John",
  age: 25,
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

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:

console.log(person.name); // Output: John
console.log(person['age']); // Output: 25

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:

person.sayHello(); // Output: Hello, my name is John

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:

person.name = "Jane";
console.log(person.name); // Output: Jane

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:

person.address = "123 Main St";
console.log(person.address); // Output: 123 Main St

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:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log("Hello, my name is " + this.name);
  };
}

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:

const john = new Person("John", 25);
john.sayHello(); // Output: Hello, my name is John

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:

function Animal
function Dog(name) {
this.name = name;
this.bark = function() {
console.log("Woof!");
};
}

Dog.prototype = new Animal();

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.

const fido = new Dog("Fido");
fido.bark(); // Output: Woof!
fido.eat(); // Output: Fido is eating.

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.

Online Javascript Compiler
Open Compiler
Recommended Courses
Masters in Computer Science: Software Engineering
Course
20,000 people are doing this course
Join India's only Pay after placement Master's degree in Computer Science. Get an assured job of 5 LPA and above. Accredited by ECTS and globally recognised in EU, US, Canada and 60+ countries.
Certification in Full Stack Web Development
Course
20,000 people are doing this course
Become a job-ready Full Stack Web Developer in 30 weeks. Join the largest tech community in India. Pay only after you get a job above 5 LPA.

AlmaBetter’s curriculum is the best curriculum available online. AlmaBetter’s program is engaging, comprehensive, and student-centered. If you are honestly interested in Data Science, you cannot ask for a better platform than AlmaBetter.

avatar
Kamya Malhotra
Statistical Analyst
Fast forward your career in tech with AlmaBetter

Vikash SrivastavaCo-founder & CPTO AlmaBetter

Vikas CTO

Related Tutorials to watch

Top Articles toRead

AlmaBetter
Made with heartin Bengaluru, India
  • Official Address
  • 4th floor, 133/2, Janardhan Towers, Residency Road, Bengaluru, Karnataka, 560025
  • Communication Address
  • 4th floor, 315 Work Avenue, Siddhivinayak Tower, 152, 1st Cross Rd., 1st Block, Koramangala, Bengaluru, Karnataka, 560034
  • Follow Us
  • facebookinstagramlinkedintwitteryoutubetelegram

© 2023 AlmaBetter