Learn call, apply and bind in javascript | by Bytecode pandit

Hi! Today I'll talk about the important topic call, apply, and bind. These javascript methods allow us to change the value of this for a given function. And I will try to make these concepts as simple as that with appropriate examples.




Function.prototype.call()

The method invokes the function and allows us to one by one using commas. 


var testArgument = {firstName: "John", lastName: "Smith", age: 24, profession: "Developer"};

function testFunction(text) {
console.log("value of this", this);
console.log("value of text", text);
}

testFunction.call(testArgument, "hello");

// output
/*
value of this {firstName: "John",
lastName: "Smith", age: 24, profession: "Developer"}
value of text hello
*/

you call also pass array or string

var testArgument = "String"

function testFunction(text) {
console.log("value of this", this);
console.log("value of text", text);
}

testFunction.call(testArgument, "hello");

// output
/*
value of this String {"Hello"}
value of text hello
*/
    
Function.prototype.apply()

This method is almost similar to call, there is only one difference that you have to pass the argument in the array.


var testArgument = {country: "India", city: "Mumbai"};

function testFunction(text, text2, text3) {
console.log("value of this", this);
console.log("value of firstname", text);
console.log("value of middlename", text2);
console.log("value of lastname", text3);
}

testFunction.apply(testArgument, ["Rohit", "Kumar", "sinha"]);

// output
/*
value of this {country: "India", city: "Mumbai"}
value of firstname Rohit
value of middletname Kumar
value of lastname sinha
*/


Function.prototype.bind()

The bind method returns you a new function with the new value of this. And then you can call it anytime with the arguments.

var testArgument = {country: "India", city: "Mumbai"};

function testFunction(text, text2, text3) {
console.log("value of this", this);
console.log("value of firstname", text);
console.log("value of middlename", text2);
console.log("value of lastname", text3);
}

var newTestFunction = testFunction.bind(testArgument);
newTestFunction("Rohit", "Kumar", "Sinha");

// output
/*
value of this {country: "India", city: "Mumbai"}
value of firstname Rohit
value of middletname Kumar
value of lastname Sinha
*/


Use it when you want that function to later be called with a certain context like events.

That's all folks

I hope now you guys have understood call apply, and bind in a very simple term. And thanks for reading this article.

Comments

Post a Comment

Popular posts from this blog

Real-Life Use-Cases for useCallback and useMemo

Image
O ne of my friends gives his react interview, and tell me, his interviewer asks him to give some real-life use-cases where he actually uses the  useCallback  and  useMemo  to solve his problem. And unfortunately, he got stuck at that point. I have also taken lots of interviews and personally observed that developers know the definition of  useCallback  and  useMemo  but they actually don’t know when to use them. So they didn’t use it to solve their real-life problems. So in this blog, I will explain when to use them and solve some real-life use-cases in a very simplified way. T a ke a cup of coffee or anything you want 😉 and let’s begin. https://c.tenor.com/ useCallback One of my friends was making arguing with me that we have to wrap the all function in  useCallback  which we are passing as props in the child component . “Every callback function should be memoized to prevent useless re-rendering of child components that use the callbac...
Read more

React's useImperativeHandle with practical example | by ByteCode Pandit

Image
Hi, all techies today we are going to discuss the react's important hook useImperativeHandle. What it solved for me When I was working on a react-native project, there was a situation when I have to toggle the modal view. So for that, I just took another boolean state in the parent component and changed it. import React , { useState } from 'react' ; import { Pressable , Text , View } from 'react-native' ; export const ParentComponent = ( props : any ) => { const [ showModal , setShowModal ] = useState < boolean >( false ); const toggleModal = ( value : boolean ) => { setShowModal ( value ); } return < View > < Pressable onPress = { () => toggleModal ( true ) } >< Text > Show Modal </ Text ></ Pressable > { showModal && < ModalComponent /> } </ View > } But because as we know whenever we change the state of the component it gets rerender wh...
Read more

Understand NgModule in 15 mins | by Bytecode Pandit

Image
NgModule is really a very important concept of angular. And it helps to wire-up some important information for the compiler during run time. They are specially used for organizing the code into features, lazy loading routes, and creating reusable libraries. We're going to cover some important uses of NgModule with some examples. I assume you have some working knowledge of Angular. JavaScript Modules I want to clear that NgModules are completely different from modules in javascript (sometimes called ES6 module). They are simply a language construct that helps us to organize our code. For more information pls visit Javascript Modules Let's dive into NgModule, the AppModule. Let's start looking at a basic NgModule that exists in every Angular application i.e AppModule  import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { AppComponent } from './app.component' ; @ NgModule ( { ...
Read more