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 — { + name; 
} .log(sayHello( )); ( ) function sayHello name return "Hello " // Function Call console "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 — Arrow functions with the body have no implicit return statement. It automatically binds the this to the surrounding code context. It is less verbose than the traditional javascript code. 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. 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; .log(sayHello( )); => name "Hello " // calling the function console "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 = ; .log(helloWorld()); => () "Hello World.!" console //OUTPUT:  Hello World.! Arrow Function with One argument An arrow function with a single argument can be implemented in two ways— squareValue = n * n; .log(squareValue( )); => n console 3 // OUTPUT: 9 Or else we can also create the above function in a different way — squareValue = n * n; .log(squareValue( )); ( ) => n console 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 }; .log(add( , )); ( )=> number1, number2 return console 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. {
         sumValue = ; ( i= ;i< .length;i++){
          sumValue += [i];
        } sumValue;
} .log(addValues( , , , , )); .log(addValues( , , )); // Traditional Javascript Approach ( ) function addValues 0 for let 0 arguments arguments return console 1 2 3 4 5 console 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 — .log(addValues( , , , , )); .log(addValues( , , )); console 1 2 3 4 5 // 15 console 10 20 30 // 60 But Arrow functions solve that issue with the following syntax approach — calc = {
         sumValue = ; ( i= ;i<args.length;i++){
             sumValue += args[i];
         } sumValue;
}; .log(calc( , , , )); ( ) => ...args 0 for let 0 return console 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. { theArgs.reduce( { prev + curr;
  });
} .log(sum( , , )); .log(sum( , , , )); ( ) function sum ...args return ( ) => prev, curr return console 1 2 3 //OUTPUT: 6 console 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.😇

Different

Modern Style of Javascript with Arrow Functions

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Announcement: Java12 has released!

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Announcement: Java12 has released!

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps