tutorialstonight logo
A Platform To Learn To Code

JAVASCRIPT OBJECT



What is a javascript object?

A Javascript object is a collection of properties and is a non-primitive data type. The property of an object is a key-value pair, where the key must be a string but the value can be anything like number, string, boolean, array or any other object.

Here is an object for a person who has 3 properties.

javascript object

Javascript is an object-based language, everything in javascript is an object or can be made an object using a new keyword. Example

  • Numbers can be made object using the new keyword
  • Boolean can be made object using the new keyword
  • Strings can be made object using the new keyword
  • An array is an object
  • A function is an object
  • Date is an object
  • Regex (Regular Expression) is an object
  • Maths is an object
  • Objects are always objects


How do you create an object in javascript?

Javascript object can be created in many different ways. Following are the ways by which you can create objects in javascript:

  1. javascript object literal
  2. javascript object constructor
  3. javascript object.create
  4. javascript object using class


1. Javascript Object Literal

Javascript object literal is the simplest way to create objects in javascript, it is a comma-separated key-value pair enclosed in curly braces. Then the curly braces are assigned to a variable which is the name of the object.

Here is how to create an empty object in javascript using object literal.

Properties are added to the object in form of key-value pair, the key should be a string and value could be any data type.

Here, the object person has three properties: 'firstname', 'lastname' and 'age'.


2. Javascript Object Constructor

Creating a javascript object using the constructor method is most easy and convenient to create multiple objects.

First, create the constructor function with or without arguments and define your properties and method.

A constructor is just a javascript function, which constructs objects when called with a new keyword.

Here is how to create an object using a constructor function.

constructor method

Run the code

Output:

javascript-constructor-object

3. javascript object.create

The Object.create() method is used to create a new object, using an existing object as a prototype of the newly created object.

Using this method all the properties that are created referring to older objects, has to be given value in a new object.

See in the example 'firstname' and 'lastname' of 'newPerson' in the example is given manually.

Object.create() method

Run the code

Output:

javascript object using object create method

4. Javascript Object Using Class

Objects in javascript can also be created using javascript ES6 classes. Javascript classes have Constructor which create properties of an object whenever an object is made using the class.

Class method

Run the code

Output:

javascript object using class

Access Properties In Javascript Object

There are two ways to access properties of a javascript object:

  1. dot notation (.): The properties of the objects are accessed using the dot operator. Example: objectname.property_name
  2. Array notation ([]): The properties of the objects are accessed using the square bracket operator. Example: objectname["property_name"]

Example

Run the code

Javascript object Method

What are object methods in javascript?

object methods are the functions that are defined inside the object and operate on it to perform a certain task.

object method is part of the object in the form of a key-value pair.

To access the object method write method name followed by object name connected with a dot. Here is an example:

Check Working example.

object method

Run the code

Javascript Array Of Objects

Apart from a single object, you can also create an array of objects, and to access the properties of these objects you can simply loop through the array.

Consider an example of an array of students, where each student is an object itself having properties 'name', 'roll_no' and 'marks'.

Now let there be 5 students in the class, so you simply add all student object in an array and loop through the array to get desired property.

object method

Run the code

this keyword in javascript object

this keyword indicates the parent object of the function. this keyword in javascript object represents the object itself. In simple words, this refers to the object which is holding the function.

In the example below the sum is a method in 'number' object which is using this keyword to access properties of its parent element.

Example

Run the code
points to remember Points to remember:
  1. Javascript object is a container which holds properties in form of key-value pair.
  2. There are 4 ways to create an object in javascript: object literal, object constructor, object.create method and object using class.
  3. Properties of a javascript object can be accessed in 2 different methods: using the dot operator and using a square bracket.
  4. this keyword inside a javascript the object refers to object itself.