Arrow Functions in JavaScript Explained: Syntax, Examples, and Implicit Return

In previous posts, we explored Function Declarations and Function Expressions. Those are the traditional ways of writing functions in JavaScript.

But modern JavaScript introduced a cleaner and shorter syntax called Arrow Functions.

Arrow functions were introduced in ES6 (2015) to reduce unnecessary syntax and make code easier to read. They are now widely used in modern JavaScript codebases.

What Arrow Functions Are

Arrow functions are a shorter way to write functions in JavaScript. They remove some of the boilerplate syntax required when writing traditional functions.

For example, a normal function expression looks like this:

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

Using an arrow function, the same logic becomes:

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

Here, the function keyword is replaced with the => arrow symbol.

Arrow functions can even be written in a shorter form when returning a single value.

const greet = name => "Hello " + name;

This makes the code more concise and easier to read.

Basic Arrow Function Syntax

The general syntax of an arrow function is:

const functionName = (parameters) => {
  // code
};

Example:

const sayHello = () => {
  console.log("Hello World");
};

In this example:

• The function is stored in a variable

• The function keyword is removed

• => is used to define the function

Arrow Functions with One Parameter

If a function has only one parameter, the parentheses are optional.

Normal function:

const square = function(num) {
  return num * num;
};

Arrow function:

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

This keeps the syntax shorter and cleaner.

Arrow Functions with Multiple Parameters

If a function has multiple parameters, parentheses are required.

Example:

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

Without parentheses, JavaScript would not understand multiple parameters correctly.

Implicit Return vs Explicit Return

Arrow functions support two types of return behavior.

Explicit Return

const multiply = (a, b) => {
  return a * b;
};

Here we explicitly use the return keyword.

Implicit Return

When the function returns a single expression, JavaScript allows a shorter syntax.

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

In this case:

• Curly braces are removed

• return is not required

• JavaScript automatically returns the result

Another example:

const double = n => n * 2;

This is called implicit return.

Basic Difference Between Arrow Function and Normal Function

Example comparison:

// normal function
const add = function(a, b) {
  return a + b;
};

// arrow function
const add = (a, b) => a + b;

Arrow functions help developers write cleaner and more readable code.

When Arrow Functions Are Commonly Used

Arrow functions are commonly used in:

• Short utility functions

• Callbacks

• Event handlers

• Functional programming patterns

Example:

const numbers = [1,2,3];

const doubled = numbers.map(n => n * 2);

Note: Arrow functions do not have their own this. They inherit this from the surrounding scope. We'll explore this in a future post.

Now that we understand the basics of arrow functions, let's practice with a few small exercises.

Practice Assignment

Here are some exercises to practice arrow functions.

1. Convert a Normal Function to an Arrow Function

Normal function:

function square(num) {
  return num * num;
}

Rewrite it using an arrow function.

2. Create a Greeting Function

Write an arrow function that takes a person's name as input and returns a greeting message.

Example output:

Hello Dnano!

Hint: Use string interpolation.

3. Check Even or Odd Using Arrow Function

Create an arrow function that returns whether a number is even or odd.

// one-liner
const checkEvenOdd = num => (num % 2 === 0 ? "Even" : "Odd"); 


// more readable version
const checkEvenOdd2 = num => {
  if (num % 2 === 0) {
    return "Even";
  } else {
    return "Odd";
  }
};

Arrow Function Basics

• Introduced in ES6 (2015)
• Uses => instead of the function keyword
• Shorter and cleaner syntax
• Parentheses optional for one parameter
• Supports implicit return

Conclusion

Arrow functions provide a shorter and cleaner way to write functions in JavaScript. Because of their concise syntax, they are widely used in modern JavaScript applications and libraries.

If you're learning JavaScript, getting comfortable with arrow functions will help you write more modern and concise code.

Thank you for your patience while reading.