The different types of JavaScript functions explained

38,358
25
Published 2024-05-29
Learn more JS from Chris and get the source code from this video 👉 gomakethings.com/kevin-powell

In JavaScript, we have several different ways to create a function, with function declarations, function expressions, and arrow functions. To help make sense of it all, Chris Ferdinani joined me to take a look at the different ways we can do it, and break down when you would use one type over another.

⌚ Timestamps
00:00 - Introduction
00:58 - Function declaration
01:33 - Function expression
02:05 - The difference between function declarations and expressions
06:00 - Organizing our code
07:59 - Arrow functions
09:35 - How the different types of functions handle "this"
13:10 - Creating more terse code with arrow functions
13:55 - Which one to use, and when?

#css

--

Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK

Keep up to date with everything I'm up to
www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: www.patreon.com/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 YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: twitter.com/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 a

All Comments (21)
  • @leoschuler
    functions are also objects in javascript with their own methods like .call() or .bind() - so another way to declare a function is creating a new instance of the Function Class like: let add = new Function('a', 'b', 'return a + b');
  • @mallesbixie
    I thought I'd hear the term "Closures" a lot here, but I guess that was outside the scope of this video. (Yes, pun intended)
  • @wellbornsnow
    Keep the JS content coming please! You have such a great approachable way of explaining things to those of us that are trying to learn
  • @posguy13
    This was really good! As a casual JS programmer (but very experienced in other languages), I have found this topic to be very confusing. Clear and concise explanation of the topic. Thanks!!!
  • @CyberTechBits
    I primarily use Function declarations as well. But that use case for using arrow functions inside of a class is excellent 👌🏻. Very good tutorial and example of when arrow functions really add value!
  • @BMikel
    Please do more JavaScript tutorials. This is the best stuff, always in demand.
  • @dkikizas
    This is a great episode! Super explanations by Chris! Hope Kevin and Chris will make more videos like this, especially for more advanced topics.
  • @TomAinsworth94
    Really interesting, thank you both! I was aware of the hoisting difference but the lesson around how the “this” keyword gets affected was new to me, and really well explained!
  • @steadfastlab
    How do you know that I’m learning JavaScript Functions now
  • @bobmonsour
    That was awesome, Kevin & Chris! I've had this on my gotta watch list since it came out. It was just the right length and covered just the right stuff. And I learned more about the unique nature of 'this' in the context of arrow functions. I had known about hoisting, but Chris' explanation of it really drove it deeper into my brain. And I'm so glad you asked the question about his preference for code structure as that popped into my head right before you asked it. And I was relieved to find that I do it the way Chris does (but then, I'm old too...a lot older than Chris ;-)). Thanks again!
  • @Turabbo
    Really fun video. Seems like you've got a perfect demographic to drip feed beginner js content. I know I'm enjoying it!
  • @richochet
    Brilliant Chris, and thnx Kevin for sharing him with us.
  • @penguinxed
    Good to see JS tutorials in your channel mr Kevin! thanks! 😊
  • @ourcore
    Great video! Very concise and informative
  • @artneo7
    Great information, thanks for sharing!
  • @paulwdoyle
    I definitely need to up my JS game ... and stop relying on jQuery quite so much... I'm really enjoying the JS vids (and the little JS sprinkles in your other videos) so please keep 'em coming 🙂
  • @nardu
    Awesome explanation, thank you.
  • @orange1890
    i literally just now searched for Kevin Powell javascript thinking you had this type of video, I was looking for why the arrow function is important and now this gets recommended. damn