Arrow Functions in JavaScript: A Simpler Way to Write Functions

Hello readers 👋, welcome to the 8th blog of this JavaScript series.

Imagine you are packing your bag for a trip. You have two options:

Option 1: Pack everything carefully - fold your clothes, put them in separate compartments, zip everything properly.

Option 2: Just throw everything in the bag quickly.

Sometimes you need the careful packing (like for a long vacation). But sometimes you just want to throw things in and go (like for a quick gym session).

In JavaScript, we have something similar with functions.

We learned about regular functions in previous blogs. They are like careful packing - they work perfectly but require more writing.

Arrow functions are like quick packing - they do the same job but with less code. They are the modern, simpler way to write functions in JavaScript.

What Are Arrow Functions?

Arrow functions are a shorter syntax for writing functions in JavaScript. They were introduced in ES6 (a newer version of JavaScript) and have become very popular because they:

• Reduce the amount of code you write
• Make your code cleaner and easier to read
• Have some special features (though we will save the complex parts for later)

Think of arrow functions as the express version of regular functions. They get you from point A to point B faster.

Normal Function vs Arrow Function

Before we dive into arrow functions, let's look at how we normally write functions:

Regular Function

function greet(name) {
    return "Hello " + name
}

console.log(greet("Satya")) // Hello Satya

Arrow Function (Same Result)

const greet = (name) => {
    return "Hello " + name
}

console.log(greet("Satya")) // Hello Satya

See the difference? The arrow function:

1. Removes the function keyword
2. Adds an arrow => after the parameters
3. Stores the function in a variable (usually with const)

Basic Arrow Function Syntax

Let me break down the syntax piece by piece.

Full Arrow Function Syntax

const functionName = (parameter1, parameter2) => {
    // function body
    return result
}

Step-by-Step Breakdown

If we compare it to a regular function:

Regular Function:

function add(x, y) {
    return x + y
}

Arrow Function:

const add = (x, y) => {
    return x + y
}

The Transformation:

• Remove the word function
• Put an => between (x, y) and {
• Store it in a variable const add

Arrow Functions with One Parameter

When your arrow function has exactly one parameter, you can remove the parentheses ().

With Parentheses

const double = (num) => {
    return num * 2
}

console.log(double(5)) // 10

Without Parentheses (Shorter)

const double = num => {
    return num * 2
}

console.log(double(5)) // 10

Both work exactly the same. The parentheses become optional when there is only one parameter.

Pro tip: Many developers still use parentheses even with one parameter because it makes the code more consistent. But knowing you can omit them helps you read other people's code.

Arrow Functions with Multiple Parameters

When you have multiple parameters (or zero parameters), you must use parentheses.

Two Parameters

const add = (x, y) => {
    return x + y
}

console.log(add(5, 3)) // 8

Zero Parameters

const sayHello = () => {
    return "Hello World"
}

console.log(sayHello()) // Hello World

Implicit Return vs Explicit Return

This is one of the coolest features of arrow functions. Let me explain with a real-life example.

Explicit Return is like telling someone exactly what to do: "Please go to the kitchen, open the refrigerator, take out the milk, and bring it to me."

Implicit Return is like saying: "Bring me milk." The result is understood without listing all the steps.

In JavaScript:

Explicit Return (Using return keyword)

const add = (x, y) => {
    return x + y
}

Here we explicitly write the return keyword. The function knows it must return something.

Implicit Return (No return keyword)

When your function body has only one expression (one line of code), you can remove the curly braces {} and the return keyword. The result is automatically returned.

const add = (x, y) => x + y

console.log(add(5, 3)) // 8

No return, no curly braces. The expression x + y is automatically returned.

More Examples of Implicit Return

Example 1: Double a number

const double = num => num * 2

console.log(double(4)) // 8

Example 2: Greet someone

const greet = name => "Hello " + name

console.log(greet("Satya")) // Hello Satya

Example 3: Check if number is even

const isEven = num => num % 2 === 0

console.log(isEven(4)) // true
console.log(isEven(5)) // false

When to Use Which?

• Use explicit return (with curly braces and return) when your function has multiple lines of code
• Use implicit return (without curly braces) when your function is just one line that returns a value

// Multiple lines - need explicit return
const processNumber = num => {
    let squared = num * num
    let message = "The square is " + squared
    return message
}

// Single line - can use implicit return
const square = num => num * num

Basic Differences: Arrow Function vs Normal Function

For now, let's focus on the simple differences. We will explore the more complex differences (like this keyword) in a future blog.

1. Syntax Length

Normal Function:

function multiply(a, b) {
    return a * b
}

Arrow Function:

const multiply = (a, b) => a * b

Arrow functions are shorter and cleaner.

2. Function Keyword

Normal functions use the function keyword. Arrow functions use an arrow =>.

3. Implicit Return

Normal functions always need the return keyword to return something. Arrow functions can return implicitly (without return) when they have one expression.

4. Usage as Variables

Arrow functions are always stored in variables (usually const). Normal functions can be declared with the function keyword or stored in variables.

// Normal function - function declaration
function square1(x) {
    return x * x
}

// Normal function - stored in variable
const square2 = function(x) {
    return x * x
}

// Arrow function - always in variable
const square3 = x => x * x

Common Mistakes to Avoid

1. Forgetting Parentheses with No Parameters

// Wrong
const greet = => "Hello" // Syntax Error

// Correct
const greet = () => "Hello"

2. Using Curly Braces Without Return

// Wrong - this returns undefined
const add = (x, y) => { x + y }

// Correct - explicit return needed with curly braces
const add = (x, y) => { return x + y }

// Correct - no curly braces, implicit return
const add = (x, y) => x + y

Remember: {} means you need return. No {} means implicit return.

3. Trying to Use Implicit Return for Multiple Lines

// Wrong - can't have multiple lines without {}
const process = num => 
    let squared = num * num
    "Result: " + squared  // This won't work

// Correct
const process = num => {
    let squared = num * num
    return "Result: " + squared
}

4. Forgetting to Store Arrow Function in Variable

// Wrong - arrow functions need to be assigned
(x, y) => x + y // This does nothing

// Correct
const add = (x, y) => x + y

When to Use Arrow Functions

Arrow functions are perfect for:

1. Short, simple functions that do one thing
2. Callback functions (functions passed to other functions like map, filter, forEach)
3. When you want cleaner, more readable code

// Perfect use case: Array methods
let numbers = [1, 2, 3, 4, 5]

let squares = numbers.map(n => n * n)
let evens = numbers.filter(n => n % 2 === 0)
let sum = numbers.reduce((total, n) => total + n, 0)

console.log(squares) // [1, 4, 9, 16, 25]
console.log(evens)   // [2, 4]
console.log(sum)     // 15

Conclusion

• Arrow functions are a shorter way to write functions in JavaScript
• Basic syntax: const functionName = (params) => { body }
• With one parameter, parentheses are optional: num => num * 2
• With multiple or zero parameters, parentheses are required: (x, y) => x + y
• Implicit return happens when you omit {} - the expression is automatically returned
• Explicit return uses {} and the return keyword
• Arrow functions are great for short functions and callbacks
• They reduce boilerplate code and make your JavaScript more modern and readable

Arrow functions are now the standard way of writing functions in modern JavaScript. Once you get used to them, you will find yourself using them everywhere.

---

Hope you liked this blog. If there's any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.