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
const until you can't
@GS7999
22 күн бұрын
Well said buddy.
@danj8404
22 күн бұрын
Fully agree
@Mr.RobotHead
22 күн бұрын
Yup, and just about any linting config will say the same.
@Dorchwoods
22 күн бұрын
Yup, and then use let :)
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
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
15 минут бұрын
He's constantly noding it's annoying. If he added even more sounds too; I would be driven insane.
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.
Const should always be the default.
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
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
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
21 күн бұрын
I agree with you. Just do not want people doing something that can be hard to maintain.
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
22 күн бұрын
Elon probably is 😂
@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
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
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
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.
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).
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.
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
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
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.
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.
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.
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
20 күн бұрын
My thoughts exactly...
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.
One more important aspect regarding var ,let &const is var can approach to global scope results in memory consumption while deallocating after execution
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.
bundlers and transpilers still convert `let` and `const` into `var` and also move the declarations if necessary.
@montebont
20 күн бұрын
Example? I never noticed this...
Great video. Thank you!
Glad you two got together finally!
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
21 күн бұрын
I like that analogy! Though no need to be so hard on yourself 😂
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
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" }
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.
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!
Seeing var in my old company code gives me anger
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
20 күн бұрын
You can prevent that with good (1d) data structuring ;-)
I am happy u teach us JavaScript now
Thank you both.
Thanks Kevin for the video
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 ;-)
And you can declare a var in a function and change its value in another function, right? (which you can"t do with let)
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
10 минут бұрын
He's not the host. He's the guest. But you should know that since you have watched the channel before.
And the best part is - Programm works even without let, var, or const... 😊 variable= value;
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.
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
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
42 секунд бұрын
RSI, those two extra letters will destroy your wrists.
Kevin we want you teach us JavaScript also . Thank you kavin
Kevin with JS ❤
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
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.
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
22 күн бұрын
Generally, no. The actual use cases are so niche, I wouldn't even worry about them
@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
21 күн бұрын
@@kacperkonieczny7333 Please elaborate as I use closures a lot and never saw any need or advantage for a *var* there.
I ❤const
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.
Typescript - const arr = [...] as const; none mutable array.
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...
Javascript finally!
Could you do video on overlaping
I’m using const since some time now. Even for defining functions. To me it makes the behavior much more predictable!
Love these shorter gap closing videos! Keep up the great work, Kevin!
@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.
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.
I was hoping this video would start with “hello my backend friends” 😂
@docgenius42archergames31
22 күн бұрын
it's still frontend though
@liannotti2
20 күн бұрын
Be careful what you wish for. Kevin will be trying to teach us PHP next.
Const always.
thanks nerds :)
Well we need two more; int and float
Love this
last thing i expeceted to see on this channel lol
thanks for this. I've wondered this for a long time.
I thought we would talk about hoisting here :(
var reading this comment section be like: "Time to go rogue" 🤨🤨
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*
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.
The biggest crime here is not 'var' but using light mode in his editor 😮
You should bother to think about whether your variable will change.
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
20 күн бұрын
Good point...Var comes from the days of Windows XP...
@Andris_Briedis
20 күн бұрын
@@montebont "var" comes long before WinXP. G: "JS type "var" since when"
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.
12 minutes? Tl;dw Don't use var If it can change use let If it can't change use const
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
20 күн бұрын
It also helps memory management...
There are betters channels to learn and understand Javascript (same for css).
use var wizard, not var item stupid mistake
Make a video on responsive design
let as the deafult ? Smh Someone call the FBI
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 !
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`.
I unsub'ed from Chris' newsletter after a few emails where he started talking politics. Keep that toxic sh*t out bro.
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.
real men only use var
@daveklassen7052
22 күн бұрын
real men only use binary ...