Modern Style of Javascript with Arrow Functions

The complete explanation of Arrow functions in Javascript, and how it helps developers to write flexible and consistent code.

Before dive into the in-depth concept of arrow functions. I would like to discuss the hectic syntax of the old Javascript traditional approach. Arrow functions are introduced in ES6 which is a modern style for writing javascript functions. Since technology is getting modernized javascript is also getting modernizing day by day.

In our old school Javascript programming, the functions are very easy to implement and use. A basic sayHello function will be like — 

function sayHello(name){
      return "Hello " + name; 
}

// Function Call
console.log(sayHello("Javascript"));

The above program will generate the output of Hello Javascript. Traditional javascript functions are easy to understand and implement. But when it comes to the modern javascript functional programming style. It is a bit weird and difficult to understand. Beginners may get a bit difficult while learning for the first time because the syntax is not that much easy but when our hands get dirty with arrow functions definitely we will love it.

Features of Arrow functions

Since arrow functions are new to the javascript community. Definitely it should possess some better qualities than the existing approaches then only it will be helpful for the developers. The foremost features of the arrow functions are — 

1. Arrow functions with the body have no implicit return statement.
2. It automatically binds the this to the surrounding code context.
3. It is less verbose than the traditional javascript code.
4. It doesn’t have a prototype property.Arrow functions don’t have inbuilt arguments property, unlike traditional Javascript functions. But we can achieve it with the help of rest parameters.
5. Arrow functions are more convenient for callbacks, promises, or for methods like map, reduce, and forEach.

Now we will try to reimplement the old school javascript function with the help of arrow functions. The syntax will be as given below — 

sayHello = name => "Hello " + name;
// calling the function
console.log(sayHello("Javascript"));

The output for the above program will be as same as the previously written code.

Arrow Function with zero arguments

The syntax for the arrow function that has zero parameters — 

helloWorld = () => "Hello World.!";
console.log(helloWorld()); 
//OUTPUT:  Hello World.!

Arrow Function with One argument

An arrow function with a single argument can be implemented in two ways— 

squareValue = n => n * n;

console.log(squareValue(3));
// OUTPUT: 9

Or else we can also create the above function in a different way — 

squareValue = (n) => n * n;

console.log(squareValue(3));
// OUTPUT: 9

The output will not change. we can declare parameters with brackets or without.

Arrow function with multiple arguments

The declaration of multiple parameters will be pretty simple —

add = (number1, number2)=>{ return number1 + number2 };

console.log(add(3,2));
//OUTPUT: 5

The issue with Inbuilt Arguments property

In traditional javascript functions, we have an inbuilt property called arguments which helps us to take the variable number of arguments by default which is an interesting and useful property. But Arrow functions doesn’t support that property.

// Traditional Javascript Approach
function addValues(){
         sumValue = 0;
        for(let i=0;i<arguments.length;i++){
          sumValue += arguments[i];
        }
    return sumValue;
}

console.log(addValues(1,2,3,4,5));
console.log(addValues(10,20,30));

In the above code, there is an argument property that helps us to handle n a number of functional parameters. this helps us to produce dynamic results in certain situations. The result for the above code will be — 

console.log(addValues(1,2,3,4,5));  // 15

console.log(addValues(10,20,30));   // 60

But Arrow functions solve that issue with the following syntax approach — 

calc = (...args) => {
         sumValue = 0;
         for(let i=0;i<args.length;i++){
             sumValue += args[i];
         }
   return sumValue;
};

console.log(calc(5,3,4,5));
// OUTPUT 17

We can also decrease the number of lines with the help of reduce method as follows — 

reduce method with Arrow functions

Arrow functions will work more effectively with the reduce functions that makes the developers life a lot more easier.

function sum(...args) {
  return theArgs.reduce((prev, curr) => {
    return prev + curr;
  });
}

console.log(sum(1, 2, 3));
//OUTPUT: 6
console.log(sum(1, 2, 3, 4));
// OUTPUT: 10

Conclusion

I hope you got a clear view of the arrow functions and why it is so popular. I discussed pretty much everything regarding arrow functions in a detailed manner. 

Hello busy people, I hope you had fun reading this post, and I hope you learned a lot here! This was my attempt to share what I’m learning.

I hope you saw something useful for you here. And see you next time! 😉🤓

Have fun! Keep learning new things and code to solve problems.😇