Objects in javascript

In this blog, I will try to cover the concept of objects in JavaScript in detail. After reading this blog I am sure you will have a clear understanding of the topic. Let's get started…

Introduction.

Object in JavaScript is just a collection of key-value pairs. A key can be considered as a unique name for every value so that we can access them. Values can be either a primitive data type or they can be a function or another object. These key-value pairs are called properties or methods depending on the type of value.

Let’s take an example :

Here a person is an object. It has two properties called name, and age and one method called greets. Here "name", "age" and "greets" belongs to the person object and we can access them in the following way.

let person = {
    name : "Rahul",
    age : 20 ,
    greets : function (){
        console.log("Hi, I am Rahul")
    }
}

// Accessing the object
console.log(person.name)  //Output : "Rahul"
console.log(person.age)   //Output : 20
console.log(person.greets())    //Output : "Hi, I am Rahul"

We can also access objects using square bracket notation


// Accessing the object using square bracket notation
console.log(person.['name'])  //Output : "Rahul"
console.log(person.['age'])   //Output : 20
console.log(person.['greets']())    //Output : "Hi, I am Rahul"

Note : Square bracket notation is used in case we want to access properties dynamically

Creating objects in javaScript

There are various methods of creating an object but we will focus on the following three :

Direct method:

We have seen this in the above example

let person = {
    name : "Rahul",
    age : 20 ,
    greets : function (){
        console.log("Hi, I am Rahul")
    }
}

console.log(typeOf(person))

//Output : Object

Using a function constructor :

function Animal(name,type,voice){
const color = "something" ;
this.name = name ;
this.type = type ;
this.sound = function () {
    console.log(voice) ;
  }
}

// Creating an Object using constructor function
const Tiger = new Animal('Tiger','mammal','roar...')

console.log(Tiger)  //Output : Animal {name: "Tiger", type: "mammal", sound: ƒ}

console.log(Tiger.sound()) //Output : roar...

This is a dynamic way of creating JavaScript objects.

Animal() is just a simple js function that acts as a constructor for the Tiger object. Notice how the "this" keyword is used here, it is used to create properties and methods for the Tiger object.

The "new" keyword creates an empty object. "this" keyword in the Animal function references that empty object.

If we simply declare some variable in Animal() our code will not throw any error, but that variable will not become a property of the object.

For eg. in our case observe that colour is not a property of the Tiger object.

Arrow functions can’t be used as a function constructor

Always the first letter of the function constructor name should be capitalised according to the convention

The Arguments in Animal function can be used to pass values to objects dynamically.

This is a dynamic way of creating an object in js.

Using ES6 class concept:

class Animal {
  constructor(name,type,voice){
    this.name = name ;
       this.type = type ;
    this.sound = function () {
      console.log(voice) ;
    }
  }
}

// Let's create an object using Animal class
const Tiger = new Animal('Tiger','mammal','roar...')

console.log(Tiger) //Output : Animal {name: "Tiger", type: "mammal", sound: ƒ}
console.log(Tiger.sound()) // Output : roar...

Here we are creating a class named "Animal". All the properties and methods which we want to assign to the object are placed inside the class constructor.

The constructor receives arguments that we have passed while object creation.

A JavaScript class is declared with a PascalCase in contrast to other JavaScript data structures ie. the first letter in every word should be capitalized. Eg; class "AnimalKingdom"

Make sure you use you call super() method inside the constructor() method if the current object extends some other object, this is done so that we can use properties and method of the parent class.

The mutability of objects in javascript

Primitive data types like number, boolean, and string are Immutable whereas objects in js are mutable in nature. Mutability means that we can edit the values after it is assigned. Let’s look at a simple example that will make things clear.


let name1 = 'Rahul' ;
let name2 = name1 ;
name2 = 'Ramesh'
console.log(name1)  //Output : Rahul
console.log(name2)  //Output : Rahul

In the above code snippet variable name1 contains the string - "Rahul"

On the second line we are saying that assign value in name1 to name2. So here the value gets copied and if we change variable name2 then, name1 doesn’t get affected.

which is obvious

but objects don't exhibit such behavior,

let person1 = {
    name : 'Rahul' 
}

let person2 = person1 ;

// updating person2
person2.name = "Ramesh"

console.log(person1) // Output : {name: "Ramesh"}
console.log(person2)    // Output : {name: "Ramesh"}

// Why do this happen?

In the case of objects, the person1 variable holds the address to the memory location where the object data is stored and when we assign person1 to person2 this address gets copied into the person2 variable.

Therefore now making changes in a person2 will also affect person1 object.

Let's take one more example :

let person1 = {
    name : 'Rahul' 
}
let person2 = person1 ;

// Case 1
if(person1 ===  person2){
  console.log(true)
}
else{
  console.log(false)
}



let person3 = {
  name : 'Rahul'
}
let person4 = {
  name : 'Rahul'
}
// Case 2
if(person3 ===  person4){
  console.log(true)
}
else{
  console.log(false)
}

In case 1 answer will be true because both variables contain the same address and on the comparison, the answer will be true.

On the other hand case 2 output will be false. This is because even though person3 and person4 have the same content inside they are stored in different memory location and the above two variable only contains their addresses.

Now you must be wondering how to compare two objects. How to find whether objects received from two different sources have the same properties and methods?

Actually, there is no direct way because the variable stores the address to the memory locations and the content inside that memory location is not evaluated,

But don’t worry there is one hack though…

We can Convert the objects which we want to compare into string format using JSON.stringify() method. Store those values and compare them using the equality operator. And now the output will be true


const k1 = { fruit: 'Kiwi' };
const k2 = { fruit: 'kiwi' };

// Using JavaScript
if(JSON.stringify(k1) === JSON.stringify(k2)){
  console.log(true) ;
}
else{
  console.log(false) ;
}
// Output : True

Working with objects:

Here are some of the methods which can be useful while working with objects...

Object.create(): This method creates a new object, using an existing object as the blueprint.

  const person = {
    isHuman: false,
    printIntroduction: function() {
      console.log(`My name is ${this.name}.`);
    }
  };

  const me = Object.create(person);

  me.name = 'Rahul'; // "name" is a property set on "me", but not on "person"
  me.isHuman = true; // inherited properties can be overwritten

  me.printIntroduction();

Object.keys(): This method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.

  const object1 = {
    a: 'somestring',
    b: 42,
    c: false
  };

  console.log(Object.keys(object1));
  // expected output: Array ["a", "b", "c"]

Object.assign(): This method copies all enumerable own properties from one or more source objects to a target object. It returns the target object.

  const target = { a: 1, b: 2 };
  const source = { b: 4, c: 5 };

  //there can be multiple sources
  const returnedTarget = Object.assign(target, source);

  console.log(target);
  // expected output: Object { a: 1, b: 4, c: 5 }

  console.log(returnedTarget);
  // expected output: Object { a: 1, b: 4, c: 5 }

Object.freeze(): This method freezes an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, and existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed. freeze() returns the same object that was passed in.
Object.seal(): This method seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. Values of present properties can still be changed as long as they are writable.
```
  let person = {
      name : "Rahul",
      age : 20 ,
      greets : function (){
          console.log("Hi, I am Rahul")
      }
  }

  Object.seal(person) ;  // seals the object
  Object.freeze(person) ; // freezes the object
```
I hope you find this blog useful, let me know if you have any questions or suggestions. Feel free to DM me on Twitter - Link.

Abhijeet Nandvikar's Blog