Arrow Functions in JavaScript: A Simpler Way to Write Functions

Arrow vs. Function syntax

Traditional Functions

• Today, let's start with syntactical difference at first.

• The traditional method to define a function relies on using the function keyword, and also a return keyword specifies what to return and everything must take place between {} closed block.

• The code block below is a structure of an orthodox function definition:

//Normal Functions
function myFunc(param){
    return variable;
}
//'function' keyword; name(parameter); 'return' keyword 

Arrow Functions

• Now, we must move on to Arrow Functions. We will expand on the Arrow Function and different ways of 'returning' too later in this article only.

• The Arrow Function was introduced in ES6 and it presented a new way to define and call functions. The syntax was less verbose, more readable, and tidy in nature. It is used to define callback functions in a more efficient manner.

• The Arrow Function can simply be defined using => symbol, called fat Arrow symbol(Something new to learn everyday).

• There is also no need to explicitly remind the programme to return a value.

• The basic syntax is const/let functionName = (parameters) => returnValue;

//Arrow Functions
const myFunc = (param) => variableReturn;
//'=>' is the unofficial keyword that results not in comparison of value but definition of a function.  

A Story of ways

In my childhood, we were taught to write letters and it had a somewhat rigid structure, you needed to specify the sender's address, then receiver's address and date and what not... all justifiably so. But, then came whatsapp and other such messaging services and all those constraints of a proper writing structure were betrayed in favour of the flexibility. The recent modes of communication is much more malleable than earlier methods. Something similar happened when ES6 introduced Arrow Functions.

Why Arrow Functions?

1. The 'this' problem: The traditional function had a problem with this. The nested function(function inside a function) had a context of this but it pointed to global object and not to the parent function.

2. Concise Syntax and Implicit Returns: One word: Verbose. Before ES6 releases .map() and other such higher order functions when relying on callback functions also invited large verbose code syntax in the form of function and {} along with explicitly mentioning the return keyword. This new method of defining a function also improved readability.

Arrow Function and Parameter it takes

Uni-Paramed

• If we are writing an Arrow Function, and we are only concerned with a single parameter, we might not use () and the code would still behave as expected.

const squared = num => num*num;  
//No use of() was needed to handle parameters as only one parameter was used.

Multi-Paramed

• However, when multiple parameters are concerned we are required to use () so that multiple parameters can be accessed and the function defined works as needed.

const addTwoNums = (num1, num2) => num1 + num2;
//Since there were two parameters to take into action () was needed.

Implicit vs Explicit Return

1. Explicit Return:

• If we use curly braces, the "implicit return" magic disappears. We must use the return keyword, or the function will return undefined by default.

const add = (a, b) => {
    const sum = a + b;
    return sum; 
};
// Required because of the { }

1. Implicit Return:

• If the function body consists of only a single expression, we can omit the curly braces and the return keyword. The result of that expression is returned automatically.

• Using () also specifies Implicit Return.

const add = (a, b) => a + b; 

console.log(add(5, 10)); // 15

1. Object Return

• When returning an Object, BEWARE! the programme understands the {} as function scope. Thus use () to specify returning of an object.

//JS thinks the braces are for a function block
const getHero = (name) => { heroName: name }; 

//Parentheses tell JS "this is an expression returning an object"
const getHero = (name) => ({ heroName: name });

console.log(getHero("Batman")); // { heroName: "Batman" }

Traditional vs. Arrow Functions

• This right here is the answer to a 5 marks question

  Table of differences

Feature	Traditional Function	Arrow Function
Syntax	Requires function keyword and return.	Uses =>, optional return (implicit).
this Binding	Dynamic: Defined by how the function is called.	Lexical: Inherited from the surrounding scope.
arguments Object	Has its own arguments object.	No arguments (must use ...args).
Constructor	Can be used with new (has a prototype).	Cannot be used with new (no prototype).
super Binding	Does not have its own super.	Can use super from parent scope.
Duplicate Parameters	Allowed in non-strict mode.	Never allowed (Syntax Error).
Methods	Can be used as object methods with this.	Best avoided for methods (loses object context).
Hoisting	Function declarations are fully hoisted.	Treated as variables (subject to const/let rules).

Conclusion

The introduction of Arrow Function changed a lot of things in JS. The callbacks were shorter, more readable, the this context was now a little more in control, and the teachers now had one more topic to teach.

---

I would conclude by thanking #chaicode team.

Also, I hope all who read down to this part got something worthwhile. I wish you a lovely purple evening.