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

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");
}

And with parameter:

function add(number1,number2){
return number1 + number2
}

     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:

     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?

That will cause an error telling us that print is not defined

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

Hooray it works 🥳!

     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 :

And let's execute it:

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 :

Why didn't it work ???

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 :

So now it works and the type of the variable is undefined

Let's change the function to give the variable myPrint a string type:

     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 :

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

Extra example : let's try to combine both 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}

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!

Here we reached the end .. Happy invoking 😊

Comments

[Gabirieli Lalasava]

There is also these invocations.

(() => ())();

// And 

Func`
${param}
`;

// And

(() => ())``

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'}`;

[Manar Imad]

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

[Aqeel]

Informative post keep sharing. logo design services in California