# Everything you need to know about Objects in JavaScript

By [Parshvi](https://paragraph.com/@parshvi) · 2023-02-19

---

![](https://storage.googleapis.com/papyrus_images/b9a521099ce68e306565b9b1117ff210b93b6798434cfda6cc7070c2d5a5900c.webp)

Introduction image

Introduction
------------

Object is created with curly braces — {…} with optional list of properties. A property is a key value pair.

key is always a string type but value can be anything.

Behind the scene object work as a cabinet and each property as a file.

![](https://storage.googleapis.com/papyrus_images/2a61191eac873f874568db52d3c3c355d69cd57cde2cf271755eb0818b542c7b.webp)

Create An Object
----------------

There are two ways to create an object:

1.  Object literals
    

    let user = new Object()
    

2\. using curly braces

    let user ={}
    

Add properties to your Object
-----------------------------

There are two ways you can add properties to your object

Dot operator
------------

For simple property addition you can use ‘.’ operator.

If you have a valid variable identifiers like no space, dose not start with a digit, does not include a special character

    user.name ="John"
    

Square brackets
---------------

Square brackets are used to add more dynamic properties and special properties.

They are more powerful but more cumbersome to write.

    let key = 'surname'; 
    user[key] = 'Smith'; 
    // user ={name:'John', surname:'Smith'}  
    // second scenario user['address_one']='address'
    

\*\*Note: \*\*use key in quotes only when there is a space in the key name “surname full”

    user={ name:'John' "surname new":"Smith" } 
    

Limitation to Properties name
-----------------------------

There is no limitation to the property name you can name your key even — \*\*for, let , return. \*\*If your key name is a number then it will be converted to string 0 → ‘0’.Only you can not name your key — ‘**proto**’

How to check if a property exist in an object
---------------------------------------------

in
--

    console.log("name" in user) // true
    

Getting undefined
-----------------

    console.log(user.age) // undefined
    

if property is undefined then it can assume that the property does not exist The problem can be raised when some great person does this

    user.age = undefined;
    

P.S = Don’t be that person

How to iterate through an Object
--------------------------------

for in
------

    let user ={ name :"john", surname :"smith" } 
    for(let key in user){  
      console.log(user[key]) 
    }
    

How Object’s keys are ordered?
------------------------------

Integer properties will ordered in ascending format where as others are ordered in their way they are created.

What is Object reference
------------------------

So whenever you assign any variable value to the object they will denote the same object so basically the reference is assigned.

It’s like two keys to same cupboard.

![](https://storage.googleapis.com/papyrus_images/eb11bbc2bb6c05e3641da780642dec4fd8c8524c67478363913ce0b030abecf2.webp)

Shallow copy of an object

How to actually copy any object
-------------------------------

Objects can be copied by following ways:

Using for loop
--------------

    let user. ={name : "John", surname :"Smith"};
    let clone ={};
     for (let key in user){  
      clone[key] = user[key] 
    }
    

Spread operator
---------------

    let user. ={name : "John", surname :"Smith"};
     let clone ={... user};
    

Object.assign
-------------

You can use Object.assign(objectThatHaveToBeCopied, objectThatWillCopyYourContent)

    let user. ={name : "John", surname :"Smith"}
     let clone ={}; 
    Object.assign(user,clone)
    

**Note**: _The problem with object.assign is that it won’t be able to copy the nested object_.

    Nested Object 
     let obj ={ 
      name:"John",
       surname:"Smith",
       address: { 
         street:"Baker Street", 
         city:"London",  
         country :"UK" 
       }
     }
    

So Object.assign clone will refer to address object instead of creating the copy.

StructredClone
--------------

To avoid the previous problem we use structuredClone

    let obj ={ 
      name:"John",
      surname:"Smith",
       address: { 
       street:"Baker Street",
        city:"London", 
         country :"UK" 
         }
       } 
    let clone = StructedClone(obj)
    

This will also fail if object has function property. In that case put your JS hat and write a function to create a deep copy of the object.

How to delete any property of any object
----------------------------------------

delete
------

    delete user.name
    

**Note:** It will not delete the whole object.

How objects are stored in the memory
------------------------------------

Reachability
------------

So if any object, function is reachable means is being accessed either in running a function or declared globally or even is being refer to by some other object then it is reachable and called roots.If the object is reachable then it is it will stored in the memory if the reference is lost or is not being used ever it will be removed . This process of removing the unused objects is called **Garbage Collection.**

*   Various methods for optimisation of garbage collection
    

1.  **Generational collection**: So new object are checked as they are added as object has a very short life span and they do their work and die.
    
2.  **Incremental Collection** : So big objects are broken up to small and then process
    
3.  **Idle-time Collection**: Run only when your CPU is idle.
    

How ‘this’ works for object
---------------------------

Object can have functions called methods as their properties and these methods want to access the properties like string and number.

    let user ={ 
      name:'John', 
      sayHi(){ console.log(`Hi I am ${this.name}`); 
      } 
    }
    

Like in the above example and you can access it by this.

**Note:** t**his** is not bound means **this** will try to access next scope if use strict is not used\]

N**ote :** Arrow function does not have this.

**How to create similar object multiple times**
-----------------------------------------------

You can create similar objects using constructor.

Conventions about constructors are their name starts with capital letter.They are called using new and basically this is assigned to the object and properties are added.

    function User(name){
      this.name = name; 
     this.person = true; 
    } 
    const firstPerson = new User('jon')
    

What happens when you call without new
--------------------------------------

    function User(name){
       this.name = name; 
       this.person = true; 
    } 
    const firstPerson  = User('Draco') // undefined
     const secondPerson = new User('Jon')//{name:'Jon', person:true}
    

If constructor don’t have return statement then you can call it without parenthesis.

    function User(){ 
     this.name = 'Jon'; 
     this.person = true; 
    } 
    const firstPerson = new User // same as new User()
    

How to handle non existent object property
------------------------------------------

We can use **chaining**

    obj.props?.value 
    // if props is present then it will return the value 
    //if not then undefined
     obj.props?.[value] 
    // Same thing like above obj.method?.() 
    // if method is present then rin the method or else return undefined
    

Properties and Flags in Objects
-------------------------------

There are three property flags present in any object:

1.  Writable
    
2.  Enumerable
    
3.  Confirgurable
    

These properties are not visible about any key in an object.

To see these property we need to use

    let user ={name:'John'}
    const descriptor = Object.getOwnPropertyDescriptor(user,'name');
    //
    {
      "value": "John",
      "writable": true,
      "enumerable": true,
      "configurable": true
    }
    

If we want to change these default value then you can create property using defineProperty key word

    let user ={}
    Object.defineProperty(user,'name',{value:'Jon',writable:true})
    const descriptor = Object.getOwnPropertyDescriptor(user,"name")
    //{
      "value": "John",
      "writable": true,
      "enumerable": false,
      "configurable": false
    //}
    

How to make an object non writable
----------------------------------

    let user ={}
    Object.defineProperty(user,'name',{value:'Jon',writable: false})
    const descriptor = Object.getOwnPropertyDescriptor(user,"name")
    //{
      "value": "John",
      "writable": true,
      "enumerable": false,
      "configurable": false
    //}
    user.name ='Pete' // give error if strict mode is there otherwise no error
    

How to make an object Non-enumerable
------------------------------------

Before that we need to understand what non- enumerable means

    let user ={
     name:'jon',
     sayHi: function(){
     console.log(`Hi ${this.name}`);
    }
    }
    

if we want to run the loop as in then both name and sayHi will be iterated and to avoid that we can use

    Object.defineProperty(user,'sayHi',{enumerable: false})
    Object.keys(user) //[name]
    

How to make an object non-configurable
--------------------------------------

There could be a condition where we want to make sure that an object cannot be changed like Math.PI we don’t want someone to do Math.PI = 3.

Once an object is non-configurable i.e {configurable:false} then it cannot be reverted back.

You cannot change its value neither can make their other values like writable and enumerable

only if writable → true will be changed to false

How to define multiple properties at once
-----------------------------------------

    let user ={}
    user.defineProperties(user,
    {name:{value:'Jon',writable:true},{surname:{value:'Snow' ennumerable: true}}
    )
    

How to clone an object
----------------------

    let clone = Object.defineProperties({},Object.getOwnPropertyDescriptors(obj))
    

This is the better way clone any object as it copy descriptor as well.

How to seal an object globally
------------------------------

Sealing object means you cannot add new properties or delete existing properties.

Object.preventExtensions(obj)
-----------------------------

you cannot add any new property to object.

To check if an object is extension able we can use Object.isExtensible(obj)

Object.seal(obj)
----------------

Neither can add nor can delete any properties.

To check if the object is sealed Object.isSealed(obj)

Object.freeze(obj)
------------------

Neither can add , change nor delete.

To check if object is frozen use Object.isFrozen(obj)

How to write getter and setter method for an object
---------------------------------------------------

Setter and getter methods give us the flexibility to add property based on certain condition.

    let user ={
     name:'Jon',
    
      get sayHi(){
     console.log(`Hi ${this.name}`)
    },
    set sayHi(value){
     if(value.trim().length<2){
     console.log('name is too short');
     return
    }
    this.name = value;
    }
    }
    user.sayHi // Hi Jon
    user.sayHi = 'm' // name is too short
    user.sayHi = 'Mary'
    user.sayHi // Hi Mary
    

This is the comprehensive note about object which can help you to understand the basics of it.

Hope you enjoy this article.

---

*Originally published on [Parshvi](https://paragraph.com/@parshvi/everything-you-need-to-know-about-objects-in-javascript)*