When writing JavaScript functions, sometimes the syntax can feel a little long. Especially when the function is small and only does a simple task.

For example calculating a number, returning a value or transforming data.

To make function writing simpler and cleaner, JavaScript introduced arrow functions in ES6.

Arrow functions provide a shorter syntax for writing functions and are widely used in modern JavaScript.

Let’s understand how they work.

Normal Function Example

First let’s start with a normal function.

Suppose we want a function that calculates the square of a number.

function square(num) {
  return num * num
}

console.log(square(4))

Output

16

This works perfectly fine.

But for very small functions, this syntax can feel a bit verbose.

Arrow functions provide a simpler way.

Arrow Function Syntax

The same function written using an arrow function looks like this.

const square = (num) => {
  return num * num
}

console.log(square(4))

The arrow => replaces the function keyword.

So instead of writing function, we write an arrow.

Arrow Function with One Parameter

If the function has only one parameter, we can even remove the parentheses.

const square = num => {
  return num * num
}

console.log(square(5))

This is very common in modern JavaScript.

Arrow Function with Multiple Parameters

If the function has multiple parameters, we keep the parentheses.

Example:

const add = (a, b) => {
  return a + b
}

console.log(add(3, 7))

Here both parameters go inside the parentheses.

Implicit Return vs Explicit Return

Arrow functions have a useful feature called implicit return.

If the function body contains only one expression, JavaScript automatically returns the result.

Normal arrow function:

const square = (num) => {
  return num * num
}

Implicit return version:

const square = num => num * num

Here we removed:

• curly braces

• return keyword

JavaScript automatically returns the result.

This makes arrow functions very concise.

Even or Odd Example

Here is a small example that checks if a number is even.

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

console.log(isEven(6))

Output

true

Arrow Functions with Arrays

Arrow functions are often used with array methods like map(), filter(), and reduce().

Example using map().

const numbers = [1, 2, 3, 4]

const squares = numbers.map(num => num * num)

console.log(squares)

Output

[1, 4, 9, 16]

Here the arrow function makes the code much shorter and easier to read.

Basic Difference from Normal Functions

Arrow functions and normal functions both create functions, but they are used slightly differently.

Normal functions are commonly used for defining main logic.

Arrow functions are often used for:

• short utility functions

• callbacks

• array transformations

One important difference is how they handle this, but that is a deeper topic and we don’t need to go into it right now.

Syntax Breakdown

Arrow functions provide a shorter and cleaner way to write functions in JavaScript.

They reduce boilerplate code and make small functions easier to read.

Because of this, arrow functions are widely used in modern JavaScript, especially when working with arrays, callbacks and functional patterns.

Normal functions are still important, but arrow functions make many everyday tasks much simpler.