Scope in JavaScript - HTTP 203

Поделиться
HTML-код
  • Опубликовано: 8 сен 2024
  • Jake and Surma take a deep dive into the world of variable scoping in JavaScript. var vs const/let and scripts vs modules.

Комментарии • 60

  • @dvidschmdt
    @dvidschmdt 5 лет назад +64

    Always a joy watching you guys goofing around. 😊 Gut!

  • @isfland
    @isfland 5 лет назад +6

    Great format! I like how JS concepts are explained in a dialogue between two engineers. This is definitely more catchy and entertaining that listening a solo talk.

  • @aadlr
    @aadlr 5 лет назад +14

    Great video. It's either comforting or terrifying to see experienced devs perplexed about the absolute basics of JavaScript execution 🙂

  • @niteshtiwary9010
    @niteshtiwary9010 5 лет назад +2

    Even before let and const there existed something like block scoping for catch block and for with().....just amazing stuff by you guys.... didn't know when 17m just passed. Will wait for another one like this. Thanks a lot.

    • @prerakhere
      @prerakhere 5 лет назад

      Well, what i heard in this video was variables in the catch block also tend to be available in the global/parent scope. You wrote catch as block scope. Correct me if i am wrong. But with with it's block.

  • @dibri
    @dibri 2 года назад

    following this was a super fun way to learn scopes

  • @EmielZuurbier
    @EmielZuurbier 5 лет назад +15

    About the question at 7:50: self and window are not equal when used in Service Workers. The window object does not exist there and so self is referring to the global scope of the Service Worker. This does also apply to Web Workers.

    • @jakearchibald
      @jakearchibald 5 лет назад +6

      Yeah, that's why I said "window" is only available in a document

    • @LuLeBe
      @LuLeBe 2 года назад

      Well the window is not available at all so it's like in node, where of course there's no windows as well. But I think Surma meant that there could be code that can access both self and window but something would be different about them.

  • @soogardev
    @soogardev 3 года назад

    please, keep posting content like this. such a joy to watch and learn!

  • @victornpb
    @victornpb 5 лет назад +1

    I was so happy that I guessed both *with* and the *catch* correctly! The only time I will get a question from google right...

  • @sprintwithcarlos
    @sprintwithcarlos 5 лет назад

    Very good!!! This is undoubtedly one of the important resources for developers today. Thank you for teaching us

  • @LarsRyeJeppesen
    @LarsRyeJeppesen 5 лет назад +7

    Very informative, Coach. Oh, and Dark Theme in Chrome76 is fcking awesome... just added support on our company website in development.

    • @FunctionGermany
      @FunctionGermany 4 года назад

      Do you mean Dark Themed Dev Tools, or something else?

  • @jasonxrowland
    @jasonxrowland 5 лет назад +1

    I love this kind of deep nerdy content!

    • @jasonxrowland
      @jasonxrowland 5 лет назад

      Not deep exactly. More like very focused on the nitty little details that you only encounter in somebody else’s code ;)

  • @rzr1191
    @rzr1191 2 года назад

    by far the best dev series on youtube

  • @IceMetalPunk
    @IceMetalPunk 5 лет назад +1

    Even better than explicitly declaring variables on `self.whatever` to be used in another script is to encapsulate whatever you need in a class or constructor function in the first place :)

  • @hypersonic12
    @hypersonic12 5 лет назад

    I like that the Twitter poll ended up in an episode! Makes a nice bit of interactivity to the video

  • @GottZ
    @GottZ 4 года назад

    yet again another great video youtube recommended to me even though i have already seen it

  • @helloimbasa
    @helloimbasa 4 года назад +1

    Also, a var declared in global scope overrides an existing window property:
    window.foo = { a: 'a' };
    var foo = { b: 'b' };
    console.log(window.foo);
    console.log(foo);
    console.log(window.foo === foo);
    // outputs:
    // {b: "b"}
    // {b: "b"}
    // true

  • @doug2279
    @doug2279 4 года назад

    amazing videos, really good stuff should be on the BBC

  • @JIJzerman
    @JIJzerman 4 года назад

    Seeing the with statement reminded me of the JavaScript-Based Style Sheets W3C proposal. That thing was full of with statements.

  • @ColinRichardson
    @ColinRichardson 5 лет назад +1

    I just wanted to point out, that nested function arguments do not bubble up to the parent function either. Like how catch(err) doesn't.
    Though, I didn't know about with(), but mainly because I knew to stay away from that black magic

    • @jakearchibald
      @jakearchibald 5 лет назад

      Don't nested function arguments have function scope?

    • @ColinRichardson
      @ColinRichardson 5 лет назад

      They have their own inner function scope yes. They don't get hoisted to outer function. I've had the same convo with about 6 different co-workers in the past. And sometimes peeps just need a finder of what does and doesn't get hoisted and to where.
      The other convo is always pass by reference pass by value, though I never worked out why they have such massive problems with it.

    • @victornpb
      @victornpb 5 лет назад

      function arguments behave the same as having then declared with *var* inside then, except they come initialized.

  • @kenridge2
    @kenridge2 5 лет назад +2

    Comment: I officially declare this to be good content.

  • @mathiasbynens1518
    @mathiasbynens1518 5 лет назад

    07:55 "a case where self and window are not equal", I guess it's the case you mentioned previously, i.e. a worker? window is not available (and thus `undefined`) in workers, but self is.

    • @jakearchibald
      @jakearchibald 5 лет назад +1

      Pretty confident Surma was talking about another case. He's pretty familiar with workers 😀(but I don't think there's a case where they point to different objects)

  • @b3rakesh11
    @b3rakesh11 5 лет назад

    Awesome

  • @muamersmajlovic2437
    @muamersmajlovic2437 5 лет назад +4

    There was no "self" back in those days, especially for closures it had to be defined as var self = this;
    Great videos tho

  • @bayroncastillo7653
    @bayroncastillo7653 3 года назад

    thanks quite funny haha

  • @binsitt
    @binsitt 5 лет назад

    Nice! But what quiz is Jake (I guess, I mean the left person from camera view) talking about?

  • @Benimation
    @Benimation 4 года назад +1

    _self === window_ and _self === globalThis_ are both true

  • @doug2279
    @doug2279 4 года назад

    self and window are different in workers

  • @teamgartz-motorsports6881
    @teamgartz-motorsports6881 5 лет назад

    I love your videos is so educational and fun! The catch have a function behavior being a block, shortcut implementation, like typeof is an expression that takes a statement not a param but can written as function call but don’t behave like, ah love those WAT from JS :)
    Btw the global context refer to globalThis, I think you meant const/let are in the global scope (block) but not in the context.

    • @jakearchibald
      @jakearchibald 5 лет назад

      Sorry if that wasn't clear. Both the global and global object are part of the global environment record (tc39.es/ecma262/#sec-global-environment-records), but yes, let & const go on the declarative part of the record, not the object.

  • @avilde
    @avilde 5 лет назад +2

    The only case I could think of regarding self and window is :
    window.self !== window.top

  • @victornpb
    @victornpb 5 лет назад

    Now I'm wondering what happens with variables declared inside *_with_* without *_var_* , in all those cases...

    • @jakearchibald
      @jakearchibald 5 лет назад

      It bubbles up to the global scope

    • @prerakhere
      @prerakhere 5 лет назад

      @@jakearchibald well, with var, does it also bubbles to global when used inside *with* ? Because var seems to be hoisted. Is with an exception or something like that?

  • @SaltPacket
    @SaltPacket 5 лет назад

    WordPress uses this script global scope to pass PHP variables to scripts

  • @JoaoPucci
    @JoaoPucci 5 лет назад

    A series like this on the Android channel pls x.x

  • @CyberAcidPlanet
    @CyberAcidPlanet 5 лет назад

    Regarding passing data from SSR to your app it has been stated by V8 team that using JSON will be always faster than actually assigning data to some global object in a script tag. At least in Chrome. If you have a big state object you'd probably better stick with JSON.
    v8.dev/blog/cost-of-javascript-2019#json

  • @rohitchopra8389
    @rohitchopra8389 3 года назад

    self is not window in a script in

    • @jakearchibald
      @jakearchibald 3 года назад

      I'm pretty sure they're the same in an . They're just not the same as the same values in another frame.

  • @RAYDENfilipp
    @RAYDENfilipp 5 лет назад

    Great video but if only you had a textual summary or similar to help people memorize what the video was about it would be much better.

  • @GottZ
    @GottZ 5 лет назад

    self and window not equal? ye.. s

    • @jakearchibald
      @jakearchibald 5 лет назад +1

      I'm pretty sure window & self are still the same there.

  • @MrChaosi
    @MrChaosi 5 лет назад

    thats some messy shit

  • @samirsaeedi74
    @samirsaeedi74 5 лет назад

    1:19 butwhy.gif

    • @jakearchibald
      @jakearchibald 5 лет назад +3

      Thank Microsoft. Defer was something they threw into Internet Explorer without standardisation, and by the time it came to standardisation the behaviour couldn't be changed without breaking content.

  • @tapiomakinen
    @tapiomakinen 5 лет назад +2

    I am 6 minutes in, and I have learned nothing yet. Why could you not give the info straight away?

    • @jakearchibald
      @jakearchibald 5 лет назад +14

      I have read 7 words of this comment and haven't learned anything yet. Why did you post it?

    • @prerakhere
      @prerakhere 5 лет назад

      I learnt a lot. Come back after spending some time with js. Not suitable for beginners.

  • @HighestRank
    @HighestRank 5 лет назад

    Any reason that that the sounds of passing gas couldn’t be edited out at 3:06?

    • @jakearchibald
      @jakearchibald 5 лет назад +2

      Because it's a gasp? "It's in a function, *gasp*!"