Author: M Abo Bakar Aslam

Arrow Functions

An arrow function in JavaScript is a concise way to write functions. It was introduced in ECMAScript 6 (ES6) and is often used to create anonymous functions or shorter function expressions.

Arrow functions provide a more compact syntax compared to traditional functions and behave differently in certain cases, especially regarding the this keyword.

The arrow function version is more concise, making it suitable for shorter functions. However, it is not a complete replacement for traditional functions due to differences in behavior.

1. Basic Introduction About Arrow Function

Example Code 1:

This example demonstrates a traditional function and an equivalent arrow function that both return a simple string.

Note:
It is recommended to use return when implementing logic inside functions.

//traditionals function declaration
function trad(){
    return "Hello World by traditional"
}
//arrow function declaration
let f2 = "" //declaring and initializing name of function
f2 = () => {
    return "Hello World by arrow"
}
console.log(trad())//calling traditional function
console.log(f2())//calling arrow function

Example Code 2:

This example shows how an arrow function can be shortened when it contains only a single statement.

Note:
When there is only one statement, curly braces {} and return can be omitted.

//traditional function declaration
function trad(){
    return "Hello World by traditional"
}
//arrow function declaration
let f2 = "" //declaring and initializing name of function
f2 = () => "Hello World by arrow"
console.log(trad())//calling traditional function
console.log(f2())//calling arrow function

Example Code 3:

This example further simplifies the arrow function by defining it in a single line.

//traditional function declaration
function trad(){
    return "Hello World by traditional"
}
//arrow function declaration
let f2 = () => "Hello World by arrow"
console.log(trad())//calling traditional function
console.log(f2())//calling arrow function

2. Arrow Function with One Parameter

Arrow functions accept parameters similar to traditional functions.

Example Code 4:

This example demonstrates passing a value to both traditional and arrow functions and displaying it.

//traditional function declaration
function trad(valueTrad){
    return "value in traditional function: " + valueTrad
}
//arrow function declaration
let f2 = "" //declaring and initializing name of function
f2 = (valueF2) => {
    return "value in arrow function: " + valueF2
}
console.log(trad(10))//calling traditional function
console.log(f2(20))//calling arrow function

Example Code 5:

When there is only one parameter, parentheses can be omitted.

Note:
This shorthand works only when a single parameter is used.

//traditional function declaration
function trad(valueTrad){
    return "value in traditional function: " + valueTrad
}
//arrow function declaration
let f2 = "" //declaring and initializing name of function
f2 = valueF2 => {
    return "value in arrow function: " + valueF2
}
console.log(trad(10))//calling traditional function
console.log(f2(20))//calling arrow function

3. Arrow Function with Multiple Parameters

When using multiple parameters, parentheses are required.

Example Code 6:

This example demonstrates passing two parameters and returning their multiplication.

//traditional function declaration
function trad(t1, t2){
    return t1*t2
}
//arrow function declaration
let f2 = "" //declaring and initializing name of function
f2 = (a1, a2) => {
    return a1*a2
}
console.log("Result of Traditional function: ", trad(10, 20))
console.log("Result of Arrow Function: ",f2(20, 30))

4. Arrow Function with Default Parameter

Default values can be assigned to parameters in arrow functions.

Example Code 7:

This example demonstrates:

//traditionals function declaration
function trad(t1=1, t2=2){
    return t1*t2
}
//arrow function declaration
let f2 = "" //declaring and initializing name of function
f2 = (a1=1, a2=2) => {
    return a1*a2
}
//only one value is passed
console.log("Result of Traditionals function: ", trad(20))//result: 40
console.log("Result of Arrow Function: ",f2(10))//result: 20
  
//no value is passed 
console.log("Result of Traditionals function: ", trad())//result: 2
console.log("Result of Arrow Function: ",f2())//result: 2

5. Function Within a Function

Functions can call other functions regardless of whether they are traditional or arrow functions.

Example Code 8:

This example demonstrates:

Note:
Arrow functions are widely used in modern JavaScript due to their simplicity and readability. However, understanding their differences from traditional functions is essential for proper usage.

//traditionals function calls another traditional function
function trad1(){
    return "T1"
}
function trad2(){
    return trad1() + " T2"
}
  
//arrow function calls another arrow function
let a1 = () => {
    return "A1"
}
let a2 = () => {
    return a1() + " A2"
}
  
//traditional function calls arrow function
function trad3(){
    return "T3 " + a2()
}
  
//arrow function calls traditional function
let a3 = () => {
    return "A3 " + trad2()
}
  
//same type function
console.log("Arrow calling another arrow function: ", a2())
console.log("trad calling another trad function: ", trad2())
//different type function
console.log("Arrow calling trad function: ", a3())
console.log("trad calling arrow function: ", trad3())