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 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.
Popular Course in this category
var object = { prop_1 : val_1}
Here the properties are either of a primitive data type (string, number, Boolean,
null
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"]]
