Javascript Interview Questions ( Var, Let and Const ) - Hoisting, Scoping, Shadowing and more

Поділитися
Вставка
  • Опубліковано 3 гру 2024

КОМЕНТАРІ • 189

  • @RoadsideCoder
    @RoadsideCoder  2 роки тому +22

    🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
    Follow me on Twitter or you may fail in your interview 🤓 - twitter.com/piyush_eon
    If this video gets good response, I will make more JS interview videos, so do share it with others 🔥

  • @vardansharma6020
    @vardansharma6020 Рік тому +51

    Var and let can be declared without intialization
    Var and let can be updated but const cant be
    -there are 2 phases involved creation and execution . I creation window object is created then heap memory is allocated and then we initialise functions and variables with undefined (the whole function is stored inside the window object) . In execution the code is executed line by line and assigns variables .
    -Hoisting : during creation phase js engine moves function declarations and variable to top of the code
    -var variables are obv hoisted let variables are not (in normal sense they are hoisted in temporal dead zone)
    -temporal dead zone : a state in which let and const variables specifically are in scope but have not been declared yet .

  • @parassingh9723
    @parassingh9723 2 роки тому +35

    Hy piyush,
    Your java script interview series much more helpful to crack React interviews.
    I got selected more than 4 companies.
    Thanks.

  • @Renukak392
    @Renukak392 9 місяців тому +5

    I only studied what u said in this playlist I came here to tell u a very big Thanks ,3 months ago I got internship and I studied Java script from here Thanks a lot

  • @gauravjain6522
    @gauravjain6522 Рік тому +7

    You're truly the master of your craft!
    The content you've produced is exceptional; while many understand the theory, executing it practically is a whole different level, and you've accomplished it admirably. My sincere respect and admiration for your work, sir!
    Keep spreading your expertise and help around the globe 🌐

  • @Neon-b9u
    @Neon-b9u 11 місяців тому +2

    6:04 - You explained the concept of re-assigning new values not re-initialisation.

  • @Srik609
    @Srik609 2 роки тому +9

    I was checking your videos from past 2 days and found your way of teaching and explanation of each and evry part in the video will clear every doubt.
    Excellent teaching, thanks and god bless you.

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

    This video deserves so much more engagement. Your content is really comprehensive. I signed in just to thank you lol. Keep up the good work!

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

    Amazing explanation of var, let and const.

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

    Hello Piyush,
    AMAZING content. Exceptional way of explaining it.
    Loved it.
    Please make videos on
    Classes and
    Design Patterns. as well.

  • @mayankbanoula8251
    @mayankbanoula8251 2 роки тому +3

    hello sir ...your way of teaching is in different level Thank you so much for that....please make some more videos on JS interviews questions. PLEASE PLEASE PLEASE.

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

      Thank you so much Mayank! U made my day.

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

    Amazing explanation Piyush !! Please bring more questions on JS interview!! Keep up the good work

  • @ShubhamPatil-rr4on
    @ShubhamPatil-rr4on 2 роки тому +6

    This is awesome 👏🙌
    If you will make like this videos series then no one can stop channel growth.♥️♥️
    Please make such a content 🔥

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

    Amazing, you explain the content very well! I'm preparing for an interview that will happen next week, I hope I come back with good news! :)

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

    What is the difference between lexical scope and closure give us an example side by side like which line is removed then it's a lexical scope and which line is add then it's a closure

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

    Very helpful thank u sir explain very good i like it and understand all method thank so much

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

    very nicely explained thanks piyush

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

    Thanks for making it so crystal clear thanks it helped a lot ❤

  • @SachinYadav-eh7vg
    @SachinYadav-eh7vg 2 роки тому +3

    This the first question that I get asked everytime I give an interview for React JS. The first statement the interviewer makes is "Ok let's start with some basic questions, What is hoisting in JS 💥"

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

      Yes, It helps interviewer evaluate your basics.

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

    Enjoying all vedio i understand every topics clear more and doubts 👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌 Thank and thankyou so much explanation 🔥🔥🔥

  • @KomathiS-b3s
    @KomathiS-b3s 10 місяців тому

    thanks for the video ,the video was really good to understand the concepts clearly.

  • @vipulkumar5399
    @vipulkumar5399 2 роки тому +25

    Please make a series of JavaScript interview questions🙏

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

      Yes I will!

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

      I think there is a really good playlist. I got a 10 lpa offer from his videos. ua-cam.com/play/PLKhlp2qtUcSaCVJEt4ogEFs6I41pNnMU5.html

    • @rakeshgadhasu6158
      @rakeshgadhasu6158 10 місяців тому

      ​@@RoadsideCoderhave you did full video of javascript questions?

  • @amitkrgupta094
    @amitkrgupta094 4 місяці тому +4

    Just want to point out one thing, The declaration mentioned here is not same "declaring inside of your code", Your engine processes your variables in three steps:
    1. Variable declaration (not same as decalaring a variable in the code) - Meaning defining the scope. Note that it does not mean that variable's memory has been decided also.
    2. Variable assignment: Here Engine decides the memory for the variable and adds a default value for it. (default value: undefined)
    3. Assignment: Assigning a value to the variable.
    Now which of the steps falls under Creation phase and Execution phases decided nature of the hoisting.
    For var, 1 & 2 happens in creation phase, hence even someone accessing it before the actual "declared in the code" gives you back "undefined" .
    For let and const: only one happens, 2 happens only when it hits the actual code declaration (let x, const r) so basically your variable have a scope but because assignment has not been done, It is said to be in TDZ (scope defined but not memory or default value)

    • @wakeengineer
      @wakeengineer 2 місяці тому

      That's some deep understanding , where you get to know all these ?

    • @amitkrgupta094
      @amitkrgupta094 Місяць тому

      ​@@wakeengineer check any of the below :
      - "variable lifecycle" article by dmitripavlutin
      - variable lifecycle course or course notes by Bogdan Stashchuk
      - JavaScript Visualized - Execution Contexts by Lydia Hallie

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

    Please make video on this challenge.
    I want to make a layout where there are header and main and main has multiple dynamic items of 150/150 px each. while making responsive screen, items should wraps in smaller size. header should always occupy width according to the items. for example if it has 1 item then header width should have 150px if 2 items then 300px and so on so forth.

  • @alwysrite
    @alwysrite 2 роки тому +8

    interesting, I thought in ES6, the 'var' had been replaced by 'let', did not know there was this global / local meaning to it as well.

  • @priyanshigupta-tz1do
    @priyanshigupta-tz1do 6 місяців тому

    Bestest Playlist❤

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

    bro no other utuber explained shadow concept i got that topic from one of interviews thx!

  • @maurya5749
    @maurya5749 Рік тому +4

    Var a=0;
    If(a) {
    Console.log(a) ;
    }
    What will be the output?

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

      nada se va a imprimir ya que el if hara una coerción de tipo sobre el cero como un falsy value y no ejecutara el codigó dentro de este condicional

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

    Man thanks a lot, you have been so helpful ❤.
    God bless you

  • @CodingFame-h4g
    @CodingFame-h4g Місяць тому

    Great course

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

    Very perfectly explained ❤

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

    great explaination. thanks....make videos on JS Classes

  • @amanupadhyay4986
    @amanupadhyay4986 2 роки тому +8

    During the creation phase JavaScript engine moves your variables and functions declarations on the top of your code and this is known as hoisting.

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

    Thank you Piyush Sir for these amazing explanation of JS question ... please make a series of JS interview questions ..

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

      Thanks for the appreciation 🙏 More such videos coming in this series 🔥

  • @shivambln
    @shivambln 11 місяців тому +1

    Best on UA-cam...
    Better then akshay saini
    Previous used to watch akshsy saini for interview preparation and recalling basics of JS
    But your explanation is best in class

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

    Thank you wary much for the explanation!☺️

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

    pls, upload more and more videos. it will help me with my upcoming interviews

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

    hi.. thank you so much for this js interview video. it helped me to pass the interview. all the best.

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

    Great for interview.

  • @bhavaniprasad2707
    @bhavaniprasad2707 2 місяці тому

    please watch this video before going to interview , the psuedo kind of coding questions helps a lot in interview

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

    Please upload videos fast of this series bhaiya...

  • @ιυ_αα-ξ5σ
    @ιυ_αα-ξ5σ 2 роки тому

    you understand it very well, you may want to step it up.

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

    Very nicely explained

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

    Please can you make system design for frontend developer series ,
    By the way you taught amazingly.
    I watched the whole series is simply amazing 🤩.
    I love learn system design from you, that would be simply great

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

    10:47 -> ice-cream 🤣🤣
    Great video btw 👍🏻

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

    you are an amazing tutor 😍

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

    you and akshay saini both are awesome

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

    excellent explanation ❤

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

    Please make an In Depth Video on Temporal Dead Zone

  • @jiyasisodiya-z3v
    @jiyasisodiya-z3v 6 місяців тому

    var or let may be updated, but const not
    var may be re-declare ,but not same with let or const
    var or let can be declare without initialization,but const can't

  • @DS-zr9gv
    @DS-zr9gv Рік тому

    Thank you for this 💙

  • @onedaytimewin
    @onedaytimewin 10 місяців тому

    really awesome video, thank you !

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

    Continue this series...

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

    Thank you bro.

  • @nobody20022
    @nobody20022 2 місяці тому +1

    Notes:
    Q) What is Scope?
    Ans: scope refers to the accessibility or visibility of variables, functions, and objects at different parts of the code during runtime. Scope determines where variables and functions can be accessed or referenced in your code.
    Type of Scope:
    Global Scope: Accessible everywhere in the code.
    Function Scope: Variables are only accessible within the function they are defined in.Var has functional scope.
    Block Scope: Variables declared with let or const inside a block are confined to that block.
    Lexical Scope: Inner functions have access to variables in their outer function's scope.
    Q) Varible shadowing?
    Ans: variable shadowing occurs when a variable declared in a certain scope has the same name as a variable declared in an outer or parent scope. The inner variable "shadows" or overrides the outer variable, meaning the inner variable is given precedence within its scope, and the outer variable becomes inaccessible from that inner scope.
    Q) var vs let vs const?
    Ans: Declaration var can be redeclared and let const can not.
    Declareation without initialisation var and let can declare but const can not
    Reintialisation: var and let value can reintialise but const value can not

    • @BlueSniper228
      @BlueSniper228 Місяць тому +1

      I'm just now going through this playlist to prep for an interview that has a javascript knowledge section. your notes are super helpful btw but how did this playlist go for you use wise and practical wise

    • @nobody20022
      @nobody20022 Місяць тому

      The topics covered in this playlist are very good and explanation is also very good.

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

    Can you make videos related to dsa using JavaScript for the dsa round in frontend interviews - also give some idea about how to get frontend internship opportunity while in college. hoping for your reply :)

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

    great your teaching is too good sir please please make a tutorial on iterator and generator

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

    Thanks for the videos bro, very helpful for us.

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

    It's a lot of money for a course if it would 300 or 400 I would have enrolled in the course !!

  • @fatimaiqra2169
    @fatimaiqra2169 2 місяці тому

    thanks a lot

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

    Good explanation though! Are you going to do some Interview Questions related to React? It would help a lot!

  • @ManuHere-fy5jv
    @ManuHere-fy5jv 8 місяців тому

    Well said

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

    Keep going I learn so much from you

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

    Thank you

  • @MuhammadAdnan2.0
    @MuhammadAdnan2.0 2 роки тому

    Well looking forward for more

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

    Helpful ❤

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

    Completed ✅

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

    your content is awesome

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

    awesome bro

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

    thanks bro after that follow msg at 6:00 I spended 30 min on twitter 😶

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

    5:10 - let-let can't be shadowed it will give a error. Try it out. Please verify all the information that you show in the video as its a placement video and students will get misguided.

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

    Good tutorial dude, what is your current package as a software developer. Just curious because I want to be as good as you and was wondering where the max package would cap haha

  • @AbhishekKumar-zx3ps
    @AbhishekKumar-zx3ps 2 роки тому +1

    Can you please cover promise dependency question. "How can we call multiple promises parallelly but result should be printed sequentially. Lets say we start 3 parallel promises A,B and C. But if Promise B resolve it should check if A has been resolved or not and if it not then it should wait to print its result. Similarly C will wait for B and A. "

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

      I don't know why this comment has no reply from @RoadsideCoder

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

      Hey, Yeah sure I'll cover it in my promises video!

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

      // Parallel execution of all promises
      const [resultA, resultB, resultC] = await Promise.all([promiseA, promiseB, promiseC]);
      // The below line will be executed only when all promises are resolved
      console.log(resultA, resultB, resultC);

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

    It would be very helpful if you can create interview coding ques series on Js

  • @VikasKumar-vs5pu
    @VikasKumar-vs5pu 2 роки тому +5

    Q1. a=5;
    console.log(a);
    var a;
    Q2: function abc() {
    var a = 1;
    let b = 1;
    {
    var a = 2;
    let b = 2;
    }
    console.log(a, b);
    }
    abc();

    • @KrishnaChaitanyaGadhavarjula
      @KrishnaChaitanyaGadhavarjula Рік тому +3

      Q1: 5( var can be initialized and declared as hoisting will bring the code to top of stack)
      Q2: 2,1 (var can be re-declared and re-initialized but let will print based on the block it is initialized)

  • @Jamoldevs
    @Jamoldevs 4 місяці тому +1

    where do you work bro?

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

    Best videos

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

    Awesome really helpful! Please make videos on react interview preparation also.

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

    Thanks bhai

  • @MohitKumar-nh1qb
    @MohitKumar-nh1qb 2 роки тому +2

    I came cross one hoisting interview question.
    Where variable declared with var and function declaration has same name, then which one of them will be hoisted?
    function test(){
    return abc;
    function abc(){}
    var abc = 5;
    }
    console.log(typeof test())
    Ans: function

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

    you opened my third eye after this.

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

    great video man!😊

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

    x=9
    console.log(x)
    let x
    //since let is hoisted it will move to the top,gets declared and in next step gets a value assigned. then why there is error

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

      Let remains in tdz which is time period between declaration and intialization and let does not behaves as same as let because the undefined value goes in script not in window object that's y value of let can't be accessed before intialization

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

      @@Aptilover okk thanks.... U r doing MERN Stack?

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

      @@lakshaychauhan380 no focusing on frontend

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

      @@Aptilover but there are less opportunities in front end

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

    great series 🙂

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

    the voice at 10:50 🤣🤣🤣

  • @ShubhamPatil-rr4on
    @ShubhamPatil-rr4on 2 роки тому

    This is my second comment
    Plz make videos on react js because your explanation is amezing
    But your video out in 7-8 days gap plz make as soon as possible

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

      Bro I've made a lot of videos on react js on my channel. You can check them out.

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

    HI, i have a table which has 3rows and 20cloumns, onclicking edit, first cell of that row should get highlighted , but last cell is getting highlighted . what can be done ..pls suggest

  • @Lucifer-xt7un
    @Lucifer-xt7un 2 роки тому

    Continue this series bro

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

    nice video. create more videos like this

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

    Cover javascript decorator function for debouncing.

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

    Wow🤪😍😍

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

    Your voice is great

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

      Thank you 🙏 Can I make a career as a voice artist? 👀

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

      @@RoadsideCoder hope so

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

      @@RoadsideCoder how can i start contributing in open for getting a remote job

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

      @@danish7335 U don't need open source to get a remote job. Work on your skills and building a personal brand on social media

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

      @@RoadsideCoder thnx for your valuable reply

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

    Thanks for the great content, could I ask if these questions are asked on junior roles?

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

      Yes!

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

      @@RoadsideCoder thanks for your reply 🙏 I had my first interview today and your videos helped

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

      @@meri8375 wow that's amazing dude!

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

    Can you please make videos on Redux, reducers, and middleware for beginners?

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

      I have made, you can check in my channel!

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

    Please make series of important dsa questions too and design questions asked in interview

  • @akashagrawal5067
    @akashagrawal5067 8 місяців тому

    if I write like this then:
    let z = 10;
    function abc() {
    console.log(z, 'z');
    }
    abc();
    Then , here let treating as a global var and also accesible anywhere, can you explain about this one?

    • @tanyatiwari262
      @tanyatiwari262 2 місяці тому

      In JavaScript, when a function is executed, the interpreter searches for variables in the current scope. If it doesn't find the variable within the function, it moves outward (to the next scope, and so on) until it finds the variable or reaches the global scope.
      Since z is declared with let in the global scope, and there's no local variable z inside the function abc(), JavaScript successfully finds the global z and uses its value (10) when you invoke the function.

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

    Bro i want to tecah my nephew software dev what shud he begins with first kindly guide?

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

    Will you provide pdf for interview questions

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

    Make a video on execution context and call back

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

    Will it support all browsers. Ie11 especially