From Regular Functions to Arrow Functions
Tags: javascript, beginners, functional, tutorial
Published: 2021-08-24 09:03:32

#### Hello World

One of the struggles for new JavaSript learners is understanding the different ways of writing a function including arrow functions , so for today, I'm planning to explain all types of functions in JavaScript in detail

![javascript](https://wittykittydigital.com/wp-content/uploads/2019/03/giphy-6.gif)
    
So let's get started...

To explain the ways to write JavaSript functions let's divide them into two main types : Function Declaration and Function Expression.

### 1- Function Declaration 
This is the type that we know and is similar to other programming  languages' functions. Function declaration has two types :
    &nbsp;&nbsp;&nbsp;&nbsp; **a. Traditional Function:**
    the traditional(Regular) function has this pattern :
     `function` functionName`(`optionalParameter/s`)``{``}`
     for example :
```
function print(){
console.log("hello world");
}
```
And with parameter:
```
function add(number1,number2){
return number1 + number2
}
```
  &nbsp;&nbsp;&nbsp;&nbsp; **b. Shorthand Function:**
The shorthand function is a regular function but for a class .. the differnce in the pattern is that we don't write the function keyword so it will be :
  functionName`(`optionalParameter/s`)``{``}`

Let's see it in an example with a shorthand function we will call it login: 
```
class user:
 constructor(name,email){
   this.userName = name;
   this.userEmail = email;
}
 login(){
 console.log(`Hello ${this.name} you have login successfully`);
}
```

### 2- Function Expression
  Function expression is just like a function declaration but we assign it to an object(variable)
let's discuss its 4 types:

&nbsp;&nbsp;&nbsp;&nbsp; **a. Regular FEs (Regular Function Expression)**

Let's talk a bit about what that means:
If we have this function:
```
function print(){
console.log("hello world");
}
``` 
Then when we want to invoke it we type:
```
print()
```
But in regular function expression we will save the function in a variable "assign the function to a variable" such as :
```
let myPrint = function print(){
console.log("hello world");
}
``` 
Now what will happen if we try to invoke print?
![function expression](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ewut7md9kqvlu2rkdpe.png)
That will cause an error telling us that print is not defined
![reference error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3g3e5aduqpfe8jqkx0g.png)
So how can we reach the function ?
We can use the variable name (myPrint) that we assigned the function to.
In our example we assign a function directly to the variable which means our variable is from type function, so let's try to invoke it
![function expression](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kksjk4pd7x7pzxt9qhxg.png)
Hooray it works 🥳!
![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmmyvfp954gqu80end7l.png)

&nbsp;&nbsp;&nbsp;&nbsp; **b. IIFE (Immediately Invoked Function Expression)**
From its name IIFE will be invoked immediately, you can think of it as if the function invoked itself and will be executed.
The syntax is simple .. we have a function :`function` functionName`(){`actions`}` you will contain the function between parentheses or "round brackets" `(function` functionName`(){`actions`})` and end the function with another parentheses in this way :
`(function` functionName`(){`actions`})();`

So the bet with you now is: this function will be invoked immediately when the file execution starts

Let's write an example :
```
(function print(){
console.log("hello world");
})();
``` 
Let's start :
![IIFE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p14sff7hgefqoddmbn3h.png)
And let's execute it:
![Immediately Invoked Function Expression](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ech5xlcgra5by9mkgujf.png)

But wait .. We said we want to assign the function to a variable! Then let's do it :
```
let myPrint = (function print(){
console.log("hello world");
})();
``` 
What will happen now ?Let's use it : 

![IIFE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p9pg9vj5nfbe3h6yjai.png)

Why didn't it work ???
![javascript](https://i.gifer.com/9LrA.gif)
The simple answer is because the IIFE invoked itself .. which means when we assign the function to the variable , the function immediately invoked and what has been saved "assigned to" our myPrint variable is the result.. so first we have to remove the invoke parentheses and try again :
   ![IIFE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5v61g387p8sjbm8ppcw.png)
So now it works and the type of the variable is undefined
![IIFE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fb33dggs2qwdb5pbcgsl.png)
 Let's change the function to give the variable myPrint a string type:
![IIFE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31hbh3qoimp52ae3xeyb.png)


&nbsp;&nbsp;&nbsp;&nbsp; **c. Anonymous Function**
It is an anonymous function and that's it ! Just a function without a name 😁 .. Here is the syntax:
[var|let|const] variableName = function(){actions}

Let's try it with this example :
![Anonymous Function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu6kfn3a5qz1hlr80ros.png)

Notice that the function here should be assigned to a variable otherwise it will cause an error  

![Anonymous Function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bfhqog430pbsbdryu3e.png)

#### Extra example : let's try to combine both Anonymous Function and IIFE 😎:

![Anonymous Function and IIFE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5fnfu8lfwfto58pcw8e.png)


&nbsp;&nbsp;&nbsp;&nbsp; **d. Arrow Function**

And we are here finally .. let's write the Arrow Function syntax in steps :

First :let's steal the Anonymous function syntax from above
`[var|let|const] variableName = function(){actions}`
![javascript](https://img.buzzfeed.com/buzzfeed-static/static/2020-06/17/14/asset/3f92c548489a/sub-buzz-2045-1592403653-24.png?downsize=700%3A%2A&output-quality=auto&output-format=auto)

Next :delete the function keyword:
`[var|let|const] variableName = (){actions}`

Finally: add (=>) sign after the parentheses :
`[var|let|const] variableName = ()=>{actions}`

And done .. this is our syntax so let's try it now :
Our example : 
```
let myPrint = ()=> {
    return "hello world";
    }
```
Let's go!

![Arrow Function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ze36eb3yrj0a6ge249d.png)

Here we reached the end .. Happy invoking 😊