DEV Community: Sushil Choudhari

Difference between let , const and var in Javascript

Sushil Choudhari — Fri, 22 Jul 2022 17:57:35 +0000

In this blog, we will discuss the javascript keywords var, let and const.
After ES6 it's a bit confusing to understand this keyword and how they work inside the javascript.

Let's start the scope of let, var and const

Scope
let:- variables declared in let's are in the block scope

const:- variables declared in const are also in the block scope

var:- variable declared with var is in the functional scope

function abc () {
var a=10
}
console.log(a) // gives an error
for(let i = 0;i<2;i++){
    console.log( i ) // print 1 2 
}
console.log(i) // gives an error
{
const b=1;
console.log(b)// print 1
}
console.log(b)// gives an error

for var, it shows the error because its is functional scope so it cant accessible outside the function
for let inside the for loop block, it prints the output but outside the block, it gives an error as let is blocked scope
for const inside the curly braces, it prints the value but outside braces give an error as it is also a block scope

Let's check Reassigning values to let, const and var

var:- reassigning is allowed
let:- reassigning is allowed
const:- reassigning is not allowed

var a = 1 ;
a = 2;
console.log(a) // print 2
let l = 1; 
l = 2 ;
console.log(l) // print 2
const c = 1 ;
c=2
consol.log(c) // give an error

for var reassigning of value shows most recent value 2
for let also reassigning of value shows most recent value 2
for const reassigning of value gives an error as reassigning is not allowed

Let's check for Redeclaration of let, const and var

let:- Redeclaration is not allowed
var:- Redeclaration is allowed
const:- Redeclaration is not allowed

var v = 1;
var v = 20;
console.log(v);// prints 20
let i = 1;
let i = 20;
console.log(i); //  gives an error
const c = 1;
const c = 20;
console.log(c) // gives an error

for var, there is no error and prints the most recent declared value
for let and const there is an error as it does not allow the redeclaration of variable

These are some of the differences between let , const and var, hope you like it

Promise in Javascript

Sushil Choudhari — Fri, 22 Jul 2022 17:12:00 +0000

In this blog, I will try to cover the basics of promises in javascript.
Let's talk about the idea before we get into the promise in javascript code.

A promise in javascript is just like a promise in a real life, for example, a father promises his daughter to bring chocolates while returning from the office and then the promise has to redeem either it gets completed means the father brings the chocolates or is rejected father doesn't bring the chocolates.

What is a Promise? how we can create Promise

A promise is an object which gets produced after a response to an asynchronous call in javascript code. this lets asynchronous calls work and return as synchronous values like success or failure of promise.

A Promise has a three state...

pending state: Initial State
fulfilled state: Promise completed
rejected state: Promise Failed

Let's create a Promise in javascript
The promise is created by the Promise function which takes a callback function having two arguments resolve and reject.

let createPromise = new Promise((resolve,reject)=>{
    // promise defination
})

Now inside of this promise function, we need to define the actual promise so, let's take an example of a resolved promise i.e when the flag value is true the promise gets resolved and gives the message mentioned in resolve and if the value is false it gives the message mentioned in rejected.

let createdPromise = new Promise((resolve ,reject)=>{
let flag = true ;
    if(flag){
        resolve("Promise Created")
    }else{
        reject("Promise Not Created")
    }
})
 Promise Created // for flag = true
 Promise Not Created // for flag =false

so, how to get those values and print them on the console? , we need to interact with promise therefore we use .then() anything inside in it will going to run for resolve. To get the reject value we use .catch()

let flag = true ;
    if(flag){
        resolve("Promise Created")
    }else{
        reject("Promise Not Created")
    }
}).then((message) =>{
    console.log(message) //  prints Promise Created  ( if flag=true )
}).catch((message)=>{
    console.log(message) //  prints Promise Not Created  ( if flag=false )
})

It is similar to the callbacks but has a more organised and cleaner way.
Promises are very great to use when you need something that will take a long time to get some data from APIs and do something with data inside .then() or get an error inside .catch() if the promise is rejected.

how Promise replaces callback?
let's take an example of a callback and how it works as shown in the code

var flag = true
function getUserName(callback,errorCallback){
    if(flag){
        callback("UserName")
    }else{
        errorCallback(" failed to get UserName ")
    }
}
getUserName(  ("message")=>{
    console.log("success"+message) // print success Username (if flag = true) 
},(error)=>{
    console.log("rejected"+message) // print rejected failed to get Username (if flag = false)
} )

let's implement this into Promise

var flag = true
function getUserName(){
    return new Promise((resovle , reject )=>{
    if(flag){
        resolve("UserName")
    }else{
        reject(" failed to get UserName ")
    }
})  
}
getUserName().then(  ("message")=>{
    console.log("success"+message) // print success Username (if flag = true) 
}).catch((error)=>{
    console.log("rejected"+message) // print rejected failed to get Username (if flag = false)
} )

its a lot similar to callback but more readable and we can do Channing easily on a promise by using the .then() function

That's it for Promise hope you liked it

What is "This" keyword ? in Javascript

Sushil Choudhari — Fri, 22 Jul 2022 15:55:21 +0000

If you are a beginner in javascript you may encounter the "THIS" keyword. Initially, it is confusing to understand as it behaves differently for javascript language concerning other languages like java, c# etc.
In this blog, I will cover the basics of this keyword and how its works concerning different scenarios in javascript.

Before we get into "THIS", here is some prerequisite with which you have to be familiar with it.

As you know browser does not understand the deep level of javascript code so its needs to be converted into code which the browser will execute. Therefore, the browser's JS engine creates a special environment to execute the Advanced Javascript code called Execution Context.

Execution context:- The scope in which the lines of code are executed. The javascript has a stack of these execution contexts and the one on top of the stack is currently being executed.

There are two types of Execution Context

Global Execution Context:- It is the default Execution Context which means all Javascript code which is outside the function executed in this Context so, for each javascript file there can only be one Global Execution Context
Functional Execution Context:-It is a different type of Execution Context created when a function calls happen in Javascript code. There can be one or more Functional calls so, for each call different Functional Execution Contexts will get created.

Now we know how Code is executed, let's start with "THIS"
This simply means how the function has been called

By, the default execution context is global - which led to this referring to a global context which contains a window object means this points to a window object as you can see in the below code

function abc(){
       console.log(this)
}
abc() /* which will gives you 
      window object:-Window {window: Window, self: 
       Window, document: document,...} */

But, If strict mode is enabled for any function, then the value of this will be marked as undefined as in strict mode as you can see in the code

function abc(){
    'use strict';
       console.log(this)
}
abc()// which gives of "undefined" as a value of this

"this" with constructor function
when the function is called with a new keyword it creates a new instance every time it gets called, thus the value of this will refer to the most recent created instance as you can see in the code

function capitalOfCountry(country,capital){
    this.country = country ;
    this.capital = capital ;

    console.log(`${this.capital} is a capital of ${this.country } `)
}
new capitalOfCountry("India","New Delhi")// New Delhi is a capital of India 
new capitalOfCountry("Dhaka", "Bangladesh")//Bangladesh is a capital of Dhaka

"this" with the call, apply and bind
To set the custom value of this we use to call, apply and bind methods which come with every javascript function.
let's see Call and Apply first as the only difference between them are the second argument of apply is an array which contains arguments while in call arguments are passed individually.

function capitalOfCountry(country,capital){
    this.country = country ;
    this.capital = capital ;
    this.dispalyCapitalOfCountry = function() {
    console.log(`${this.capital} is a capital of ${this.country } `)
    }
}

let firstCountry = new capitalOfCountry("India","New Delhi")
firstCountry.displayCapitalOfCountry()//New Delhi is a capital of India
let secondCountry = new capitalOfCountry("Bangladesh","Dhaka")
secondCountry.displayCapitalOfCountry()//Dhaka is a capital of Bangladesh 

firstCountry.dispalyCapitalOfCountry.call(secondCountry)//Dhaka is a capital of Bangladesh

And with the bind method, will create the new function bind with the object specified in the bind( second country ) so this refers to secondCountry

function capitalOfCountry(country,capital){
    this.country = country ;
    this.capital = capital ;
    this.dispalyCapitalOfCountry = function() {
    console.log(`${this.capital} is a capital of ${this.country }`);
    }
}
let firstCountry = new capitalOfCountry("India","New Delhi")
firstCountry.dispalyCapitalOfCountry()//New Delhi is a capital of India
let secondCountry = new capitalOfCountry("dhaka","bangladesh")
secondCountry.dispalyCapitalOfCountry()//bangladesh is a capital of dhaka
let displaySecond = firstCountry.dispalyCapitalOfCountry.bind(secondCountry)
displaySecond()//bangladesh is a capital of dhaka

Summary

"this" simply means how the function is called in the javascript code
By default "this" refers to the window object which is present in a global context
with constructor function, it always refers to the newly created object
with the call, apply and Bind this will always refer to the values passed in that function.