The different types of JavaScript functions explained

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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[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)

[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');

[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

[posguy]

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.

[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 🙂

[TomAinsworth]

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!

[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.

[steadfastlab]

How do you know that I’m learning JavaScript Functions now

[stevenstraker]

I certainly have my bias, but i strongly believe being in the const-first camp holds even more water (figuratively) when working with arrow functions. Except in specific edge cases, reassigning function expression variables is a sign of code smell, imho

[BrianCupp]

You can benefit from naming your functional expression functions so they show up with a name in stacktraces. If there was an error in this function, it would show up as the add function and not just another anonymous function.
const add = function add(num1, num2) { return num1 + num2; };

When I explain fat arrow functions automatic scoping of this, I show them the bind method used previously, and how that worked, and how with fat arrow functions you no longer need to do this. But if you're in a place where you can't use a fat arrow function, that function.prototype.bind method is still available to add the necessary scoping into an existing method.

[steffenderfreak]

This explanation was on the point. I als way struggle to explain others, why "this is the way" for JS.

And there always pop up the question "why don't they just change the way, JS functions works?"
Well, this would hurt old code. Things would stop working or could start work in a strange way and the dev. Would need to figure out, why the website won't work in the real user's browser, but in the old IE6 of the client.

[craigwebb]

This is great! Thanks Kevin. I really liked hearing from Chris Ferdinani. You two explain JavaScript together very well. I do not see the link to Chris Ferdinani's site so make a big button for me please.

[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!

[orange]

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

[wolfphantom]

The reason is "syntactic sugar". Function declarations were provided to give a Java-y feel. Function expressions is what actually happens in JS/ECMAScript. Arrow functions were introduced as short hand syntax (brought over from CoffeeScript that has both "fat" and "skinny" arrow functions), and whose syntactic sugar is to bind "this" automatically.

[modernkennnern]

I've never used function expressions or anonymous functions.

I generally use function declarations at top-level, but arrow functions inside other functions

[brnto]

1:57 you would add the name there otherwise it would be an anonymous function. If an exception was thrown you would t see the variable name the function was assigned to, rather you would see anonymous function. You might want to reassign different functions to that variable in some sort of strategy pattern… if an error is thrown, it’s useful to see the name in the stack trace error to quickly find the problem.

[hridoyarrong]

Awesome! Much needed. Please create more videos on GSAP ScrollTrigger and SVG animations, Lottie animations. All combined into one series. That will be great.