Arrow Functions in JavaScript – Example Code

What is the arrow function in JavaScript?

Arrow functions were introduced in ES6 and it provides a simple way to declare functions in JavaScript. It allows us to create functions in a cleaner way compared to regular functions.

In this tutorial, we will learn arrow functions and also we will convert normal functions to arrow functions by many examples. Arrow function in JavaScript is very simple to learn and write. We just have to be aware of javascript syntax. Please refer to this article to know the basic concept of JavaScript.

 

---

Moves forward to Examples

In JavaScript, we can write Normal functions like:

// Normal Sum function in JavaScript
function sum(a, b) {
    return a + b;
}

But we can also write the same Sum function like:

// Arrow Function

const sum = (a, b) => a + b

Both codes are the same and also they work exactly the same. Both will return the sum of a and b.

 

Let’s learn in brief…

---

Functions without parameter

// Normal Function without parameter
function withoutParameter(){
    alert("I am learning Arrow Functions");
}
// calling the normal function
withoutParameter();


// --------------------------

// Arrow Function without parameter
const withoutParameter = () => {
    alert("I am learning Arrow Functions");
}
// calling the arrow function
withoutParameter();

 

Functions with one parameter

// Normal function with one parameter
function square(num) {
    alert("Square of " + num + " is " + num * num);
}
// calling the function
square(4);

// -------------------------

// Arrow function with one parameter
const square = (num) => {
    alert("Square of " + num + " is " + num * num);
}
// call the function
square(5);

 

Tip: You can remove the Parentheses () from the parameter of the function in one parameter function.

For example, You can write the above code as follows:

// Arrow function with one parameter
const square = num => { // removed parentheses from the parameter
    alert("Square of " + num + " is " + num * num);
} 
// call the function 
square(5);

 

Functions with more than one parameter

// Normal Function with More than one parameter
function sum(a, b){
    let total = a + b
    alert("The Sum is: " + total);
}

sum();

// --------- OR ----------

function sum(a, b, c){ // we can not remove parentheses because this has more than one parameter
    let total = a + b + c
    alert("The sum is: " + total);
}
sum();

 

Tip: In a single-parameter function, we can exclude the parentheses from the parameter but for more than one parameter, we have to write the parentheses.

---

And Arrow function also provides some best features of javascript. Like: We can also exclude the return keyword from the function if the body of the function has a single statement. More details and examples are given below.

If the body of the function contains a single statement then we can remove the return keyword.

Example 1:

// Normal Function that return something
function square(num){
    return num * num;
}
console.log(square(5)); // output = 25

// -----------------------------------
// and in arrow function we can write the same function like

// Arrow function that return something
const square = num => {
    return num * num; // using return keyword
}
console.log(square(4)); // output = 16

// ----------- OR ------------

const square = num => num * num

console.log(square(3)); // output = 9

// the above function is without return keyword but
// the function is returning the power from it's body

 

Example 2:

// Normal Function
function cube(num){
    return num * num * num;
}
console.log(cube(3)); // output = 27

// -------------------------------------------------

// Arrow function
const cube = num => {
    return num * num * num;
}
console.log(cube(2)); // output = 8

// ------------ OR -----------

const cube = num = num * num * num

console.log(cube(5)); // output = 125

// -------- OR ----------

// we can enclose the function body by parentheses like the below code

const cube = num = (num * num * num) // this will also work

console.log(cube(5)); // output = 125

 

Tip: If we use Curly brackets in the function body then we have to write the return keyword to return any value from the function but if we do not use Curly brackets then the function will automatically return the result after the execution.

---

 

That’s it for Arrow Functions… Hope you understand the concept of Arrow Functions in JavaScript. If you have any doubt or query then please comment below.

Tip for React Js Developers: You can return JSX elements from any function like this

const card = () => {
    return (<div>
        <h2>My Card</h2>
    </div>)
}

// -------- OR -------

const card = () => (<div>
        <h2>My Card</h2>
    </div>)

// Both will work same

 

Thanks for reading the tutorial 🙂