Thread by @eugZolotarenko

Complete Introduction to JavaScript Functions! ⭐⭐⭐

👇 Follow Mega Thread 🧵

Content:
1. What is a function?
2. Different types of functions.
3 to 5. Functions Anatomy.
6. Difference in hoisting between function types.
7. Sources to learn other differences in function types.
8. Use cases for each function type.

1. What is a function
In simple words, a function is a piece of code that performs a specific task.

However, let's turn on our imagination!

Then, your Project is a world 🌏
JavaScript File is a country 🚩
The function is a city 🌇

Such city (function) has its own citizens (variables) and city limits (function scope).

Function scope means that variables inside the function are only accessible within this function and you can't call them outside.

So, we're separating small functionalities into functions to reuse them in multiple places by calling them like this: myFunction()

2. Different types of functions

Generally, we have 3 types of functions:

1. Function Declaration
2. Function Expression with "function" keyword
3. Arrow Function Expression

Let's see how they look like 👇

3. Function Declaration Anatomy

4. Arrow Function Expression Anatomy

5. Function Expression with "function" keyword Anatomy

6. Difference in hoisting between function types

In the context of functions, Hoisting is a behaviour in JavaScript where Functions Declarations are moved to the top of the file scope.

So, it basically means that if you wrote your function as Function Declaration, you will have access to it everywhere inside your js file! However, it does not work in this way with Function Expressions.

You can call Function Declaration before declaring it, see an example. 👇

7. Sources to learn other differences in function types

I also suggest visit these resources to understand key differences between functions types better 👇
Article: dmitripavlutin.com/differences-be…
Video:

8. Use cases for each function type.

It's choice of your preferences which type of function do you use more often.
However, I'm doing it in this way 👇

- I use the Function Declaration type for bigger functions that I want to reuse. In this case, you can always benefit from hoisting and calling it wherever you want.

- I Use Arrow Function Expression in smaller functions and inside of array methods. In this case, you can benefit from a small size and elegant look.

- I don't use Function Expression with "function" keyword because it's just an older way of writing Function Expressions and doesn't have benefits over the Arrow Functions.

That's all folks! 🔥🧯

If you found this thread useful, please consider following @eugZolotarenko and retweeting the first tweet. 📢