When do functions get an arrow? what are they? how do they work? when to use?
Keep your back pulled, concentrate on the content to release an arrow function

Note: An assumption made here that the reader is already dwelt and dealt with the javascript function.

Intro

No need to talk about how functions are powerful so we call them the heart of the Javascript language. In ES6, Arrow functions introduced to make legacy function expression to look much cleaner by being compact and concise. First, will look into its syntax {}. Then, understand how they work in comparison to the legacy function expression. And start replacing them in codes! 😀

Syntax

Errors bother coders, so to avoid syntax errors let clearly understand the syntax.
Here is how an arrow function would look

const arrowFunc = () =>  console.log("Simple Arrow function")

Yes, it is similar to writing a normal function expression. Hence arrow functions helps us to avoid polluting the global scope

const normalFunc = function () {
  console.log('Simple Arrow function')
}

Now, will break down this and see the different syntax based on use-cases.
Just an analogy to bow and arrow. An arrow requires some pull-back force at one end and the arrowhead end will be pointing to the aim. Likewise, parameters will be written before the arrow and expression in front of the arrow

• No parameter and a return statement

  The parenthesis () is required before the arrow.
  And the single return statement in arrow functions can be written as "concise body", where { } can be eliminated, and return keyword not required

  () => expression
  

  I would like to mention one more thing about the concise body. In case of returning object literals, it must be wrapped (). Why? the code inside braces {} is parsed as a sequence of statements treating it as "function body''

  const arrowFunc = () => ( {obj : 528 } )
  

• Single parameter and a return statement

  The parenthesis () around the parameter is not required.

  param1 => expression
  

• Multiple parameters and a return statement

  In this case, parameters must be wrapped in ()

  (param1, param2) => expression
  

• Single parameter and multiple return statements

  Here it requires a body and optional return statement which is similar to the normal ''function body''

  param => {
  const add = 2;   
  console.log(param + add);
  }
  

• Multiple parameters and multiple return statements

  it's just a mix and match of previous cases

  (param1, param2) => {
  const add = 2;   
  console.log(param1 + param2 + add);
  }
  

  Talk is cheap, show me the code

Below code snippets gives a glimpse of how code would look clean, compact, and concise using arrow functions in case of Promises and callbacks

//ES5
 asyncFunction().then(function() {
     return asyncFunction1();
 }).then(function() {
     return asyncFunction2();
 }).then(function() {
     finish;
 });

//ES6
 asyncFunction()
 .then(() => asyncFunction1())
 .then(() => asyncFunction2())
 .then(() => finish);

Show time!

Take a hunch on below examples to find out which are syntactically correct and which are not

//1
var func = (a, b, c)
  => 1;
//2
const func = (a, b, c) =>
  1;
//3
const func = (a, b, c) => (
  1
);
//4
const func = (a, b, c) => {
  return 1
};
//5
const func = (a, b, c)
  => 1;
//6
const func = (
  a,
  b,
  c
) => 1;

only the 1st declaration is syntactically wrong, this is because of the line break, which is not allowed between parameters and arrow

invoking

Let's see simple arrow function

const arrowFunction = () => console.log("I am an arrow function");
arrowFunction(); //I am an arrow function

This worked as anticipated. How about this?

arrowFunction();
const arrowFunction = () => console.log("I am an arrow function");

If the guess is that it would work the same as before, sorry wrong!
It throws an error: ReferenceError: Cannot access 'arrowFunction' before initialization But why?
Look closely, arrow functions declaration is similar to function expression, where an anonymous function must be initialized before we invoke

Now we learned how to use but but at the same time, it is also important to know when to use and to know more about this arrow function, which will be covered in the this blog

Thanks for reading and open for the comments and suggestions