DEV Community: praveenreddy1798

When to use call, apply, bind in Javascript?

praveenreddy1798 — Thu, 31 Dec 2020 13:04:08 +0000

In this article, we are going to look into the application of call,apply and bind in javascript with examples.

Firstly, to understand call, apply and bind we need to understand about this keyword and its usage in javascript. So let's look into it in detail.

What is this in javascript ?

The Javascript this basically refers to the object it belongs to.

Now let's look at different cases to understand more about it.

1. this in global scope

If we use this keyword globally then it will refer to the the Window object. Window object is nothing but a open window in the browser.

Let's look into few examples to understand about it.

var x = this;
console.log(x) // Window Object

this.chair="red"
console.log(window.chair) //"red"

In the above examples we can see that the this used in global scope refers to the Window Object.

2. this inside a Object method

In an object method, this will refer to the "owner" of the method.

Now let's look into an example to understand about it.

let myRoom={
chair:"red chair",
cleanChair(){
chair="blue chair"
console.log(this.chair)
}
}
myRoom.cleanChair();//"red chair"

In the above example we can clearly see how this inside a method will always refer to the owner of the method.
Though cleanChair() method has a chair of its own, it will not refer to it but will refer to the owner of the method which is myRoom and that's why returns "red chair".

3. this inside a function(Default)

In a JavaScript function, the owner of the function will be the default binding for this. So, when a function is used in default mode, this refers to the Global object [object Window]

Let's look into an example to understand about it.

this.chair="red"
 let room = function(){
 console.log(this.chair) //red
 }
 room();

In the above example we can see that this when used with a function in default mode refers to a Global Object.

4. this inside a function(Strict)

JavaScript strict mode does not allow default binding of this. So, when used in a function, in strict mode, this is undefined.

Let us look into an example to understand about it.

'use strict'
this.chair="red"
let room = function(){
console.log(this.chair) 
}
room();//cannot read property chair of undefined

In the above example we can see that this inside a function in strict mode gives an error of undefined because the function doesn't know which one to refer and then to immediately invoke the value of this.

In situations like this we use call, apply and bind to give proper context of this

You can use call() /apply() to invoke the function immediately. bind() returns a bound function which when executed later, will have the correct context ("this") for calling the original function. So bind() can be used when the function needs to be called later in certain events when it's useful.

Let's look at how each of them solves the issue with an example.

call()

The call() method is a predefined JavaScript method which is used to invoke (call) a method with an owner object as an argument (parameter).

 'use strict'
this.chair="red"
let room = function(a,b){
console.log(`${this.chair} ${a} ${b}`) 
}
room.call(this,'blue','green')//"red blue green"

In the above example we can see that call() method immediately invokes this and allows you to pass in arguments one by one using commas therby solving the issue we saw earlier.

apply

The apply() method is similar to the call() method. The only difference is that the apply() method takes in arguments as an array.

Let's look into an example to understand more about it.

 'use strict'
this.chair="red"
let room = function(a,b){
console.log(`${this.chair} ${a} ${b}`) 
}
room.apply(this,['blue','green'])//"red blue green"

In the above example we can see that apply() method immediately invokes this and allows you to pass in arguments as an array one by one using commas therby solving the issue we saw earlier of using this inside a function.

bind

The Bind method returns a new function, allowing you to pass in this and any number of arguments. Use it when you want that function to later be called with a certain context like events.

Let us look in an example to understand more about it in detail.

this.chair="red"
let room = function(a,b){
console.log(`${this.chair} ${a} ${b}`) 
}

const bindRoom=room.bind(this)('blue','green') //"red blue green"

In the above code sample for bind() we are returning a bindRoom function with the context of this which will be invoked later.

If you liked this article, give it a ❤ 🦄 and Save it for later.

Promises in Javascript

praveenreddy1798 — Mon, 28 Dec 2020 17:31:21 +0000

What is a Promise ?

A promise in JavaScript is just like a promise we make in our real lives.

Whenever we make a promise to someone or to ourselves we usually refer to an event that is going to occur in the future. Any promise that is made has three possible states:

Pending till the time of event
Fulfilled at the right time
Rejected

Promises in Javascript are used to handle asynchronous events and asynchronous http requests.
When we define a promise in JavaScript, it acts in a similar manner to a promise made in real life and can be:

pending - result is undefined
fulfilled - result is a value
rejected - result is an error object

For example, when we request a particular data from the server with the help of a promise, it will be in pending mode until we receive the data.

If we happen to get the right information from the server, the Promise will be resolved. But if we fail to get the required information, then the Promise will be in rejected mode.

Creating a Promise in Javascript

Create a promise object using a constructor

var promise = new Promise();

Passing a function with two parameters to depict success(resolve) and for failure(reject)

var promise = new Promise(function(resolve, reject){
//condition
});

Defining a condition. If a condition is met the the promise is resolved otherwise it is rejected.

var promise = new Promise(function(resolve, reject){

if(condition) //condition is true
{
resolve();
}
else //condition is false
{ 
reject();
}
});

Using a Promise in Javascript

Promise.then()

It takes two arguments, a callback for success and another for failure.

.then() can be used to handle both resolve and reject

Firstly, let's look at how .then() can handle resolve with an example

 var promise = new Promise(function(resolve, reject){
let x = 1;
if(x>0){
resolve('promise accepted')
}
else {
reject('promise rejected')
}
}
) 

promise.then(function(message){
console.log(message) // "promise accepted"
})

promise.catch(function(message){
console.log(message) 
})

In the above example we can see how the promise is resolved when the condition x>0 is met and resolved message "promise accepted" is available in .then()

Now let's look at how .then() can handle reject with an example

var promise = new Promise(function(resolve,reject){
let x = 1;
if(x>0){
reject('promise rejected')
}
else {
resolve('promise accepted')
}
}
)
promise.then(function(message){
console.log(message)  // "promise rejected"
})
promise.catch(function(message){
console.log(message)
})

In the above example we can see how the promise is rejected when the condition x>0 is met and rejected message "promise rejected" is available in .then()

Promise.catch()

.catch() can be used to handle errors and reject

Firstly, let's look at how .then() can handle reject with an example

 var promise = new Promise(function(resolve,reject){
let x = 0;
if(x>1){
resolve('promise accepted')
}
else {
reject('promise rejected')
}
}
)

promise.then(function(message){
console.log(message) 
})
promise.catch(function(message){
console.log(message) // "promise rejected"
})

In the above example we can see how the promise is rejected when the condition x>0 is not met and rejected message "promise rejected" is available in .catch()

Now let's look at how .catch() can handle errors with an example

var promise = new Promise(function(resolve,reject){

if(x>1){
resolve('promise accepted')
}
else {
reject('promise rejected')
}
}
)

promise.then(function(message){
console.log(message) 
})
promise.catch(function(message){
console.log(message) // [object Error] { ... }
})

In the above example we can see that there is a error because x is not defined and therefore it fails to check if the condition is true or false resulting in throwing a error message which is caught in the .catch() block.

Promises.all()

Promise.all() is a method that is very useful when we have multiple promises and we have to individually wait for each promise to complete before the next promise can be executed.

Promise.all() takes in a array of promises as input and resolves a single promise upon resolving all the promise objects in the array.
Even if one of promise object get rejected, the entire promise gets rejected.

Let's look into an example to understand more about it.

let cleanRoom = function(){
return new Promise(function(resolve,reject){
resolve('room cleaned')
})
}

let removeGarbage = function(){
return new Promise(function(resolve,reject){
resolve('garbage removed')
})
}

Promise.all([cleanRoom(),removeGarbage()])
.then(function(){
console.log('work finished') // "work finished"
})
.catch(function(){
console.log('work not finished')
})

In the above example we can see that the promise is resolved with a output as "work finished" because the individual promise methods cleanRoom() and removeGarbage() are resolved

Now let's see what happens when one of the promise methods in the array are rejected

let cleanRoom = function(){
return new Promise(function(resolve,reject){
resolve('room cleaned')
})
}

let removeGarbage = function(){
return new Promise(function(resolve,reject){
reject('garbage not removed')
})
}

Promise.all([cleanRoom(),removeGarbage()])
.then(function(){
console.log('work finished') 
})
.catch(function(){
console.log('work not finished')//" work not finished"
})

In the above example we can see that only removeGarbage() promise method was rejected and it resulted in the entire promise to reject with a output "work not finished" which is caught in the catch method.

Promise.race()

It is used when we need to return the result of the first resolved promise or rejected promise as soon as it is available.

The Promise.race() method returns a promise that fulfills or rejects as soon as any one of the promises in the input array of promises resolves or rejects.

Let's look into an example to understand about it.

let cleanRoom = function(){
return new Promise(function(resolve,reject){
resolve('room cleaned')
})
}

let removeGarbage = function(){
return new Promise(function(resolve,reject){
reject('garbage removed')
})
}

Promise.race([cleanRoom(),removeGarbage()])
.then(function(){
console.log('one of them finished') // "one of them finished"
})

.catch(function(){
console.log('one of them not finished')
})

In the above example we can see that it checks only for the first promise method cleanRoom() and because it is resolved, the entire promise resolves giving an output "one of them finished" without even checking the removeGarbage() method thereby completing tasks faster.

If you liked this article, give it a ❤ 🦄 and Save it for later.

Mastering Let, Var and Const in Javascript

praveenreddy1798 — Sun, 27 Dec 2020 16:30:17 +0000

In this post let's dive in and explore the key functionalities and differences between let, var and const with code examples.

Firstly, before we look into the key features and differences, let's try to understand what they are at the most basic level.

In order to use a variable in JavaScript, we have to declare that variable. Before ES6, we had only var by which we used to declare variables. From ES6 onwards let and const were introduced to solve few problems that existed with var and to make our code less susceptible to errors.

We will look at the differences of var, let and const in four main aspects:

Scope
Redeclaring
Redefining
Hoisting

Var

Before the introduction of ES6, var declarations were used for all kinds of variable declarations. But there are certain issues associated with variables declared with var, which led to the introduction of new ways to declare variables in Javascript. First, let's understand var before we move on to their issues.

1. Scope

Scope basically means where the variables declared are available for use.

var is function-scoped
So what it basically means is that if a variable is declared within a function, then it is available and can be accessed only within that function.

Let's look into an example to understand about it.

function demo() {
        var item = "hello";
        console.log(item) //"hello"
    }
    demo();
    console.log(item)//Uncaught ReferenceError: item is not defined

In the above example we can see that the value of item is available only within the function and returns a error if it is tried to access outside the function.

Now let's see what happens if var is declared outside a function.

var is global-scoped
So what it basically means is that if a variable with var is declared outside the function then that variable is available for use anywhere in the entire window.

Let's look into an example to understand about it.

var item = "hello";
    function demo() { 
        console.log(item) //"hello"
    }
    demo();
    console.log(item)//"hello"

In the above example we can see that the value of item can be accessed anywhere in the entire window.

2. Redeclaring

var can be Redeclared
The variables that are declared using var can be declared again and again using var anywhere in the program.

Let's look into an example to understand about it.

var item = "pizza"
    console.log(item) //"pizza"
    var item ="burger"
    console.log(item) //"burger"

In the above example we can understand that redeclaration of var is accepted and it doesn't throw any errors.

3. Redefining

var can be Redefined
The variables that are declared using var can be assigned again and again with different values anywhere in the program.

Let's look into a example to understand about it.

var item = "pizza"
    console.log(item) //"pizza" 
    item="burger"
    console.log(item) //"burger"

In the above example we can understand that redefinition of var is accepted and it doesn't throw any errors.

4. Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

So let's look into an example to understand about it.

console.log(item) //undefined
 var item ="pizza"

The above code is interpreted as:

var item
 console.log(item) //undefined
 var item = "pizza"

So var variables are hoisted at the top of their scope and they are initialized with a value of undefined.

Problems of Var

Let's look into the problems with var that led to the emergence of let and var declaration in javascript.

Let's look into an example to understand more about it.

 var item ="pizza"
    var price=100

    if(price>50){
    var item = "burger"
    console.log(item) //"burger"
    }

    console.log(item) //"burger"

In the above example we can see that initially the item is "pizza" and the price is 100. If the price is greater than 50 then the item is redeclared as "burger".But what happens after the if statement is the main problem. If you want the item value to change only inside the if statement to "burger" and remain as "pizza" outside then it is not possible because var declaration globally redefines all the values declared with it to the newest redefinition made. That's why the value of item outside the if statement is "burger".

If you have used item in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of problems to your code. This is why let and const are necessary.

Let

let is now preferred for variable declaration as it not only comes as an improvement to var declarations. It also solves the problem with var that we just looked into. Let's look into it in detail.

1. Scope

let is block-scoped
A block is a chunk of code bounded by {}. Anything within curly braces is a block.
So what it basically means is that if a variable is declared with let within a block, then it is available and can be accessed only within that block.

Let's look into an example to understand about it.

 let item ="pizza"
    if(true){
    let item = "burger"
    console.log(item) //"burger"
    }
    console.log(item) //"pizza"

In the above example we see that item outside its block (the curly braces where it was defined) returns "pizza" whereas within the block returns "burger". This is because let variables are block scoped .

2. Redeclaring

let cannot be Redeclared
The variables that are declared using let cannot be declared again using let in the same block.

Let's look into an example to understand about it.

let item = "pizza"
let item= "burger"
console.log(item) //Uncaught SyntaxError: Identifier 'item' has already been declared

In the above example we can understand that redeclaration of let in the same block is not accepted and it throws Identifier 'item' has already been declared error.

3. Redefining

let can be Redefined
The variables that are declared using let can be assigned again and again with different values in the same block.

Let's look into a example to understand about it.

let item = "pizza"
    console.log(item) //"pizza" 
    item="burger"
    console.log(item) //"burger"

In the above example we can understand that redefinition of let is accepted and it doesn't throw any errors.

4. Hoisting

So let's look into an example to understand about it.

console.log(item) //Uncaught ReferenceError: Cannot access 'item' before initialization"
let item ="pizza"

Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const

Variables declared with the const maintain constant values.

1. Scope

const is block-scoped
Like let declarations, const declarations can only be accessed within the block they were declared.

Let's look into an example to understand about it.

 const item ="pizza"
    if(true){
    const item = "burger"
    console.log(item) //"burger"
    }
    console.log(item) //"pizza"

2. Redeclaring

const cannot be Redeclared
The variables that are declared using const cannot be declared again using const in the same block.

Let's look into an example to understand about it.

const item = "pizza"
const item= "burger"
console.log(item) //Uncaught SyntaxError: Identifier 'item' has already been declared

In the above example we can understand that redeclaration of const in the same block is not accepted and it throws Identifier 'item' has already been declared error.

3. Redefining

const cannot be Redefined
The variables that are declared using const cannot be assigned again and again with different values in the same block.

Let's look into a example to understand about it.

const item = "pizza"
    console.log(item) //"pizza" 
    item="burger"
    console.log(item) //Uncaught TypeError: Assignment to constant variable

In the above example we can understand that redefinition of const is not accepted and it throws an error.

4. Hoisting

So let's look into an example to understand about it.

console.log(item) //Uncaught ReferenceError: Cannot access 'item' before initialization"
const item ="pizza"

Just like let, const declarations are hoisted to the top but are not initialized.

If you liked this article, give it a ❤ 🦄 and Save it for later.