How to Convert Standard Functions to Arrow Functions In JavaScript with Examples

  JS Fundamentals   Oct 3, 2022   0  Add to Reading List

Building an app is forming a slack of code blocks. Code Blocks are basically well-structured instructions known as function. Each function solves a part of the global issue. Whereas, having the same goal doesn’t mean that functions aren’t categorized. In this article we will explore function types in JavaScript, compare them, have a closer look at ES6 arrow functions specifications and limitations.

How to Convert Standard Functions to Arrow Functions In JavaScript with Examples
Photo by Antonio Batinić on Pexels
 


To begin with, JavaScript has 4 fundamental function types:

Anonymous functions: unnamed functions

//anonymous functions: 
//they have no  name and are assigned to a variable
const Tips =function(){ 
 return 'Know your Functions'}

Named functions: function with personalized name that we use for a specific need

//Named functions: 
//functions that have personalized name after the keyword function
// factory functions
function sayNoMore(){}
//constructor functions
function Programmer(Leo){
    this.name =Leo
}

Call back functions: functions that are passed as parameters to the high level functions.

//Callback Functions:
// passed into another functions (higher-order function) as a parameter.


function createQuote(quote, callback){ 
    var myQuote = "Like I always say, " + quote;
    callback(myQuote); 
  }
//createQuote is the higher order function
  
  function logQuote(quote){
    console.log(quote);
  }
  //logQuote is the function being passed as parameter

//createQuote("chocolate is my passion", logQuote);

Arrow functions:

Arrow functions came with ES6 new features. They are aesthetically pleasing and concise. Let’s try to convert a standard function, notice the changes and best practices.

  • First, remove the function keyword and then the name. 
  • Second, declare and assign the new function to the variable using the syntax below. 
  • Third, add an arrow and write the block of code inside {}
// Converting a function to an arrow function:
// Note : ES6 js version introduced this feature
// normal named function
 function PinkFloydAlbum(){
    console.log('The dark side of the moon')
}
PinkFloydAlbum()



//Arrow function
let PinkFloydSong=()=>{
    console.log('Shine on you crazy diamond') 
}
PinkFloydSong()

A few additional tips can be mentioned, as shown in the next example:

1-If the function doesn’t accept/need parameters, it’s mandatory to use ()

//Arrow function Without parameters : () are a must !!
let BlackMatter =()=>console.log('Black Matter is a strange space energy')
BlackMatter()

2-You can omit () when using one single argument.

// Arrow function with parameters
let Nasa = planet =>{
    if (planet == "Mars"){
     console.log('Nasa is looking for life traces On'+planet)
    }
    else {
        console.log('James bond RevealObject impossibe mission')
    }
}
Nasa('Mars')
Nasa('Uranus')

3-You can omit{} if you’re using only one instruction.

//function with more than a parameter
let BothBlessings =(Hope,Dream,j)=>{
    if (Hope == true & Dream =='Big'){
        for (let i = 0; i < j; i++) {
            console.log('You will make it Bravooo !!');
            
        }
    }
    else{
        console.log('Have faith !')
    }
}
BothBlessings(true,'Big',2)
BothBlessings(false,'Big',7)


Last but not least, we should briefly talk about limitations every programmer must be aware of. Remember that arrow functions are unnamed. As a consequence, a constructor can never be an arrow function!
We can’t also use this type of functions with some methods, such as: 
    • Call() Method
    • Apply() Method
    • Bind() Method

Tags