Function Declarations vs Function Expressions

Today we're going to learn about the subtle but important differences between a function declaration and a function expression!
It's a sneaky little difference but one that is valuable to be aware of!
---
PATREON: / hswolff
TWITTER: / hswolff
SITE: hswolff.com/

[@jason0ng]

I've watched a few videos explaining this, and yours is by far the most straight to the point and easy to understand! Thank you :D

[@davidpicarazzi]

Not gonna lie i died of laughter at 5:15 when it sounded like he said "fucktion"

[@hswolff]

😂

[@AhmadElkhouly]

I thought i was the only one to notice 😂🤝

[@danielvega646]

I think the two main advantages of function expressions (may regular functions or arrow functions) are:
1- It forces you to write better your code (depending on hosting is a grubby practice).
2- It demands less memory heap since the value of your function (your expressions) are not saved in memory until the interpreter reads the line where you initialize your function.
What do you think about it? Let me know!

[@lastidea4925]

Finally I've seen someone who actually knows JS. Thanks for teaching.

[@ForsmanTomas]

I've always figured that functions live in their own space and gets called with the declaration. Though if you put the declaration above and then have a slow (or lazyloaded?) page it will throw an error since it hasn't yet gotten the function in question.
The reason it doesn't work between declaration and const is because those are things that js will run and they run things from top to bottom.
Of course you know this, just that it always felt natural for me.

[@hswolff]

Yeah it can be tricky for people first learning JavaScript as the behavior isn't consistent. That's the part that I dislike the most - all I want are things to be consistent.

[@ForsmanTomas]

@@hswolff = I spent an hour today figuring out why (! + [] + [] + ![]).length is 9.
Was a good exercise to get a better understanding of how JS is built. Felt almost like when I finally figured out how the stack worked and it stopped being that phantom somewhere in there doing stuff that I kinda learned how to predict.
Watching your TS videos right now. I'm glad I found you today, finally someone that writes code that are clear and to the point. Looking at other peoples components always feel like overcomplex exercises in code juggling. I appreciate how you seem to see code as a box of tools that you build with rather than a linguistic exercise.
You deserve a higher viewer base than you have, your content is high quality.

[@hswolff]

!!! Thank you so much for the kind comment! I'm glad my coding style is clear and easy to follow - it's one of my top priorities!
I hope my viewer base grows too, I'd love to reach more people :D

[@francsicozuniga3721]

Well said, well spoken; thank you !

[@jed_fox1]

Another fun fact about function expressions is that you can give them a name, just like a function declaration. Unlike declarations, however, the name is only valid inside the body of the function. For example:
requestAnimationFrame(function cb() {
// ...
requestAnimationFrame(cb)
})
cb() // cb is not defined

[@hswolff]

Wonderful point! Thank you!

[@vladgina]

what

[@Martin958]

Nice, straightforward to the point vid. Amazingly hard to find those on YT. People over complicate this subject way too much.

[@paultaylor9963]

Right? I understand this perfectly now! Every other video I watched literally made it more complicated 😆

[@amkhrjee]

Thanks a ton for making this short and sweet video. This was super helpful and straight to the point. Thanks, again 🤝🏼

[@arunavamukherjee7549]

Which one to use? More common and why? Thnx.

[@AhmadElkhouly]

Thanks for sharing your knowledge.

[@CathalMacDonnacha]

When you say "the variable is not hoisted" is that actually correct? I thought a const variable is hoisted but it's just set to uninitialized?

[@annisaautami]

thank you so much this helps me figuring out why they're different types of function, and now i know! Subscribed!

[@DepressedLemur9]

You're a wizard Harry, thank you. I was having trouble understanding the difference.

[@hswolff]

:D

[@icetmzz9074]

whats the use of function expression instead of declaration then?

[@user-fl9oh4fp8l]

Thank you, man. Finally got it!

[@castro6612]

Pretty straight forward nice video

[@DamianDemasi]

Thank you! Great explanation!

[@mrzack184]

Awesome and easy to understand! SUBSCRIBED !!!!

[@hswolff]

Woohoo!!

[@joeos2766]

very informative, thanks :)

[@vladgina]

I like your expressions bro.

[@vladgina]

and declarations.

[@hswolff]

Hahaha nice. 😎

[@muhammadtayyab7674]

that was awesome and easy to understand!
thank you sir!!

[@hswolff]

Woohoo!

[@chopped_libber]

Super helpful! Thank you.

[@hswolff]

You are welcome!

[@funkyasthmatic2155]

Brilliant video! I've just subscribed :D

[@XJacksonvilleX]

3:40 pft dude how many times should they tell you to take yo pills

[@rajashekhar433]

Could you please create a videos on ReactJS PWA

[@aerocodes]

awesome bro

[@hswolff]

Thanks!

[@SapanKumarDas]

use Extension of vsc Quokka.js
bcoz output will be display Right of console.log
no need of run or anything else,

[@hswolff]

Nice suggestion! Thanks!

[@MrJailbreakdude]

expressions > declarations imo

[@hswolff]

Haha :D