Using Object Methods in JavaScript Complete Guide (2022)

Hey readers, In this article we will discuss using object methods in JavaScript. Let us get started.

Introduction

An object is one of the non-primitive data types in JavaScript. It is a group of keys and their values. They are different from objects from other programming languages. It can contain data of any data type in JavaScript. The keys of an object are always strings. Even if data of other datatypes is passed as a key, it automatically gets converted to a string but some special characters are not allowed as keys. The values of the object can be of any data type.

The key-value pairs in an object are enclosed within the curly brackets and each of them is known as a property. The key and its corresponding value are separated by a colon. The key-value pairs are separated by commas. We can also include a function inside an object. Then it is known as a method. Given below is an example of what an object in JavaScript looks like.

const person = {
  name: "helen",
  height: 164,
  weight: 67.4
  }Code language: JavaScript (javascript)

Why objects?

We can declare any number of variables in JavaScript. Then why do you think is there a need for an object? We store data of similar characteristics in an object. Without it, there will be a lot of confusion between the variables declared. The code becomes messed up and we cannot reuse it. To avoid all these confusions, we use objects. There are many uses of objects in JavaScript due to which the use of objects became inevitable.

Consider the case of a library where all the books of one category are placed together. It becomes easy for us to find the book we are searching for, as we can directly go to that category where we can find that book. Think of searching the entire library for that one book. Sounds frightening right? Objects will make our work easier in JavaScript.

Object Properties in JavaScript

As we have already discussed, each key-value pair in the object is known as a property. Let us take an example and define what are properties in it.

const person = {
  name: "Helen",
  height: 164
  }Code language: JavaScript (javascript)

In the above example, name:"Helen" and height:164 are known as properties. We can access a property with its respective key. There are two approaches by which we can access a property. They are dot notation and bracket notation.

Dot notation

Let us understand the syntax of the dot notation

Syntax:

object.keyCode language: JavaScript (javascript)

Object

We should put the object name in this parameter. Generally, we declare an object with a name. It is known as an object name.

Key

In this parameter, we should put the key of the property, whose value you want to access.

Let us take an example. In this example, if you want to access the height property in the dot notation, the syntax should look as shown below

const person = {
  name: "Helen",
  height: 164
  }
console.log(person.height)Code language: JavaScript (javascript)

Output:

164Code language: Bash (bash)

We can clearly see in the output that the height property of the object person got accessed and we have got the value of the key height.

Bracket notation

This notation is similar to an array-like representation. The output of this notation is similar to that of dot notation but the thing that changes is the syntax. Let us understand the syntax of this notation.

Syntax:

object[“key”]Code language: JavaScript (javascript)

Object

We should put the object name in this parameter.

Key

In this parameter, we should put the key of the property, whose value you want to access.

Let us understand it with the help of an example

const person = {
  name: "Helen",
  height: 164
  }
console.log(person[“height”])Code language: JavaScript (javascript)

Output:

164Code language: Bash (bash)

Using the above two notations, we can delete a property, modify the value of a property, check the existence of a property, add a property, and many more things.

Object methods in JavaScript

As we have already discussed earlier in the introduction, if we define a function inside an object as a value for a key, it is known as a method.

Accessing Object methods

When trying to access a method, there is a slight change in the syntax when compared to accessing a property of an object. We have to include brackets. Let us understand the syntax of dot notation by which we can access a method.

Syntax:

object.key()Code language: JavaScript (javascript)

Object

We should put the object name in this parameter.

Key

In this parameter, we should put the key of the method, whose value you want to access.

Let us create a method by taking an example and also accessing that method.

const person = {
  name: "Helen",
  height: 164
  sentence: function() {
    return this.name + " height is " + this.height;
  }
};
console.log(person.sentence())Code language: JavaScript (javascript)

In this example, the sentence property is a method. So we have added brackets i.e person.sentence() instead of person.sentence When we try to access the sentence key, it gives the output as shown below

Output:

Helen height is 164Code language: Bash (bash)

this keyword

In the above example of accessing a method, we have used the keyword this. It is used when we try to access one of the properties of the same object from inside the method of the same object. In the above example, we have accessed the name key which is inside the object person from inside the method sentence, which is inside the same object.

In-built methods

Object.keys()

This method is used to get all the keys of an object. The output we will get will be in the form of an array.

object.values()

This method is used to get all the values of an object. The output we will get will be in the form of an array.

object.freeze()

This method is used to freeze an object. Once we use this method, we can’t make any changes to the object.

object.entries()

This method converts the object to an array. Each key and value of the object are made into an array and are kept inside another array with all other key-value pairs i.e in the form of a nested array.

object.seal()

This method is similar to that of the above. We can add any new properties to the object once we use this method but we can make changes to the existing properties.

Conclusion

In this article, we have discussed why objects are necessary, object properties, methods, accessing them, this keyword, and in-built object methods in JavaScript. That’s it for this article. Do not stop learning here. Do check out the JavaScript Basics course at codedamn where learning takes place with practicality. There are inbuilt playgrounds at codedamn. So there is no need to set up a working atmosphere on your device. There are a lot of projects in this course. So you will get hands-on experience by the end of the course.