DEV Community

Cover image for From Regular Functions to Arrow Functions
Manar Imad
Manar Imad

Posted on • Updated on

From Regular Functions to Arrow Functions

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

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 :
     a. Traditional Function:
the traditional(Regular) function has this pattern :
function functionName(optionalParameter/s){}
for example :

function print(){
console.log("hello world");
}
Enter fullscreen mode Exit fullscreen mode

And with parameter:

function add(number1,number2){
return number1 + number2
}
Enter fullscreen mode Exit fullscreen mode

     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`);
}
Enter fullscreen mode Exit fullscreen mode

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:

     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");
}
Enter fullscreen mode Exit fullscreen mode

Then when we want to invoke it we type:

print()
Enter fullscreen mode Exit fullscreen mode

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");
}
Enter fullscreen mode Exit fullscreen mode

Now what will happen if we try to invoke print?
function expression
That will cause an error telling us that print is not defined
reference error
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
Hooray it works 🥳!
result

     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");
})();
Enter fullscreen mode Exit fullscreen mode

Let's start :
IIFE
And let's execute it:
Immediately Invoked Function Expression

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");
})();
Enter fullscreen mode Exit fullscreen mode

What will happen now ?Let's use it :

IIFE

Why didn't it work ???
javascript
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
So now it works and the type of the variable is undefined
IIFE
Let's change the function to give the variable myPrint a string type:
IIFE

     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

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

Anonymous Function

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

Anonymous Function and IIFE

     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

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";
    }
Enter fullscreen mode Exit fullscreen mode

Let's go!

Arrow Function

Here we reached the end .. Happy invoking 😊

Top comments (3)

Collapse
 
fijiwebdesign profile image
Gabirieli Lalasava • Edited

There is also these invocations.

(() => ())();

// And 

Func`
${param}
`;

// And

(() => ())``
Enter fullscreen mode Exit fullscreen mode

The first is like () => {} but using () so it's () => ().

The second is a tagged template which is a function that parses a template literal.
developer.mozilla.org/en-US/docs/W...

Third mixes the two.

Here is a concrete example:

((parts, ...tags) => (
    parts.map((part, i) => part + (tags[i] || ''))).join('')
)
`hello ${'world'} of ${'js'}`;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
manarabdelkarim profile image
Manar Imad

thank you Gabirieli 👍 .. I will edit the post and add them or make another post for them later

Collapse
 
alexcorbett profile image
Aqeel

Informative post keep sharing. logo design services in California