Enough JavaScript to get you Started : #15 Arrow Functions

Arrow Functions?

👉 Since we've covered Basics of JavaScript , it's now time to move towards slightly advance things 🎉


👉Arrow Functions are compact alternatives to regular JavaScript functions


👉Arrow Functions will help you jump into modern JS concepts , and extremely helpful before learning any JS frameworks like React or Angular

Have you seen something like this?

👉 Sometimes when our code doesn't work as expected so we go to stack overflow or GitHub for finding solutions.

👉 Let's say you were getting error in Adding 2 numbers (i know you won't😂, but still)...

👉 You go to stack overflow and see something like this...

var sum = (a,b) => {
      return a+b;  
}

WTF was that? Language of gods? 🤔

👉 Let's break down this into simple function


👉 So what's written here basically, is this...

function sum(a,b)
{
       return a+b;
}

👉 Arrow function helps to reduce syntax (often known as syntactic sugar) over vanilla js by ES2016

Benefits of Array Functions

👉 Helps to reduce syntax

👉 Arrow syntax automatically binds this to the surrounding code’s context (will be covered later in series 😁)

👉 Implicit Return

What are Arrow Functions any way?

👉 Arrow function is modern way of writing normal JavaScript function which helps us in writing lesser and more meaningfulfunctions.


👉 Arrow Functions are also known as Fat Arrow Functions because of the => expression in syntax


👉 Syntax

// normal function
var functionName = function (param1,param2) {
      // function body
      // ...
      // ...
}

// arrow function
var functionName = (param1,param2) => {
       // function body
       // ...
       // ...
}

👉 in simple terminology , we assign an anonymous function to a variable where the name of variable becomes the name of function and can be called by functionName(); .

👉 Parentheses in arrow function indicates number or params our function will take (in our case there are two , namely param1 and param2)


👉 After Arrow (=>) , the curly braces indicates the start of function body , where we can write whatever we want inside it.

Examples

👉 Writing a Arrow Function which can return sum of 2 nums

// sum : name of arrow function
// n1,n2 : params of arrow function
// {...} : body of arrow function

var sum = (n1,n2) => {
      return n1+n2;
}

// can be called like : 
sum(1,2);

👉 Writing a Arrow Function which can return cube of given number

// arrow function with one param
var cube = num => {
       return num*num;
}

// can be called like : 
cube(2);

👉 Writing a Arrow Function which can will ask for user age and checks if he/she is eligible for license

// arrow function with 0 params
var licenseValidator = () => {
    var age = +prompt("what's your age ? ");
    if(age > 18)
    {
          console.log("eligilbe")
    } else {
          console.log("not eligible"); 
    }
}

Rules for Writing Arrow functions

👉 => is compulsory before function body.

👉 we've to pass empty parentheses() compulsory if function takes 0 params. (otherwise we'll end up getting error 😂).

👉 If Arrow function takes single param , then the parentheses are optional.

Bonus🎁 : Concise arrow functions

👉 Concise arrow functions are more optimized than normal arrow functions

👉 Concise arrow functions can be used where we've only return expression in our function body (no {} curly parentheses)

👉 No need to write return explicitly in concise arrow functions

👉 Not every arrow function can be converted to Concise arrow function

👉 *Example : *

// making sum arrow function concise 
var sum = (num1,num2) => num1+num2;

sum(1,3); // returns 4

var cube = num1 => num1*num2;

cube(2); // returns 4

👉 Notice we haven't converted licenseValidator to concise arrow function because that function has some amount of calculations inside it's body.

👉 That's what i meant when i wrote 'not all arrow functions can be converted to concise arrow functions'

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter / Github