var, let and const - What, why and how - ES6 JavaScript Features

Рет қаралды 180,333

8 жыл бұрын

💖 Support the show by becoming a Patreon
/ funfunfunction
In ES5, we only had one type of variable, var, but in ES6, we have three. types of variables: var, let and const. In this video, we explore the what, why, and how of var, let and const, and I also do a little lecture on the value of minimising mutable state.
► 00:35 var keyword in JavaScript
► 02:35 Immediately-Invoked Function Expression (IIFE) in JavaScript
► 03:14 hoisting variables in JavaScript
► 08:29 let keyword in JavaScript
► 11:55 const keyword in JavaScript
► 14:14 Minimize mutable state when programming
I'm also active on:
- Twitter / mpjme
- Medium / mpjme
- Quora www.quora.com/profile/Mattias...
Resources:
- Semicolons cannot save you! (Another funfunfunction video)
• Semicolons cannot save...
- ES6 JavaScript Features (Playlist of this series)
• Generators in JavaScri...
💛 Follow on Twitch
We record the show live Mondays 7 AM PT
/ funfunfunction
💛 Fun Fun Forum
Private discussion forum with other viewers in between shows. www.funfunforum.com. Available to patron members, become one at / funfunfunction
💛 mpj on Twitter
/ mpjme
💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:
circleci.funfunfunction.com
💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:
quokka.funfunfunction.com
💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly KZfaq shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.
🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.
Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.
📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.
⏯ On Fridays, an edited version of the show is adapted for and published on KZfaq.
Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Software Development, Project Management

Пікірлер: 551

@webapplication9086 7 жыл бұрын

You are the most friendly instructor in the world

@funfunfunction 7 жыл бұрын

+Web Application awwww thanks

@webapplication9086 7 жыл бұрын

funfunfunction Can you give me your name on facebook?

@leandrogoncalvesdeoliveira9201 8 жыл бұрын

TIL: always use 'const'. If you *REALLY* need to change state, use 'let'. 'var' is dead. Thanks! ;)

@jordancotter5885 8 жыл бұрын

would 'let' still be useful because of the way it's scoped? ...regardless if you need to change it?

@pajn 8 жыл бұрын

const has the same scoping as let

@leandrogoncalvesdeoliveira9201 8 жыл бұрын

'const' is block scoped like 'let' :} awesome feature! (function () { const a = 3; if (true) { const a = 5; // no error, block scoped! console.log(a); // outputs 5 } console.log(a); // outputs 3 })();

@jordancotter5885 8 жыл бұрын

That isn't true Rasmus. const will behave like so: if (true) const x = 5; console.log (x);//5 While let would behave differently: if (true) let x = 5; console.log (x)//Block-scoped declaration

@leandrogoncalvesdeoliveira9201 8 жыл бұрын

MDN says 'const' behave like 'let', Jordan. (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) (function () { var x = 'nope'; if (true) { // block-level const x = 23; console.log(x); // 23 } console.log(x); // 'nope' if (true) { // block-level let x = 42; console.log(x); // 42 } console.log(x); // 'nope' })();

@atxaqualion75 8 жыл бұрын

Good stuff. Immutability is really key to taking advantages of higher level programming languages that can parallel process your code without explicitly defining how the parallel processing occurs. This is why functional programming languages such as Scala, Clojure, etc. are gaining traction. I've been using JavaScript for 20 years and several of your JavaScript-centric episodes teach me something new about how things work "under the hood". Thanks mpj.

@erickvoodoo1993 8 жыл бұрын

Thank you! I've been waited for next lesson about ES6 features and now I have it!

@enterteg 7 жыл бұрын

I love the scenography in your room :) Great videos, great job! You are very inspiring, thanks a lot!

@gabrielbalsa1843 7 жыл бұрын

Excellent videos! I followed you on twitter first where I knew about FunFunFunction and I'm McLoving it! Keep it up!

@qwarlockz8017 8 жыл бұрын

First off of course... thanks so much for your great videos! I really enjoy them. Programmers are getting this now but historically this was a condition that pianists got. This has been topic of conversation for pianists for since the first piano was built. Some of the advice is to have your arm parallel to the floor and to keep your wrist straight (so as to not cut off blood or restrict the nerves) an d to let the weight of your arm or hand coming down (ie gravity) is what provides the force to hit the keys not forcing the arm down. Lots of books on piano technique out there that all programmers should look at.

@afitnessca 6 жыл бұрын

Hey just wanted to say thanks. I am a 3 years into Java development, was trained in one of the software development bootcamps and learned ruby. As JavaScript is taking over the world my knowledge about it was very basic, and your tutorials makes me interested to apply more of these principles. I do find your videos very engaging, very informative, clear and concise. Thank you.

@sunilsandhu6717 7 жыл бұрын

Subscribed to your channel after coming across this video - super educational, super entertaining and supremely accessible - you the funkiest!

@josemarin359 6 жыл бұрын

Thanks a lot for your great effort. It is really fun to watch. I love the role plays with different characters to see all the different angles. I have noticed the way you express your self with words that stress the reserve words you are explaining. It sparks my neurons and keep me focus. Interestingly I have watched a lot of your videos about the most complex subjects and such a basic thing as the proper use of const will increase the robutness of my code. I have been leaking so much unnecessary state in my code!!!! So I will go to basic.

@mikeyscimeca 7 жыл бұрын

Thank you so much for making these videos. I have learned so much and have been entertained with your jokes. Thank you Thank You Thank You.

@funfunfunction 7 жыл бұрын

thanks michael, that's exactly the kind of response I was aiming for! Thanks for following the channel!

@battosaijenkins946 7 жыл бұрын

@funfunfunction, Hi sir With all due respect I believe that var, let, and const all have a time and a place. To say that var is no longer used, let should take its place, and const should be everywhere I simply disagree. Yes let should be used for block scoping but I really have to say that const is being overused. If you want your object/code to not change, simply think a bit more about the outcome of your code ahead of time to prevent unforseen errors or even worse coding yourself into a corner. And also, as my professor says const should be something you know will never change, for example PI, gravitational acceleration, Euler's constant etc... In other words, use it when you know variables will never change, dont just assume its better than var. That is all, thank you~

@ManuelPenaloza 8 жыл бұрын

I've been waiting for an explanation of this just like your's. Thank you!

@Gjacolby83 8 жыл бұрын

Nice video! That was a great little explanation on those concepts. I now credit you with convincing me to start using let until I am wise enough to know when to use const.

@zsoltoroszlany7172 8 жыл бұрын

I have to admit I failed to understand what is hoisted ... until now, many thanks for you. I really enjoyed your tutorial video. Thank you again!

@YoungMesrine 5 жыл бұрын

Pls what is hoisted?

@acskck 4 жыл бұрын

@Midas / XIV what he said is not the actual thing happening at all. Your code will not be moved to top. This behavior is due to something called execution context. It has 2 stages, creation stage and execution stage. Since JS interpreter is single threaded, it needs to have a execution stack in order to keep track of what is being executed and a execution context is created for global and each function it executes. While in the creation stage, it will create global object, determine the value of "this" and also it will scan through the code and put variable declarations and functions to the memory. So when the execution stage comes, those declared variables (not their values) and functions are already available in the memory. Hence it feels like those declarations are moved to the top of the code.

@SayuStrife 8 жыл бұрын

Brilliant Video. The talk about mutable state will definately help me design my code better going forward.

@funfunfunction 8 жыл бұрын

glad to hear it!

@armenbakir112 6 жыл бұрын

this guy rly help me through my biggest problem love you keep it up i am you a new fun

@patrickbarnes5853 7 жыл бұрын

Just discovered you today and can't stop watching. Great content and humor! Concerning arm pain: I had this and it was due to clicking on mouse buttons. Makes sense that extending a finger and mashing a button hundreds of times a day would cause RSI. Problem went away quickly and has stayed away for years when I replaced the mouse with, first, a Wacom tablet and later a magic track pad with tap to click enabled.

@pudd1ncat 6 жыл бұрын

Just found your channel, you are such a great teacher. thank you for all your time!!!

@koltonIII 3 жыл бұрын

hell yes. this is they type of instructing i am looking for. thank you

@everydayhustle6641 7 жыл бұрын

You have a really fun channel. You make learning very digestible, thanks!

@user-uj6le5fl9c 7 жыл бұрын

Great video sir! in terms of ergonomics: i used to experience what you described on a daily basis previously. What fixed it for my was: Have a chair which has a good straight sit mode (not hanging back nor too forwards) and make sure that your chair has armrests where your elbow can rest at height of about 2/3cm lower than your desk height. Also what is essential is using a mouse that suits your hand. It would shock you to know how many people use too small mice. A nice long mouse ergonomics wise is the Razer Deathadder. Again thanks for making these awsome video's for new aspiring JS devs and i hope your arm is okay again by now!

@treestompz 7 жыл бұрын

Awesome video! You keep my full attention throughout all your videos with your energy and humor :)

@Mikethealtarboy 8 жыл бұрын

Love your videos as always! I had some arm pain after starting my desk job - mostly in the forearm, and a little tingling around the ring finger. My solution was to make sure my chair was high enough that my arms were 90 degrees with my keyboard, and get a stand for my laptop so I wasn't looking down at it. The source of the problem was actually tight muscles up around my shoulders and neck, which resulted in a nerve being pinched. A little ointment on my shoulder when I found it getting tight helped too. It took a couple months but did get back to normal.

@sheriffderek 8 жыл бұрын

This worked for me too. Why are desks and chairs so misaligned? codepen.io/sheriffderek/pen/gppRbd

@jamesmcginn6291 7 жыл бұрын

"It's so nice for something to be immutable." Great explanation. I loved the dishwasher analogy. Thank you!

@rico042002 7 жыл бұрын

Great explanation of 'let' and 'const'. I'm only a few months into JavaScript programming and this was a great tutorial on ES6

@alanosman444 7 жыл бұрын

Very very nice.. thanks for re-teaching me Javascript basics in the most fun way.

@stevenwilson1890 8 жыл бұрын

I'm not even a JS programmer, but your show is so well done I look forward to it and watch it every week! Thank you!

@funfunfunction 8 жыл бұрын

+Steven Wilson wow, thanks! That means a lot!

@Chocoholic1337 8 жыл бұрын

Tip for the arm/hand pain: Do hand exercises! Do a KZfaq search for 'gaming hand exercise' and you'll find what you need. Just do this every 30-60 minutes for a couple of minutes... you'll notice a world of difference! Thank you for the video. As always, great content!

@ricardo.mazeto 8 жыл бұрын

That's Sort of what I do.

@JanKosowski 8 жыл бұрын

Foosball works great.

@YanasChanell 7 жыл бұрын

Thank you very much! You make clear things I've read about many times on my native language but couldn't understand.

@justinr4650 6 жыл бұрын

Very well explained MPJ, you are the man!!

@rdagger 8 жыл бұрын

I had bad wrist pains from long days at the computer. I cured it by adding dumbbell wrist curls and reverse wrist curls to my workouts. 4 sets of 12 reps with light weights, 3 times a week. I also use gel keyboard and mouse wrist rests to try to keep my wrists in the same plane as my forearm. I’ve been wrist pain free for several years. Now would be a good time to also add some preventive shoulder exercises because that is another very bad consequence of too much desk work.

@nickwoodward819 5 жыл бұрын

yeah, i had wrist issues (see above), that terminated (and relieved) just between the shoulder blades. definitely all connected

@Headifen 7 жыл бұрын

Thanks man, fun video! I wish I found this 6 months ago when I was banging my head against the wall on this stuff!!! Love the format and I learned a few things :).

@justinr4650 6 жыл бұрын

Dude you are just awesome!!!! i love your videos, they are clear and make learning fun!! please keep them up!!

@srivastav_prince07 6 жыл бұрын

Great explanation ! finally got my doubt cleared after watching this video , Thanks a lot.

@agasarang 7 жыл бұрын

Just found your videos. Are you still having arm pains? I was thiiiiis close to surgery before going all ergonomic setup. This included a ten-keyless keyboard (Kinesis Advantage 2 -- best keyboard I've ever owned), trackball, a keypad on the left side (Razer Orbweaver for shortcuts), etc. This COMPLETELY eliminated all arm pains, shooting electric shots up through the shoulder and spine, etc. Saved me tens of thousands in medical fees. Really enjoying the vids -- subscribed!

@doaashafik3073 5 жыл бұрын

any video I see in this channel is very useful thank you 💖

@longtran12345678 8 жыл бұрын

thanks a lot, very clear and fun to learn with your video every Monday

@VictorMorettiOfficial 7 жыл бұрын

Man, I am currently on 7:08 and have learned more than with hundreds of articles on the web. Thank you very much, seriously. JS looks crazy for square guys like me haha

@joshuaesmero1464 7 жыл бұрын

best explanation I've found so far on this.

@opiyosebastian50 6 жыл бұрын

Am following your tutorials, your are fan and your presentation is even more awesome! Keep it up!

@TheNzdavis 6 жыл бұрын

I love the way you present your lectures. I'm like playing super mario on my switch at the same time learning. :D

@davidbrewitz 8 жыл бұрын

I trained my left hand to be as efficient as my right hand using the mouse. It was annoying for the first week or two but you will appreciate being able too switch back and forth when one gets too painful. Its always good to have a backup. Thanks for the awesome vid's by the way!

@AdamHoffmanG 8 жыл бұрын

Love your stuff man. Please please please keep it up!

@ThePolaris87 7 жыл бұрын

Thank you for clarifying this. You have gotten yourself a subscriber!

@TheMrChugger 8 жыл бұрын

Glad to know I was using this correctly! Also great explanation of some of the internal JS scope behaviours. Crazy little language.

@anuragkothare6181 6 жыл бұрын

So nicely explained. Good presentation. Loved it.

@ahwaliazizi 6 жыл бұрын

impressive... very smart, no keyboard strok sound, no nasty backgroud sounds, theroy plus practical, deep knowledge so deep explaination ....amazing video !

@funfunfunction 6 жыл бұрын

Thank youu

@Loige_com 8 жыл бұрын

finally a very in depth clarification of the differences between var, let and const! kudos for mentioning that const doesn't make object immutable, which at first is very counterintuitive. now you should do one about Object.freeze and deep-freeze 😋

@stephendeo1 7 жыл бұрын

Your videos are so clear it gives me that "Ah ha" moment that I need :)

@snowbeast5616 8 жыл бұрын

Awesome channel! I really enjoy the mixture of coding and the more philosophical/psychological videos :) I think that the psychological aspects of programming are more important than coding itself in the grand scheme of things. What comes to ergonomics, the best thing (besides adjustable desks) I've encountered is a rollermouse with an arm support. Yes, that setup is expensive, but I would buy another set in a heart beat if I broke it somehow. Greetings from Finland! :)

@vcoppolecchia 8 жыл бұрын

I just learned a new thing! 🎉 Thank you! 😁

@petrabuys2372 7 жыл бұрын

you are the most fun teacher ever !! thank you

@GordWayne 5 жыл бұрын

The best sound effects! You should bring them back for the newer episodes.

@DeweyWaspada92 8 жыл бұрын

Man, love the excitement you bring. lol

@omarahmed-dq1tt 8 жыл бұрын

Brilliant bro and Great Job Literally i was confused but now i'm excited

@vacprokop 7 жыл бұрын

I have learned two universal principles so far: minimize scope and don't reassign a variable. Well done with this episode!

@clarenceworley5125 7 жыл бұрын

I enjoy your teaching style.. added you to my short list of go to youtube teachers.

@pikachu5223 7 жыл бұрын

you are so awesome explaining. Thanks!

@adamkucharik9189 8 жыл бұрын

Another arm pain tip: In addition to posture and exercises, if you use a mouse, train your opposite hand so you can switch and give each hand/forearm a break. The first week of using the opposite hand was quite challenging for me. I became both physically and mentally tired quickly. But after the first week my accuracy and stamina was good enough for non-pixel perfect use.

@srinivasn7652 7 жыл бұрын

Nice Stuff Bro...You have explained the things with simple examples.Thanks for u r valuable time.Keep Coding & Rocking

@jusugh 7 жыл бұрын

thank you for all of your videos! P.s: I really like your editing skills

@augustocbx 7 жыл бұрын

Thank you very much! You are doing a great job!

@taaemoh 7 жыл бұрын

great info man.... I like the example of dish washer 😀

@ramiahviknesh3014 6 жыл бұрын

Great video on Let,Const and Var

@1Lll_llllllLLLLllllll_llL1 8 ай бұрын

thank you man, i did learn a lot from you!

@rjborba 7 жыл бұрын

Man, what a great didactic! Thank you so much!

@jeffersonribeiro1669 7 жыл бұрын

This guys is awesome! Thanks dude!

@nayaleezy 8 жыл бұрын

so good, sharing with team

@sid88in 6 жыл бұрын

love this video! fun to learn..

@richardtapan3950 6 жыл бұрын

Man I was reading a book about es6 and it was sooooo boring I almost fell asleep without actually learning, but when I watched this, I feel like Im learning alot more in less time. Thanks man, huge help!

@mattharris2058 8 жыл бұрын

First, great video. Second, wrist pain. I don't get wrist pain for the same reason, but I think I have a solution. I tore my left TFCC (cartilage in the wrist). Ever since, I've had problems with pain. I bought a Goldtouch V2 Adjustable Keyboard and it literally solved all my issues. It looks incredibly weird (I've never met anyone that hasn't commented on it) and takes some getting used to, but it feels incredible. My first one lasted about 6 years (I think it broke in a box while moving, so I don't think it even gave out), and I just bought my second one a few months ago. I honestly swear by it. Writing this makes me think I should write a review lol.

@TricoliciSerghei 6 жыл бұрын

Wonderful explanation. You're awesome dude!

@thiagovilla970 7 жыл бұрын

Haha first time in this channel and I loved it

@nicolasvasquezrobledo6516 7 жыл бұрын

Thank you ! Fun and useful

@saddamsidimouhamed3205 6 жыл бұрын

Thank so much. Great job

@pleabargain 7 жыл бұрын

1:30 nice use of the cursor highlight/ focus! Your production qualities continue to improve!

@OttoRobba 8 жыл бұрын

For ergonomy - and this is something that has helped me immensely - you should look into compact mechanical keyboards. - Short distance between mouse and keyboard - Shortcuts for moving the cursors (stay in the home row) - Better typing feedback = less mistakes, more precision and less typing I'd recommend a Pok3r keyboard with brown switches or, for an endgame, comfortable keyboard, the Happy Hacking Keyboard Pro 2. Touchpad instead of mouse is pretty nice too, it helps in keeping the hand flatter instead of "claw-shaped" and avoids wrist movement.

@Sushant1219 8 жыл бұрын

Fantastic explanation :)

@sesho777 4 жыл бұрын

you're the best teacher ever!

@safuya1833 8 жыл бұрын

Just a quick comment to say thankyou for the videos and keep being awesome :)

@funfunfunction 8 жыл бұрын

thanks a ton!

@SuperManitu1 8 жыл бұрын

Concerning your arm: I had something similar, bought a vertical mouse off amazon and Im very happy with it. No pain since then.

@atxaqualion75 8 жыл бұрын

I had a developer friend that also advocates a mouse that is similar to an orig Atari joy stick.

@SuperManitu1 8 жыл бұрын

If anyone else is interested, this is the one I bought: www.amazon.de/Delux-M618-Scroll-Rad-PC-Maus-2-Wege/dp/B00AYXUIO6 It seems that this very model is sold unter a bunch of different names, seems to be the same mouse though.

@TimothyWillis1981 8 жыл бұрын

Had an issue too, got a vertical mouse and made a place to rest my elbows, no more pain for me.

@error.418 7 жыл бұрын

Also consider a keyboard that allows tenting and splaying, it does the same thing as switching to a vertical. Combined, be pain free.

@nickwoodward819 5 жыл бұрын

you really don't need it though, at least not initally depending on your injury. most rsi comes over time (obviously.) so most is fixed by improving your wrists/arm/shoulder movements. powerball, stretches, nerve glide exercises. a vertical mouse aliviates the symptoms, it doesn't prevent them. :)

@Neppord 8 жыл бұрын

fantastic state rant!

@funfunfunction 8 жыл бұрын

Thanks!

@Cheng32290 8 жыл бұрын

Your explanation is very good! and your house is very cool

@dexdevlon8941 5 жыл бұрын

Extremely useful lesson

@zhenwang4108 7 жыл бұрын

I was giving up on coding, but after I saw this, I think it might be just because of lack inner motivation... Thanks!

@edmonvevo5691 5 жыл бұрын

You are awesome bro. Thank you. Greetings from Armenia

@Mk2Brett 8 жыл бұрын

Loving the js videos!

@sab611 8 жыл бұрын

Hi MPJ Use your mouse with your left hand for a while. You get used to it after a bit. Also get a pad to lift up the base of your palm so your hand is parallel with your forearm, ie your wrist isn't bent backwards at all. Or have a high platform to use your mouse on which also stops your wrist getting bent. The only rear cure for RSI (repetitive strain injury) or Carpal Tunnel is rest. Turmeric is a good natural remedy for inflammation.

@2bitornot2bit73 6 жыл бұрын

I started using apple's magic mouse and it helped me a lot, it's height form factor did the trick for me

@stevepascoe 8 жыл бұрын

I'd love to see more examples in the wild of const. Loving it in my reactjs adventures.

@danniaarauzsanchez7619 6 жыл бұрын

Nice Explain, thank you so much! :)

@ahwaliazizi 6 жыл бұрын

loved the dish washer example!

@MatiasBenavides 8 жыл бұрын

Now it would be cool that you show some techniques you use when programming. Like, mental steps you take before each problem you face. Or something (?) Great video!

@CarloRizzante 7 жыл бұрын

Kyle Simpson has written a neat explanation about how hoisting actually works (compilation vs execution) in his series of books "You Don't Know JS". Those books are an absolute must read for anyone who works in JS, even seasoned programmers can benefit from it. For the record, he has as well excellent arguments for the use of semicolons where the JS engine would put them. My argument is that ultimately semicolons communicate your intentions just like "const" do. Said that, thanks for your endless stream of video. It's really nice to see so much love for JS. I love it too :)

@charmainetabilas3132 5 жыл бұрын

I'm super late but if you are still feeling pain in your hands/arms from coding/typing all day, try to keep your wrist at an angle below your elbows. Also try to stretch out your wrist and shoulders occasionally. Also take some time to do stretches that bring your shoulders back and traps down. (i.e. grab your hands together on your low back and pull them back). Simple but effective. These videos are so helpful and great though so thank you so much!

@sweeball 7 жыл бұрын

I am not a doctor, but I suspect that your hand/arm pain is most probably Repetitive Strain Injury (RSI). I think that it might be helpful when you get it in, say, your right hand/arm to try to use your left hand to operate your mouse, etc. You need to be able to rest your affected limb. Thanks mpj for the vids on "becoming a better programmer" FunFunFunctions is the best I've found for a wide variety of programming topics (... and the most entertaining). Keep up the good work. I always look forward to Monday mornings at 08:00 GMT for my next "fix".

@zackthoutt8457 7 жыл бұрын

I had the same arm pains along with something akin to tennis elbow. I got a vertical mouse and had to do a series of weekly massages before everything went back to normal. I now stretch my arm muscles several times per day and try to exercise them in other ways to keep them feeling fresh.

@arunkaiser 4 жыл бұрын

Fantastic video

@satishramjee 5 жыл бұрын

I had a similar problem with meta tarsals. Changed the mouse to use a trackball or a very small mouse and that helped so much that the pain went away.