Call, apply & Bind in JavaScript - Front End Interview 🔥 Episode 4 - In 20 Minutes

Поділитися
Вставка
  • Опубліковано 22 лис 2021
  • Learn call, bind & apply functions in JS - step by step with examples.
    This is a common JavaScript interview question. Learn why we use the call function and what is need of the call function. If you want to set the value of this keyword while calling the function, you need to use the call or apply method. bind is similar to call or apply but the function is not executed immediately but returns another function instance that is bound to the object you have passed in the bind call.
    ⭐ Timestamps to Skip the video:
    00:00 - Don't skip anything 🙏
    I believe that this video will help you to understand better in terms of career growth.
    Put your comments and share your experience with us if you like this video. Also if you have some suggestions then please suggest them in the comment box.
    ⭐ Modern JavaScript ES6 Tutorial by Technical Suneja
    ► bit.ly/3CkjENa
    ⭐ Full Stack Web Developer ( Complete Roadmap)
    ► ytube.io/3JYi
    ⭐ Support vs Development Jobs? Projects? What to choose
    ►ytube.io/3K5i
    ⭐ Off-Campus Job Placements Complete Roadmap ► ytube.io/3JpA
    ⭐ Latest IT Vlogs :
    ► ytube.io/3Ik9
    ⭐ Wednesday Episodes By Technical Suneja
    ► ytube.io/3FIN
    ⭐ Coding Stuff :
    ► / technicalsunejaji
    ⭐ ReactJS Tutorial For Beginners. :
    ► ytube.io/3FIL
    ⭐ CTC v/s IN HAND SALARY | Huge Packages Explained🤔 GOOGLE, MICROSOFT, Facebook! 🔥
    ► ytube.io/3FIF
    ⭐ Top 5 Programming languages for 2021
    ► ytube.io/3FIH
    ⭐ Best Top 5 Frontend Frameworks of 2021 for Web Development
    ► ytube.io/3FII
    ⭐ 10 Generic steps to becoming Javascript Developer | Frontend & Backend Both🔥
    ► ytube.io/3FIJ
    ⭐ Best LinkedIn Tips for Job seekers in 2021 - Proper Utilisation of LinkedIn 🔥
    ► ytube.io/3FIK
    ⭐ My Thoughts on Web Development & Mobile App Development - Which is better?
    ► ytube.io/3FIS
    ⭐ Competitive Programming vs Software Development - Where Should I Invest My Time? 🔥
    ► ytube.io/3FIR
    ⭐ My Thoughts on Mean Stack Developer - Are you looking for a FullStack Developer?🔥
    ► ytube.io/3FIQ
    ⭐ My Thoughts on Full Stack Developer - Perfect Path 🔥🔥
    ► ytube.io/3FIP
    Want Webhosting service ?
    If you are planning to host your website in a very decent amount you can contact us on the given numbers.
    Contact Details :
    1. +91-9990131528
    2. +91-8529119425
    More Details (Visit our website ) ►hosting.technicalsuneja.com/
    ⭐ Follow us on Social Media platforms:-
    ------------------------------------------------------------
    🔥 Instagram ► / sunejaajay
    🔥 Technical Suneja Official Instagram ► / asksunejaji
    🔥 Facebook Page ► / technicalsunejaji
    🔥 Join Group ► / 1981858225403035
    🔥 LinkedIn ► / ajaysuneja
    ------------------------------------------------------------
    ⭐ My Telegram Group Link:
    Technical Suneja official ► t.me/joinchat/V53dTczAWc52IrLv
    ⭐ My UA-cam equipment
    1)MacBook Air ► amzn.to/2Tqj3Zz
    2)LCD Screen for Coding ► amzn.to/3zeYSyi
    3)SanDisk 500GB SSD ► amzn.to/3pNEArf
    4)WD 1TB Normal ► amzn.to/3gr5UY9
    5)HP laptop ► amzn.to/3pK4NHg
    6)Canon M50 Mark II ► amzn.to/2TjlEEO
    7)Chair Link ► amzn.to/2RSvoWk
    8)Echo Dot (3rd Gen) ► amzn.to/3iCLhLd
    9)Canon EF-S 18-55mm lens ► amzn.to/3cEwH22
    10)HP Laserjet ► amzn.to/3zjEEn7
    11)JBL Headphones ► amzn.to/3gwXEGf
    ⭐ Microphone:
    1)Boya Lav Mic ► amzn.to/2SsqVtD
    2)BOYA by-MM1 ► amzn.to/3gdZKf4
    4)Uhuru UM-SF777 ► amzn.to/3go4mOG
    1)GoPro Max ► amzn.to/3gtdf9F
    2)GoPro Accessories ► amzn.to/3xlCIc5
    ⭐ Lights Used:
    1)Digitek (DRL-18HC9) Professional ► amzn.to/3gj9yVo
    2)GoDox SL60W ► amzn.to/3whw9Hr
    My Router ► amzn.to/3ge4RMr
    Realme Buds Air ► amzn.to/3gtzpIX
    ⭐ Tripod
    1)DIGITEK® DTR ► amzn.to/3ge0AZg
    2)For Mobile ► amzn.to/3iBfrPh
    3)JB01507-BW ► amzn.to/3pQ48UL
    call bind apply in javascript,javascript interview questions,call apply bind javascript tutorial,difference between call,apply and bind javascript,this keyword in javascript in hindi,javascript this keyword in hindi,learn javascript from scratch hindi,javascript for beginners hindi,javascript cheezycode tutorials hindi,learn javascript programming hindi,full stack javascript series,cheezycode javascript web development
    #ITVlogs #JavaScript

КОМЕНТАРІ • 168

  • @TechnicalSuneja
    @TechnicalSuneja  2 роки тому +26

    00:00 - Don't skip anything 🙏
    Aur kya haal sabke?
    btao next topic JS kon sa hona chahiye ??

    • @rajasinghrajpoot8626
      @rajasinghrajpoot8626 2 роки тому +1

      bhaiya backend With node Js interview pr video bnao...☺☺

    • @mohdtausif
      @mohdtausif 2 роки тому

      please make a video on throttling and denouncing in details.

    • @soomjeetsahoo8710
      @soomjeetsahoo8710 2 роки тому

      How is bind saved in memory stack vs a call? Does bind creates a reference?

    • @farzamyousuf3354
      @farzamyousuf3354 2 роки тому

      function ke uper video honi chahiye ziayda confusion function main hoti simple function aur arrow function main

    • @rumanmushtaq898
      @rumanmushtaq898 2 роки тому

      @@rajasinghrajpoot8626 yes right i also need

  • @pujamohanty8825
    @pujamohanty8825 2 роки тому +5

    The way you explained call,bind and apply....it's fantastic 👏

  • @sayalikhot4328
    @sayalikhot4328 Рік тому

    The way you explained call, apply and bind....it's fantastic. Thanks @Technical Suneja

  • @bhumikasingh4419
    @bhumikasingh4419 Рік тому +1

    Very well explained with examples! Thank you!

  • @krishgupta4408
    @krishgupta4408 5 місяців тому

    You seems to be very humble person... thanks for the video!

  • @unseenjoda9899
    @unseenjoda9899 Рік тому

    Explained Nicely... Jab hume pata hi nahin hai problem kahan hai... Solution ko kaise use karen... Great sir

  • @digitalaashu6279
    @digitalaashu6279 Рік тому

    thanks bro such a wonderful explanation, i have read articles but i didn't get the concept but your video is enough, beautifully explained.

  • @ramsiya2018
    @ramsiya2018 3 місяці тому

    waw ! amazing , bhut video dekhe ,lekin ab ja kr clear hua , thank u guru ji

  • @user-qx8cf5ns3q
    @user-qx8cf5ns3q 10 місяців тому +1

    thank you so much finally clear my doubts in these 3 methods

  • @akashaher1001
    @akashaher1001 2 роки тому +1

    Thank you very much sir...
    For providing us such wonderful videos... 💯❤️

  • @hitanshpatel9548
    @hitanshpatel9548 Рік тому

    Your explanation is really very good and understandable.

  • @sankethtj
    @sankethtj Рік тому

    Very Well Explained. Thank you very much..

  • @amansingh8697
    @amansingh8697 Рік тому +1

    Very helpful video thank you sir❤❤

  • @Yash-ry5wj
    @Yash-ry5wj Рік тому

    Thanx Bhaiya ❤️, Understood all.

  • @varsha8279
    @varsha8279 4 місяці тому

    Perfect!!! 🤩.. thank you so much!

  • @nileshsable3872
    @nileshsable3872 11 місяців тому

    its awesome video all douts clear sir thank you

  • @Jk-tr1fb
    @Jk-tr1fb 2 роки тому

    Ye series to amazing h bhaiya 👍

  • @user-eo3oc8ef3y
    @user-eo3oc8ef3y 10 місяців тому

    Thankyopu so much best explanation and simple explanantion

  • @amitbhagat120
    @amitbhagat120 5 місяців тому

    Bhai ne smjha diya vo bhi simple word me❤❤

  • @Vikaskumar-ur5di
    @Vikaskumar-ur5di 2 роки тому +1

    thanks for sharing amazing video

  • @prathmeshrupnur2416
    @prathmeshrupnur2416 Рік тому

    nice video every point discussed in video was clear to me
    sir ,i request u to make a playlist on javascript for beginners to advance.

  • @rohanmainali9040
    @rohanmainali9040 Рік тому +1

    Please learn these concepts because today in my mid-level react interview I got these questions.

  • @user-ek6to2wf2u
    @user-ek6to2wf2u 11 місяців тому +4

    In JavaScript, call, apply, and bind are methods that allow you to control the value of the this keyword within a function and also enable you to pass arguments to a function in different ways. These methods are commonly used in object-oriented programming and functional programming paradigms.
    Call Method:
    The call method is used to call a function and explicitly specify the value of this inside the function. It allows you to pass arguments to the function individually as a comma-separated list.
    javascript
    Copy code
    const person = {
    name: "John",
    sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
    },
    };
    const anotherPerson = {
    name: "Alice",
    };
    person.sayHello(); // Output: Hello, my name is John
    person.sayHello.call(anotherPerson); // Output: Hello, my name is Alice
    In the example above, we have an object person with a method sayHello. Using call, we can invoke the sayHello method with a different object anotherPerson to change the value of this inside the method.
    Apply Method:
    The apply method is similar to the call method, but instead of passing arguments individually, it takes the arguments as an array.
    javascript
    Copy code
    const person = {
    name: "John",
    sayHello: function(greeting) {
    console.log(`${greeting}, my name is ${this.name}`);
    },
    };
    const anotherPerson = {
    name: "Alice",
    };
    person.sayHello("Hi"); // Output: Hi, my name is John
    person.sayHello.apply(anotherPerson, ["Hello"]); // Output: Hello, my name is Alice
    In this example, we have modified the sayHello method to accept a greeting argument. Using apply, we can pass the arguments in an array to change the value of this inside the method and provide the greeting.
    Bind Method:
    The bind method is used to create a new function with a specific value for this, which can be used later. Unlike call and apply, the bind method does not immediately invoke the function but returns a new function with the specified this value.
    javascript
    Copy code
    const person = {
    name: "John",
    sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
    },
    };
    const anotherPerson = {
    name: "Alice",
    };
    const helloFunction = person.sayHello.bind(anotherPerson);
    helloFunction(); // Output: Hello, my name is Alice
    In this example, we use bind to create a new function helloFunction with the value of this set to anotherPerson. When we call helloFunction(), it logs the message with the name from anotherPerson.
    Choosing Between Call, Apply, and Bind:
    The choice between call, apply, and bind depends on your specific use case. Use call or apply when you want to immediately invoke a function with a specific this value and pass arguments individually or as an array, respectively. Use bind when you want to create a new function with a preset this value to be called later.
    In summary, call, apply, and bind are powerful methods in JavaScript that allow you to control the value of this inside a function and provide flexibility in passing arguments. Understanding how to use these methods can enhance your code's readability and enable you to create more robust and reusable functions.

  • @jituop2702
    @jituop2702 2 роки тому

    Your voice so good , clear and fine
    Video is very help full

  • @YashDEVELOPER12
    @YashDEVELOPER12 Рік тому +5

    One important use of bind function is :
    When we used a function as callback like setTimeout() , there is chance that method loose reference of object .
    So to tightly bind the method with object we can use bind method.
    Apart of this.. thanks alot brother for explaining call and apply function very well..

    • @sumittiwari231
      @sumittiwari231 4 місяці тому

      bhai koi real life examplle deke samjh dena please . abhi tk mera clear nhi hua doubt en topic pe

  • @niteshsen690
    @niteshsen690 Рік тому +1

    Very well explained ❤

  • @indpriderdx5174
    @indpriderdx5174 Рік тому

    greate tutorial hats of to you sunejaji .. nice-one

  • @GunjanSingh-uy8ro
    @GunjanSingh-uy8ro Місяць тому

    bahut ache se ... you are awesome

  • @priyankasoni1405
    @priyankasoni1405 2 роки тому

    Please make video for inheritance in JavaScript , before es6 how inheritance was working and with es6 syntax 🙏

  • @shailenderjaiswal1685
    @shailenderjaiswal1685 Рік тому +1

    very well explained bhaiya 👍

  • @avinashpawar2236
    @avinashpawar2236 Рік тому

    Thanks alot sir 🤗 amazing video

  • @tausifkovadiya1810
    @tausifkovadiya1810 2 роки тому

    Excellent explanation...

  • @RahulChauhan-lm8mk
    @RahulChauhan-lm8mk Рік тому +1

    Very good video. Immpressive.

  • @nter_10_ment52
    @nter_10_ment52 Рік тому

    bhai best explanation hai apka.

  • @ayushipriya7811
    @ayushipriya7811 24 дні тому

    very well explained sir...

  • @user-hk6ip5qe8x
    @user-hk6ip5qe8x 10 місяців тому

    It helped me a lot , thanks

  • @sandeepsunny8467
    @sandeepsunny8467 Рік тому

    nice explanation with simple real examples....)

  • @gaminggyanbaba299
    @gaminggyanbaba299 Рік тому

    @Technical Suneja as another parameter we can take array in call function too so what is difference between call and apply?

  • @ayushiprajapati2552
    @ayushiprajapati2552 4 місяці тому

    Well explained !

  • @laxmipriyapradhan1704
    @laxmipriyapradhan1704 3 місяці тому

    Thanks 😅 Awesome video

  • @PANKAJKUMAR-fe8zn
    @PANKAJKUMAR-fe8zn 2 роки тому

    Thanks for this video sir... please make video on fetch API and this keyword

  • @manishsoni7103
    @manishsoni7103 2 роки тому +1

    Sir please make a series of JavaScript tutorials from zero to hero for beginners to expert.

  • @user-zx2pb3un4u
    @user-zx2pb3un4u 5 місяців тому

    thank you so much sir achhhyyyy se smjh a gya😛💗

  • @AshwaniSharma-vg5xm
    @AshwaniSharma-vg5xm 2 роки тому

    pls make video on => What is a deep and shallow copy in JavaScript? What is by default?

  • @amanprajapati9252
    @amanprajapati9252 23 дні тому

    Great sir!🙏😊

  • @arijitnagchowdhury3740
    @arijitnagchowdhury3740 18 днів тому

    Very nice explanation

  • @tayebkhan2061
    @tayebkhan2061 10 місяців тому +1

    nice sir
    The way you explained call,bind and apply....it's fantastic

  • @jagdishjena9058
    @jagdishjena9058 2 роки тому

    Thank you so much sir.

  • @siddharthabiswal275
    @siddharthabiswal275 Рік тому

    LOVELY!

  • @ankit_panchal
    @ankit_panchal 2 роки тому +1

    Great 👍

  • @jesussheepakash9289
    @jesussheepakash9289 Рік тому

    Thank you bhaiya

  • @Doglapan64
    @Doglapan64 Рік тому +1

    Content is described simply and in an easy way. Just a suggestion that need to describe definitions of that too. Which make it perfect course. Thanks

  • @sparsh-0384
    @sparsh-0384 Рік тому

    Well explained 👍

  • @mshahzebraza
    @mshahzebraza 2 роки тому

    Amazing Content

  • @fakhruddin746
    @fakhruddin746 Рік тому +2

    Well Described @technical Suneja
    Firstly thanks to you to this brief explanation
    Just one more point here, That is { Call Apply bind with arrow function}.

    • @rohit_dev
      @rohit_dev Рік тому +1

      I think call, apply and bind will not work with the arrow function because arrow function don't have their own this keyword.

  • @rajasinghrajpoot8626
    @rajasinghrajpoot8626 2 роки тому +6

    bhaiya backend With node Js interview pr video bnao...☺☺

  • @tejass817
    @tejass817 Рік тому

    useful content....tq

  • @diwakardayal954
    @diwakardayal954 4 місяці тому

    thank you!!

  • @legendarygaming8180
    @legendarygaming8180 12 хвилин тому

    khatarnaak👌👌

  • @rishabhprakash
    @rishabhprakash Рік тому

    thanks man !

  • @jitendrachauhan5963
    @jitendrachauhan5963 2 роки тому

    Very good tutorial

  • @pankajsuryavanshi8332
    @pankajsuryavanshi8332 Рік тому

    Continue this series.....

  • @shaansharma2504
    @shaansharma2504 Рік тому

    we support you :)

  • @daminiraj4846
    @daminiraj4846 Рік тому

    Pls make more videos on advanced javascript

  • @jagdishjena9058
    @jagdishjena9058 2 роки тому +1

    sir plz make videos on Shallow copy and Deep copy.

  • @uncodeyourself4473
    @uncodeyourself4473 Рік тому

    great bro

  • @shreyash8273
    @shreyash8273 11 місяців тому

    Thanks Sir

  • @RaviKumar-hz8cf
    @RaviKumar-hz8cf 7 місяців тому

    Tank you Buddy

  • @sunnyrauniyar6769
    @sunnyrauniyar6769 11 місяців тому

    Great simple explanantion again, this video could have been a little shorter or you could add some use-case or necessary situation usecase at the end of video. Thanks again

  • @shwetajaiswal1263
    @shwetajaiswal1263 Рік тому

    U are great

  • @harishkumarsbd
    @harishkumarsbd 11 місяців тому

    superb👍

  • @gppatil33
    @gppatil33 2 роки тому +4

    Sir my name is Gajanan. I would like to tell you that your videos are to the point and well explained. I just want to tell you that i have difficulty in finding your playlist for JavaScript. I m following the react js playlist currently on hooks.... if i get a reply will be soo happy.

    • @TechnicalSuneja
      @TechnicalSuneja  2 роки тому +1

      Thank you so much for your feedback 😊
      Will keep uploaded such contents in future .👍

  • @NeerajSharma-sk2rs
    @NeerajSharma-sk2rs Рік тому

    thanku bhai

  • @viyyankumar8834
    @viyyankumar8834 2 роки тому +1

    Thanks u bhia

  • @shanmaqbool5048
    @shanmaqbool5048 4 місяці тому

    very owseom

  • @ayantikachakraborty4512
    @ayantikachakraborty4512 3 місяці тому

    great

  • @Jk-tr1fb
    @Jk-tr1fb 2 роки тому

    Node.js ki bhi aisi short ,simple ,crisp series le aao interview time aa gya h please 🙏

  • @ManikChakraborty
    @ManikChakraborty 2 роки тому

    Brother can you make a video please about starting job with .net at 2022, will it be good or not , what will be the scope of .net in future n all

  • @smitraghani9735
    @smitraghani9735 Рік тому +1

    Can anyone explain practical use of this concept where you have applied this in your code

  • @MAJORpiyush
    @MAJORpiyush 9 місяців тому

    good video nyc

  • @ajaydubey4715
    @ajaydubey4715 2 роки тому

    Hi i have one issue with that suppose if we use parameters as array in call() then it is also working why??

  • @sumitkumar-hl8dt
    @sumitkumar-hl8dt 2 роки тому

    Explain real life problems which can be achieved using all the methods pz

  • @SunnySunny-mh5do
    @SunnySunny-mh5do 3 місяці тому

    11:54 I am surprised.. How ajay n anuj became bhai-bahan. 😊

  • @gouravnainwaya5669
    @gouravnainwaya5669 2 роки тому +2

    React native bhi sikhao

  • @raj_amancha
    @raj_amancha 2 роки тому

    Sir jo font size vs code me use kiye hai utna font size console me kar do to ye video agar me Mobil me dekhu to bhi thik se dikhe and Your great sir thanks 😊

  • @zoyahussain5147
    @zoyahussain5147 Рік тому

    nice

  • @Vikaskumar-ur5di
    @Vikaskumar-ur5di 2 роки тому

    like dependency injection concept like call function

  • @mohammedzaheer4215
    @mohammedzaheer4215 6 місяців тому

    Call means we can call any object using call and get it's values and apply means we can store the argument in array and bind means we can make tho copy of the function and Store it in a variable and call when needed is I'm right if not correct me

  • @vikrambais5330
    @vikrambais5330 9 місяців тому

    plz also make some frontend projects using react js .. there are very less video just focusiing on frontend projects using react js.. videos to hai par we sab full stack pe focussed hai .. and jab tak ek beginner frontend hi nhi sikh payeha using react js to in sabhi full stack projects ko kaise kar payega..

  • @anilrajmeena4373
    @anilrajmeena4373 2 роки тому

    Please make video about this keyword

  • @chiragkumarrathod3234
    @chiragkumarrathod3234 2 роки тому

    make videos on ruby on rails

  • @zatinkumar6314
    @zatinkumar6314 2 роки тому +5

    Functions declared in tha object are called methods 👻

  • @raghavsharma3795
    @raghavsharma3795 Рік тому +1

    If we change the regular function to fat arrow function, this keyword works as a window object. WHY?

  • @abdullahkhansaffy9703
    @abdullahkhansaffy9703 2 роки тому

    10/10 marks

  • @car_holic1995
    @car_holic1995 Рік тому

    Live projects me kya use h ?

  • @ijajulislam7223
    @ijajulislam7223 2 роки тому

    Sir we need js project 5 plus..to apply whole js concept into project.because we understd concept but dont know how to apply

  • @shreyashkaushal8155
    @shreyashkaushal8155 5 місяців тому

    just one question , in that problem statement, if we use arrow function , some thing like this
    let userDetails ={
    name : "Shreyash Kaushal",
    age : 28,
    designation : "Software Developer",
    printDetails : ()=>{
    console.log(this.name)
    }
    }
    it doesn't print anything, may i know why ?

  • @shriram1767
    @shriram1767 Рік тому

    Hi,bhai i m fresher UI fullstack develo.. how to prepare for interviews which topic is more imp, and project, please help i confused..... plz reply bhaii

  • @nomantahir2132
    @nomantahir2132 7 місяців тому

    Lekin apply function ma receive side par hum array receive karna ka bajay parameters receive kr rha hn.
    Agr hun array bhej rha hn to receive bhi Hume array nai karna hota?

  • @ankushladani496
    @ankushladani496 2 роки тому

    Dsa series lao yar jaldi....🚀🚀