JavaScript Objects

What are JavaScript Objects?

Objects are the basic building blocks for every object-oriented language. JavaScript being an object-oriented language, is no exception to this concept. With javascript being widely adopted due to its ability to provide dynamic behaviour to web pages, one should be aware of javascript and how to work with its objects. Objects in javascript are a group of different data types or objects put together as “key-value” pairs. The “key” part of the object is nothing but the object properties.

For example, let us consider we have an object “Student”, where its properties are: first_name, last_name, age, student_id, class, etc.

The javascript object representation for this student object would be represented as follows:

Code:

var student = { first_name : 'Anamika',
last_name : 'Rai',
age : 14,
student_id : 20,
class : 'VIII D'
}

Here note that the properties first_name, last_name, and class contain values of String data type, whereas age and student_id are of the number data type.

How to Create an Object in JavaScript?

In order to create objects, javascript provides a few options using which one can create objects as per one’s need.

1. Making Use of Object Initializer Syntax

Object initializer syntax is a list of property names (keys) along with their respective values, enclosed within curly braces ({…}). In the example above,e we have created the object “student” using the object initializer syntax.

The syntax is as follows:

var object = { prop_1 : val_1,
prop_2 : val_2,
… … …
prop_n: val_n}

Here the properties are either of a primitive data type (string, number, Boolean, null and undefined are the primitive data types in javascript) or another object.

Example:

Code:

var student = { first_name : 'Anamika',
last_name : 'Rai',
age : 14,
student_id : 20,
class : 'VIII D'
parents : {father : 'Mrinal Rai', mother : 'Payal Rai'}
}

Note, here, “parents” property is of type object. It consists of two sub-properties, namely, father and mother,r respectively.

2. Making Use of Constructor Function

In this case, firstly, define a constructor function with its respective properties, following which create its object using the “new” keyword. Then assign the values to this newly created object.

Example:

Let us consider a constructor function, say, Student:

Code:

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

Note that the constructor name should start with an upper case as per the naming convention.

Now, let’s create the object using the “new” keyword.

Code:

var myStudent = new Student('Anita Rai', 14, 'female');

Also, note that here we are only passing the values to the constructor. The constructor is assigning these values to the respective properties using the “this” keyword. The current object is being referred to by using the “this” keyword.

3. Making Use of the Instance of an Object

Alternatively, one could make use of the object instance/ object constructor to create and initialize it as follows:

Code:

var student = new Object();
student.name = "Anita Rai";
student.age = 14;
student.gender = "female";

4. Making Use of Create() Method in Object Class

One could also create objects by using the create() method provided by the object class. The create method takes in an object prototype as a parameter. Due to this, one could avoid having to write a constructor function.

Example:

Code:

var student = { name : "Anamika Rai", age : 14, gender : "female" }

Here “student” is our prototype object. Now, using this, let’s create another object:

Code:

var student_1 = object.create(student);

Here, the student_1 object is created using the student prototype. If one needs to change any of the values to this newly created object, then that is done as follows:

Code:

Student_1.name = "Ananya Gupta";

Now, the student_1 object has similar property values as that of the student object except for the property “name”.

How to Access Objects in JavaScript?

Now that the object is created, the next thing one needs to know is how do we access it? Well, javascript provides two ways using which one could access the object:

1. Using an Object Instance

Here the object instance is used to access its properties.

Syntax:

object.property

Example:

Consider we have an object student defined

Code:

var student = { name : "Anamika Rai", age : 14, gender : "female" }

Now to access the object and its properties, let’s print it to console:

Code:

console.log ("Student" + student.name + "is" + student.age + "years old.");
// output: Student Anamika Rai is 14 years old.

2. Using Square Brackets

The object property is placed within square brackets after the object itself.

Syntax:

object['property']

Example:

Accessing the above student object using square brackets

Code:

console.log ("Student" + student['name'] + "is" + student['age '] + "years old.");
// output: Student Anamika Rai is 14 years old.

JavaScript Object Methods

Few mostly used javascript methods are as follows:

• create(): As we have already seen above, this method is used to create javascript objects from a prototype object.
• is(): This method takes in a second object as a parameter and determines if both the objects are equal and return a Boolean value. That is, if both objects are equal, then “true” is returned, else “false”.
• keys(): The keys() method takes in the javascript object as a parameter and returns an array of its properties.
• values(): Similarly, the values method takes in a javascript object as a parameter and returns an array of its values.
• entries(): This method also takes in a javascript object as a parameter and returns an array containing another array of both key-value pairs. Example: Let’s consider our “student” object once more.

Code:

console.log(Object.entries(student));
//output: Array [Array ["name", "Anamika Rai"], Array ["age", 14], Array ["gender", "female"]]

Conclusion

This article gives an idea of what exactly javascript objects are and the various ways one could create them. It also discusses the properties that these objects possess and how one could access them in different ways. Finally, the most commonly used methods one needs to be aware of to work with javascript objects.