Unlocking The Power of JavaScript Arrow Function (=>)

[Recap] - Use of function in programming

In programming, we have some particular set of instructions that will be executed severally at different stages of program execution. To avoid redundancy in our code, we simply use function to define that set of instructions just once and then we can just call(use) that set of instructions whenever needed.

The block code below simply prints out a string of characters to welcome the name(anything) passed in to it.

function greeting (name){ 
        console.log(`Hi ${name}, you are welcome !!!`) 
    }

greeting('Joseph');        // Hi Joseph, you are welcome !!!
greeting('Isaac');         // Hi Isaac, you are welcome !!!
var userName = "CloneIntern";
greeting(userName);   // Hi CloneIntern, you are welcome !!!

Use of Arrow Function =>

Arrow function gives us an abbreviation and faster way of defining a function. For example, let's write our greeting function using arrow instead of the function keyword.

let greeting = (name) => console.log(`Hi ${name}, you are welcome !!!`);

greeting('Joseph');        // Hi Joseph, you are welcome !!!
greeting('Isaac');         // Hi Isaac, you are welcome !!!
var userName = "CloneIntern";
greeting(userName);   // Hi CloneIntern, you are welcome !!!

Now let's compare the syntax:

Difference in Handling ' this '

In regular functions, the 'this' keyword represents the object that calls the function, which could be the window, the document, a button or whatever at any point of execution.

For Example

// Regular Function:
function greeting() {
  document.getElementById("textSlot").innerHTML += this;
}
// Function call by window object:
window.addEventListener("load", greeting);        // window Object

// Function call by document object:
document.getElementById("button").addEventListener("click", greeting);  // HTMLButtonElement object

But for arrow function, ' this ' keyword represents the object that defines the function.

Our example using arrow function:

// Arrow Function:
let greeting = () => document.getElementById("textSlot").innerHTML += this;

// Function call by window object:
window.addEventListener("load", greeting);        // window Object

// Function call by document object:
document.getElementById("button").addEventListener("click", greeting);  // window object

Kindly note, use of regular function keyword can be the best option based on the application and behaviour you desire like in the case of ' this ' binding. Otherwise is also valid, it is up to you and your algorithm.
Happy Coding!!!