JavaScript objects in depth.

Being a JavaScript developer, you might be aware of the fact that we can't build any large-scale app without dealing with Objects.

In JavaScript, Everything is an Object.

Lets, Deep dive into JavaScript Objects.

Object: Objects in JavaScript are nothing but a non-primitive type data structure. We can define an object using curly brackets and put key-value pairs separated by a comma in it.

EG:

const user = {
   name:"Hemendra",
   nickname:"Hemu",
   email:"hi@aamchora.space",
   city:"bhilwara"
}

CRUD operations on an object

Create

let student = {}; // an empty array

student.name = "Hemendra Khatik"; 
//important -> student["name"]="Hemendra Khatik" is also valid

student.branch = "CSE";
student.age = 25;

console.log(student); // will print the below structure
/*
{
   name:"Hemendra Khatik",
   branch:"CSE",
   age:25
}
*/

or all key values at once

let user = {
   name:"Hemendra",
   nickname:"Hemu",
   email:"hi@aamchora.space",
   city:"bhilwara"
}

Read

We use . operator to access the values of an object.

user.name; // to access the "Hemendra".
user.city; // to access the "bhilwara".
user.username; // will be undefined because it is not present in the user object.

We can also access properties of an object using square brackets.

user["name"];    // to access the "Hemendra".
user["city"];    // to access the "bhilwara".

Update

Update an object .

student.age = 21; // now age is changed from 25 to 21

Delete

Delete key from an object.

delete student.name; // to delete the name key from student object

Other Helpful methods

print the keys only from an object.

const user = {
   username:"aamchora",
   email:"hi@aamchora.space",
};

Object.keys(user);
/* 
Above expression returns an array containing 
keys only from an object ["username", "email"]
*/

print the values only from an object.

const user = {
   username:"aamchora",
   email:"hi@aamchora.space",
};

Object.values(user);
/* 
Above expression returns an array containing 
values only from an object ["aamchora", "hi@aamchora.space"]
*/

Freeze the JavaScript Object

const user = {
   username:"aamchora",
   email:"hi@aamchora.space",
};

Object.freeze(user);
/* 
Above expression freezes the object. 
It means we cannot add, remove or update its properties.
It will not throw any error unless you are in strict mode but
there will be no effect of value change on your object.
*/

user.username = "NewUserName"; // --> will not work
user.newKey = "xyz"; // --> will not work
delete user.email; // --> will not work

console.log(user);
/*
{
  username:"aamchora",
  email:"hi@aamchora.space",
}
*/

Cloning an object

You can not copy non-primitive type data structure as you copy primitive type data structure.

EG: Primitive type data structure.

let a = 10;
let b = a;
b= b + 1;
console.log(a) // 10
console.log(b) // 11

EG: Non-Primitive type data structure.

let obj = {
 a:10;
};
let obj2 = obj;
obj2.a = 12;

if(obj === obj2){
   console.log("obj and obj2 are same");
};
// above condition will be true 

console.log(obj) // {a:12}
console.log(obj2) // {a:12}

To understand this weird behavior of JavaScript, you can read below blog.

Click here to read

We can use Object.assign(targetObject, sourceObject) to clone an object.

const obj = { a: 1 };
const obj2 = Object.assign({}, obj);
obj2.a = 2;

if(obj === obj2){
   console.log("obj and obj2 are same");
}else{
 console.log("obj and obj2 are different");
};

// above condition will be false here 

console.log(obj); // { a: 1 }
console.log(obj2); // { a: 2 }

Shallow copy A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made.

Note: For Shallow copy we use Object.assign(targetObject, sourceObject).

Look at below example to understand Shallow copy.

const obj = {
 a:1
}

const obj2 = {
 b:2,
 c:obj // here c's value is a reference to the other object called obj
}

const copy = Object.assign({},obj2); // here obj2 is a source object 

// changing the copied object's value 
copy.c.a = 1111;


if(copy.c.a === obj.a){
   console.log("obj and obj2 are same");
}
// above condition will be true

Deep copy

A deep copy of an object is a copy whose properties do not share the same references(point to the same underlying values) as those of the source object from which the copy was made.

Note: For Deep copy we use JSON.parse(JSON.stringify(sourceObject)).

Look at below example to understand Deep copy.

const obj = {
 a:1
}

const obj2 = {
 b:2,
 c:obj // here c's value is a reference to the other object called obj
}

const copy = JSON.parse(JSON.stringify(obj2)) // here obj2 is a source object 

// changing the copied object's value 
copy.c.a = 1111;


if(copy.c.a === obj.a){
   console.log("obj and obj2 are same");
}else{
  console.log("obj and obj2 are not same");
}
// above condition will be false

follow me for more such blog posts.

Let me know if this blog was helpful.

JavaScript objects in depth.

Comments

More from this blog

What exactly Just in time (JIT) compilation is in JavaScript?

Polyfills and Transpilers in JavaScript.

How to upload file using ExpressJS(NodeJS) - Multer

Functions are Objects in JavaScript

What is throttling in JavaScript?

CRUD operations on an object

Other Helpful methods

Cloning an object

Command Palette

Comments

More from this blog

CRUD operations on an object

Other Helpful methods

Cloning an object