JavaScript var, let, and const explained

Learn more from Chris 👉 gomakethings.com/kevin-powell/
🔗 Links
✅ The source code from this video: gist.github.com/cferdinandi/9...
✅ More from Chris: gomakethings.com/kevin-powell/
⌚ Timestamps
00:00 - Introduction
00:47 - The basics of var
01:22 - The problem with var
03:55 - Comparing var to CSS selectors
04:41 - let
06:07 - const
07:04 - You can change a const, but not override it
08:01 - How to decide which one to use
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZread channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 113

  • @fred_kamm
    @fred_kamm22 күн бұрын

    const until you can't

  • @GS7999

    @GS7999

    22 күн бұрын

    Well said buddy.

  • @danj8404

    @danj8404

    22 күн бұрын

    Fully agree

  • @Mr.RobotHead

    @Mr.RobotHead

    22 күн бұрын

    Yup, and just about any linting config will say the same.

  • @Dorchwoods

    @Dorchwoods

    22 күн бұрын

    Yup, and then use let :)

  • @Turabbo
    @Turabbo20 күн бұрын

    Another really fun one dude! I do interviewing for my job and if I was to offer some unsolicited advice; a few more affirmation noises from you would really help ease the tension in these guest videos. Whenever you nod and smile, pairing it more frequently with a sound like "ahh", "uhuh", "got it!" goes a long way to keep you present in the dialogue and confirm to the guest subconsciously that this is still a conversation. They're a guest after all, so we're watching two people not one. Additionally, looking directly into the lens is lovely when you're just addressing us, but you'll notice that none of your guests do that. They're always looking at you, but slightly off to the side. This is just standard learned body language for video calls, so if your guest is doing it, you should probably mirror it. And I really love when you interject to clarify things it's really helpful.

  • @Nitrxgen

    @Nitrxgen

    7 сағат бұрын

    I'm glad Kevin doesn't repeatedly vocalise acknowledgement on points, I feel like once I start noticing that it will become too distracting and I'll keep thinking to myself "Dude shut up and just let him talk." Although it's a guest video, I don't think it's meant to have an interview theme. I'm personally more focused on the delivery of raw information than the video presentation surrounding the content delivery. I've been a interviewee a number of times in programming roles with non-technical interviewers and feel like I get discriminated against because I'm not that social, I'm a quiet person, I'm not an open book, I'm very privacy-focused, I'm conservative and keep personal traits to myself, but I do know how to program and am very confident with it, but tend to have difficulties with interviews so I don't think making a video like this interview-focused is relatable or a good idea at all.

  • @heinzerbrew

    @heinzerbrew

    15 минут бұрын

    He's constantly noding it's annoying. If he added even more sounds too; I would be driven insane.

  • @yogibarista2818
    @yogibarista281822 күн бұрын

    Although they exist, there are very few situations where you would NOT want variable scoping - I changed var to let in all of my legacy code, and I think I can count on one hand the number of times it needed to remain var.

  • @chyldstudios
    @chyldstudios22 күн бұрын

    Const should always be the default.

  • @scottborrowman
    @scottborrowman22 күн бұрын

    I, personally, prefer const over let and only use let if I need the variable to change within a single iteration of the function. I tend to set up const with a ternary if I need it conditional different for that single iteration but will always be that value for that iteration.

  • @deatho0ne587

    @deatho0ne587

    21 күн бұрын

    Never let your ternaries get out of hand. If it is more than one ? & a : then it most likely to complex to read in another month. I agree with you for the most part though.

  • @scottborrowman

    @scottborrowman

    21 күн бұрын

    @@deatho0ne587 Yup. Usually a rare case a const can have more than 2 options, though. And if it does, it usually means you need more variables to break down everything that is going on.

  • @deatho0ne587

    @deatho0ne587

    21 күн бұрын

    I agree with you. Just do not want people doing something that can be hard to maintain.

  • @ripwolfe
    @ripwolfe22 күн бұрын

    I always use 'const' by default. I've found over the years that if I feel compelled to use 'let' it's usually an indicator that my code might not be as robust as it could be. I'll never understand the "let" is two letters shorter argument. Any "savings" you gain from typing two fewer characters is swallowed up by host of other work that you need to do as a developer. No one is counting your keystrokes (at least, I hope not).

  • @cmpc724

    @cmpc724

    22 күн бұрын

    Elon probably is 😂

  • @dankierson

    @dankierson

    21 күн бұрын

    Lots of situations where a variable is changing value, e.g. the index number of the current slideshow image, strings like page-state , booleans like a cycling indicator on an animatable/off part of a web page. There will be a *let* - it must be 🎹

  • @ripwolfe

    @ripwolfe

    21 күн бұрын

    @@dankierson Take a look at declarative and functional programming paradigms. JS isn't a fully functional lang, but it's close enough that you can refactor a lot of imperative code in ways that greatly reduce the use of 'let'.

  • @benzflynn

    @benzflynn

    21 күн бұрын

    @@ripwolfe And we all do, Wolfe. But we can't remove it entirely. Besides, where's the harm in *let* ? It's not *var* we're talking about here. Storm in a cawfee cup for Chrissakes.

  • @jozzetv

    @jozzetv

    21 күн бұрын

    i also go the always const route. But another way someone could do it, is just use their let and then let the linter decide at the end :D If the variable is not changed, let it replace your lets with const.... would also be a solution. But id rather do default const.

  • @CristianKirk
    @CristianKirk22 күн бұрын

    I use const for constants and var for variables :D By the way, I fully support JS content on this channel. (Pure JS, not that crap from frameworks).

  • @justingiovanetti
    @justingiovanetti22 күн бұрын

    As per your first example, without var, variables are puts into the global space. Clearly different than using var. var is function scoped. Your example just happens to be in a global space.

  • @eksperiment6269
    @eksperiment626922 күн бұрын

    A small thing that also differs with these, is when a variable is declared in the global scope. If you are using var globally, that variable will attach to the window object, meaning you can access it by window.myVariable. let and const doesn't do this. That means, that should you be in the quite specific scenario of having to access the global variable by string, like this window["myVariable"], it can only be done with var. It is a quite narrow scenario, but I have come across the need of it myself.

  • @kacperkonieczny7333

    @kacperkonieczny7333

    22 күн бұрын

    and also if you don't use var/let/const to declare it (though then if you're using strict mode it will throw error). It will be like writing window.myVariable

  • @ksaenable
    @ksaenable21 күн бұрын

    Just wanna say how great of an explainer Chris Ferdinandi is. I purchased some of his courses and they were the only ones that really clicked for me in understanding JavaScript. Even sometimes when I hit a barrier of knowledge, Chris's site is my first go-to to check if he has a Blogpost or course about it.

  • @stevenstraker5105
    @stevenstraker510518 күн бұрын

    After working with languages like C and C++, I started thinking of variables as pointers of memory storage, rather than value storage. With that mindset, const is a constant reference to a memory pointer that can't be reassigned, but object properties/qualities stored in the pointer can be altered. This explains why arrays and objects (and scalar prototypes) can be changed, but scalar values cannot. I also subscribe to const primarily, but I'm generally biased towards OOP, where most variables I work with are objects anyway, so I make very limited use of let. An example of such limited use is with traditional for and while loops, though for arrays of objects, using const (for const x of y {...}) is just fine.

  • @feldinho
    @feldinho22 күн бұрын

    To me, const is the default not because it is special, but because let is. I use let to let others know that the value is going to change down the line.

  • @lukerazor1
    @lukerazor122 күн бұрын

    I think const vs let should reflect the intent of the code, do you want it to change or not? Plus if one of my developers tried to commit code that relied on the fuzzy nature of var to work I would tell them to rewrite it so it didn't

  • @montebont

    @montebont

    20 күн бұрын

    My thoughts exactly...

  • @robkom
    @robkom21 күн бұрын

    I'm a "lazy developer" too, but that means setting up tools and automations to do boring / repetitive tasks so then I never have to waste time thinking about it. My IDE, ESLint, and Prettier take care of automatically catching and updating let and const declarations. Also, you absolutely should worry about variables changing, that's part of building software. And if you don't want to think about it, then defaulting to const makes more sense; if the variable shouldn't be re-assigned, you're good. If the variable should be re-assigned, then your IDE/linting/build-tooling will let you know and you can update it.

  • @MrRAHUL7777777
    @MrRAHUL777777717 күн бұрын

    One more important aspect regarding var ,let &const is var can approach to global scope results in memory consumption while deallocating after execution

  • @bobmonsour
    @bobmonsour15 күн бұрын

    Thanks, Kevin! This has been an open tab since it came out. Finally watched it. Chris is so very good at these kinds of explanations. This one was very helpful.

  • @CirTap
    @CirTap21 күн бұрын

    bundlers and transpilers still convert `let` and `const` into `var` and also move the declarations if necessary.

  • @montebont

    @montebont

    20 күн бұрын

    Example? I never noticed this...

  • @Rhysling2
    @Rhysling222 күн бұрын

    Great video. Thank you!

  • @DylanArcher
    @DylanArcher21 күн бұрын

    Glad you two got together finally!

  • @CarlosHernandez101400
    @CarlosHernandez10140021 күн бұрын

    I use const when I'm defining html elements with querySelector. What I think development comes down to is: programming is a language, and everyone has an accent. Your accent might be a refined English accent (think Patrick Stewart), while someone else might "sound" like Hank Hill. Personally, my accent would be similar to the cross-eyed guy from "The Waterboy."

  • @KevinPowell

    @KevinPowell

    21 күн бұрын

    I like that analogy! Though no need to be so hard on yourself 😂

  • @JosephCodette
    @JosephCodette21 күн бұрын

    A big thing not mentioned is that var can be hoisted from anywhere in the code , which can cause issues , that’s why let is there . Const does not make sense in JavaScript, because it is not really a constant as it would be in other languages . I think of const as a good motivator / indicator to be mindful of where and when you declare a variable.

  • @stevenstraker5105

    @stevenstraker5105

    18 күн бұрын

    I'd say the constant part of const is a reference to the pointer of the variable than to the contents of the variable. Ie. If const x = { name: "bob" }, then the pointer reference of that object is stored to x, and a pointer to a separate object (say { name: "sally" }) cannot be set to x. However, you can update x.name = "sally", because the pointer of the variable is not changing. { name: "sally" } !== { name: "sally" }

  • @nomadshiba
    @nomadshiba22 күн бұрын

    8:40 especially with ts, or jsdoc comments, its better to use const, because `let`s says value can change and typescript acts like it can change too, making your life harder.

  • @itsPenguinBoy
    @itsPenguinBoy22 күн бұрын

    I have never had any training so I found 'var' easy to remember and use it everywhere and rarely had any problems and when I do, I use const. But it's good to have a proper explanation!

  • @NamVu-im2xm
    @NamVu-im2xm22 күн бұрын

    Seeing var in my old company code gives me anger

  • @niza.v1
    @niza.v122 күн бұрын

    It would cool to mention that you can achieve array or object immutability using `Object.freeze`. This is especially handy for enums. Just note that freezing is not deep, i.e. it doesn’t protect nested objects.

  • @montebont

    @montebont

    20 күн бұрын

    You can prevent that with good (1d) data structuring ;-)

  • @arifurrahman9133
    @arifurrahman913321 күн бұрын

    I am happy u teach us JavaScript now

  • @rameenana
    @rameenana21 күн бұрын

    Thank you both.

  • @mverma7845
    @mverma784521 күн бұрын

    Thanks Kevin for the video

  • @montebont
    @montebont20 күн бұрын

    Nice intro. Opinionated. But hey...aren't we all ;-) Just a few things: You _should_ but do not need to declare a variable. That is how 'global' jQuery ($) and Underscore (_) work. In general this is a good approach for global utility libraries. Scoping has its uses but so do global variables or functions. You can not re-assign a new value to a const. But if it is an object you still can add key-value pairs or modify the value of any key. If you do not want that (say for lookup tables with constants) you can 'freeze' the const. So: nice helpful intro...thanks for sharing. But IMHO it is slightly more complicated - apart from programming style ;-)

  • @pamelatrucsas97
    @pamelatrucsas9721 күн бұрын

    And you can declare a var in a function and change its value in another function, right? (which you can"t do with let)

  • @danj8404
    @danj840422 күн бұрын

    I agree with the comments and disagree with the host. const unless need to be let. and 'var' is just bad No thumbs up. A first time for when I watch videos on this channel.

  • @heinzerbrew

    @heinzerbrew

    10 минут бұрын

    He's not the host. He's the guest. But you should know that since you have watched the channel before.

  • @danielgago-sk
    @danielgago-sk20 күн бұрын

    And the best part is - Programm works even without let, var, or const... 😊 variable= value;

  • @kacperkonieczny7333
    @kacperkonieczny733322 күн бұрын

    My approach: Is it a object? Yes - const No - Can it change at runtime? Yes - let No - const The only place I use var for are closures which are like objects with private properties. Also I don't 100% stick to this approach. I sometimes use var for the things declared in the few first lines globally and sometimes I change a variable into a object in those lines without making it a const, which I should not do.

  • @lougarcia28
    @lougarcia2822 күн бұрын

    I'm not entirely sure why it is hard to use "const" most of the time and use "let" when you need it. I just don't get it.

  • @kacperkonieczny7333

    @kacperkonieczny7333

    22 күн бұрын

    I guess muscle memory and not planning out what certainly won't change at runtime and what can, which is bad cause you as a programmer should have at least a rough idea of it

  • @heinzerbrew

    @heinzerbrew

    42 секунд бұрын

    RSI, those two extra letters will destroy your wrists.

  • @arifurrahman9133
    @arifurrahman913318 күн бұрын

    Kevin we want you teach us JavaScript also . Thank you kavin

  • @VirendraBG
    @VirendraBG22 күн бұрын

    Kevin with JS ❤

  • @lawrencepsteele
    @lawrencepsteele22 күн бұрын

    Thank you! One of the things about being full stack (hardware-db-middleware-backend-frontend) is you embody "Jack of all trades, master of none." I often wondered why the three declaration types but never took the time to explore. Funny that I find out after I retire.

  • @daveklassen7052

    @daveklassen7052

    22 күн бұрын

    @@SW-fh7he When I started working with JS, Let was not part of it, in fact I have not used much JS since Let became part of it, since JS is not part of my normal stack these days ... so I can see why someone that is retired now may not have considered it much.

  • @ClarkeDesign
    @ClarkeDesign22 күн бұрын

    I use IntelliJ for all my coding, and it always likes to replace var with let or const. Is there anytime where var would still be useful?

  • @KevinPowell

    @KevinPowell

    22 күн бұрын

    Generally, no. The actual use cases are so niche, I wouldn't even worry about them

  • @kacperkonieczny7333

    @kacperkonieczny7333

    22 күн бұрын

    Only thing that var is useful for are closures and they can be mimicked with a objest created from a class that has private properties. So most of the time you don't need it

  • @benzflynn

    @benzflynn

    21 күн бұрын

    @@kacperkonieczny7333 Please elaborate as I use closures a lot and never saw any need or advantage for a *var* there.

  • @germantoenglish898
    @germantoenglish89822 күн бұрын

    I ❤const

  • @TomasMisura
    @TomasMisura18 күн бұрын

    To be honest, I'm still experimenting with variables like const, var, and let, regardless of the number of courses I've taken and videos I've watched. It seems to me it's somewhat of a trend; I use const or var based on my current mood.

  • @deatho0ne587
    @deatho0ne58721 күн бұрын

    Typescript - const arr = [...] as const; none mutable array.

  • @LethalLuggage
    @LethalLuggage21 күн бұрын

    In that example with wixard and item... Let also shouldnt work becauae item is already defined?? You cant access the inner one once it ends but inside the inner one you can definitely access the outer one...

  • @juliusuwuigbe3274
    @juliusuwuigbe327422 күн бұрын

    Javascript finally!

  • @moneyfr
    @moneyfr21 күн бұрын

    Could you do video on overlaping

  • @Linuxdirk
    @Linuxdirk22 күн бұрын

    I’m using const since some time now. Even for defining functions. To me it makes the behavior much more predictable!

  • @Metalvain4
    @Metalvain422 күн бұрын

    Love these shorter gap closing videos! Keep up the great work, Kevin!

  • @Arunnn241

    @Arunnn241

    22 күн бұрын

    If you're looking for short videos with good examples that deliver a good amount of information, might I recommend Fireship's videos and shorts.

  • @pandaclouds650
    @pandaclouds6507 күн бұрын

    can you do a tutorial about NPM? i've been searching a npm tutorial but almost are 5yrs ago, and i cant follow it cause its not updated.

  • @hsvandrew
    @hsvandrew22 күн бұрын

    I was hoping this video would start with “hello my backend friends” 😂

  • @docgenius42archergames31

    @docgenius42archergames31

    22 күн бұрын

    it's still frontend though

  • @liannotti2

    @liannotti2

    20 күн бұрын

    Be careful what you wish for. Kevin will be trying to teach us PHP next.

  • @johnryder8464
    @johnryder846421 күн бұрын

    Const always.

  • @rafa6536
    @rafa653622 күн бұрын

    thanks nerds :)

  • @michaelbeaver8281
    @michaelbeaver828121 күн бұрын

    Well we need two more; int and float

  • @amekudzilab
    @amekudzilab22 күн бұрын

    Love this

  • @justdude2599
    @justdude259922 күн бұрын

    last thing i expeceted to see on this channel lol

  • @hoshi411
    @hoshi41121 күн бұрын

    thanks for this. I've wondered this for a long time.

  • @mudyeet_
    @mudyeet_38 минут бұрын

    I thought we would talk about hoisting here :(

  • @sicfxmusic
    @sicfxmusic22 күн бұрын

    var reading this comment section be like: "Time to go rogue" 🤨🤨

  • @benzflynn
    @benzflynn21 күн бұрын

    Leave JavaScript to others, Kevin, if this is your goto guy. It's nuts to use *let* unless its flexibility is needed: never give a system more entropy than it needs. Makes far more sense to use *const* for all Object types in JS, this includes collections of any type, primitive or Object. And for primitive types ask yourself if this thing is ever going to change . . . if so, use *let* and otherwise use old *const* again. To hell with *var*

  • @travman162
    @travman16219 күн бұрын

    I'm all for being a lazy developer, but using 'let' instead of 'const' because it's easier to type is a wild take. Probably the canary in the coalmine of generally not great code.

  • @pendaco
    @pendaco22 күн бұрын

    The biggest crime here is not 'var' but using light mode in his editor 😮

  • @pappapez
    @pappapez22 күн бұрын

    You should bother to think about whether your variable will change.

  • @Andris_Briedis
    @Andris_Briedis21 күн бұрын

    The missing info is that "var" was the only variable type for a long time and now it is practically left in JS only for compatibility with the older code. Not for use in new codes.

  • @montebont

    @montebont

    20 күн бұрын

    Good point...Var comes from the days of Windows XP...

  • @Andris_Briedis

    @Andris_Briedis

    20 күн бұрын

    @@montebont "var" comes long before WinXP. G: "JS type "var" since when"

  • @ray73864
    @ray7386422 күн бұрын

    The problem with 'let' as the default is that I as the user, can now also change the value. Which means if you have forgotten to validate everything on the backend before it goes into the database, the user wins. I am in the 'const as default' camp. Also, don't think of it as 'changing the variable' think of it as 'overriding the existing value of the variable with a new value'. Let lets you override or replace the existing value with a new one, const does not. Once you think like that, it becomes obvious why arrays work with const. Also note that Javascript isn't the only one that lets you manipulate a const array, other languages allow it too, so Javascript in this instance is just following the norm. One of the few languages that won't let you define an array as a const is 'C#', you have to define it as readonly there.

  • @JamesWelbes
    @JamesWelbes12 күн бұрын

    12 minutes? Tl;dw Don't use var If it can change use let If it can't change use const

  • @vibalciunas
    @vibalciunas22 күн бұрын

    Lots of talk and not a word about performance. When 'var' is converted to bytecode, the scope check procedure call is skipped, so it's faster than 'let' or 'const'.

  • 21 күн бұрын

    "Worry about the performance of your code when and if your code has a performance problem." The difference is neglibile in the vast majority of cases.

  • @montebont

    @montebont

    20 күн бұрын

    It also helps memory management...

  • @florentd.5817
    @florentd.581719 күн бұрын

    There are betters channels to learn and understand Javascript (same for css).

  • @dancarter6044
    @dancarter604413 күн бұрын

    use var wizard, not var item stupid mistake

  • @gajukumar456
    @gajukumar45622 күн бұрын

    Make a video on responsive design

  • @115switch
    @115switch22 күн бұрын

    let as the deafult ? Smh Someone call the FBI

  • @tomdelong-qj5ov
    @tomdelong-qj5ov20 күн бұрын

    No way am I going to listen to someone who uses let for everything because they’re too lazy to think will I reassign this or type 2 extra characters Horrible take !

  • @Arunnn241
    @Arunnn24122 күн бұрын

    As someone who dabbles in web dev, I find this video to be lazy content. Sure, the title basically attracts beginner developers but there's nothing here in 12 min that isn't in a 60 second Fireship video. There's not a lot of value in the explanation or examples either. The basic yet incredibly key piece of information that the guy does not state explicitly is that `const` does not allow *"reassignments"* which is a really important concept in computer science and more specifically memory management and leads nicely into an explanation on why `const` was introduced when `let` had already existed, why it's actually not strange pushing to a const declared list and why one might want to use `const` instead of `let`.

  • @ce9916
    @ce991617 күн бұрын

    I unsub'ed from Chris' newsletter after a few emails where he started talking politics. Keep that toxic sh*t out bro.

  • @AhmadNasriya
    @AhmadNasriya21 күн бұрын

    const should always be used unless absolutely necessary to use let. It's much safer that way. If a developer who works for me told me he uses "let" instead of "const" because of the excuses you've just given, I'd fire him immediately. Your guest is not the sharpest, Kevin, and a terrible choice to invite. You should not have published this video.

  • @dionisii93
    @dionisii9322 күн бұрын

    real men only use var

  • @daveklassen7052

    @daveklassen7052

    22 күн бұрын

    real men only use binary ...