Javascript Objects

A javaScript object is an entity having properties and method. For example: Bike, pen, car, table, glass, laptop etc.

JavaScript is an object-based language. Everything is an object in JavaScript.

  • JavaScript is template based not class based. Here, we do not create the class to get the object. But, we direct create the objects.
  • Objects in Javascript are basically data structures for storing and manipulating data. They help you structure your data and provides methods (or functions) for manipulating the data stored at any given time within your application. There are methods for creating them, adding properties, deleting properties etc.
  • JavaScript provides several object methods that can be used to manipulate that data the way you want it.
  • In other words, objects in JavaScript can be defined as an un-ordered collection of related data, of primitive or reference types, in the form of “key: value” pairs. These object keys can be functions  or variables and are called methods and properties, respectively, in the context of an object.

So, in conclusion, though not the only data structure available in JavaScript, objects are a major (& very important) data structure when building applications in JavaScript. We almost can’t ignore them.

A good example usage of objects:

Lets say we are creating a class attendance app. You can categorize your data and structure them in objects like so;

const attendance = { 
  name: john, 
  timeIn: '3pm', 
  timeOut: '9pm' 
} 

Accessing Object Properties

We can access an object properties or keys in two ways:

myObjName.propertyName
or
myObjName["propertyName"]

Creating Objects in JavaScript

There are 3 ways to initialize an objects.

By object literal

The syntax for creating an object using object literal is given below:

object={property1:value1,property2:value2.....propertyN:valueN}  

As we can see above, property and value are separated by : (colon).

Let’s see by simple example of creating an object in JavaScript.

Input:-
<script>  
    student={id:97,name:"Ram Kumar",subject:"science"}  
    document.write(student.id+" "+ student.name+" "+ student. subject);  
</script>

Output:-

By creating instance of Object directly (using new keyword)

The syntax to create an object directly is given below:

var myObj=new Object();  
Input:-
<script>
   var student=new Object();  
   student.id=98;  
   student.name="Ravi Malik";  
   student.subject="maths";  
   document.write(student.id+" "+ student.name+" "+ student. subject);  
</script>

Output:-

By using an object constructor (using new keyword)

Now, we need to create a function with arguments or parameters. Each argument value can be assigned in the current object by using “this” keyword.

The this keyword will refers to the current object.

The example of creating an object by object constructor is given below.

Input:-
<script>
   function student(id,name,subject){  
            this.id=id;  
            this.name=name;  
            this.subject = subject;  
         }  
         stu=new student(103,"Amit Singh","chemistry");  
         
         document.write(stu.id+" "+ stu.name+" "+ stu. subject);  
</script>

Output:-


Defining method in JavaScript Object

Here, we can define methods in JavaScript object. But before writing method, we need to add property in the function with same name as method.

Below is the example of defining method in object –

Input:-
<script>
   function student(id,name,subject){  
            this.id=id;  
            this.name=name;  
            this.subject=subject;  
            
            this.changeSubject=changeSubject;  
            function changeSubject(otherSubject){  
            this.subject=otherSubject;  
         }  
         }  
         stu=new student(104,"Mahesh Kumar","science");  
         document.write(stu.id+" " + stu.name + " " + stu.subject);  
         stu.changeSubject("maths");  
         document.write("<br>"+stu.id+" " + stu.name + " " + stu.subject);  
</script>

Output:-


JavaScript Object Methods

The different methods for an Object are given below:

S.NoMethodsDescription
1Object.assign()Used to copy enumerable and own properties from a source object to a target object
2Object.create()Used to create a new object with the specified prototype object and properties.
3Object.defineProperty()Used to describe some behavioral attributes of the property.
4Object.defineProperties()Used to create or configure multiple object properties.
5Object.entries()Returns an array with arrays of the key, value pairs.
6Object.freeze()Prevents existing properties from being removed.
7Object.getOwnPropertyDescriptor()Returns a property descriptor for the specified property of the specified object.
8Object.getOwnPropertyDescriptors()Returns all own property descriptors of a given object.
9Object.getOwnPropertyNames()Returns an array of all properties (enumerable or not) found.
10Object.getOwnPropertySymbols()Returns an array of all own symbol key properties.
11Object.getPrototypeOf()Returns the prototype of the specified object.
12Object.is()This method determines whether two values are the same value.
13Object.isExtensible()This method determines if an object is extensible
14Object.isFrozen()This method determines if an object was frozen.
15Object.isSealed()This method determines if an object is sealed.
16Object.keys()Returns an array of a given object’s own property names.
17Object.preventExtensions()Used to prevent any extensions of an object.
18Object.seal()Prevents new properties from being added and marks all existing properties as non-configurable.
19Object.setPrototypeOf()This method sets the prototype of a specified object to another object.
20Object.values()Returns an array of values.

Do Not Declare Strings, Numbers, and Booleans as Objects!

When a JavaScript variable is defined with the keyword “new”, the variable is created as an object:

var a = new String();        // Declares a as a String object
var b = new Number();        // Declares b as a Number object
var c = new Boolean();       // Declares c as a Boolean object

Note:- Avoid String, Number, and Boolean objects. They complicate your code and slow down execution speed.