Arrow Functions in JavaScript: A Simpler Way to Write Functions

Implicit Return vs Explicit Return

This is where arrow functions really start to shrink your code.

Explicit return (the regular way)

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

Here, return is written explicitly, and the function body needs curly braces around it.

Implicit return (the shorthand)

If the function body is just a single expression, you can drop both the curly braces and the return keyword — the result of that expression is automatically returned:

const square = num => num * num;

When implicit return works — and when it doesn’t

Implicit return only works when the function body is a single expression, with no curly braces at all:

// Works: single expression, implicit return
const double = num => num * 2;

// Does NOT implicitly return — curly braces mean you must use return explicitly
const double = num => {
  const result = num * 2;
  return result; // required here, since there's a full block with multiple steps
};

The moment your function needs more than one line of logic (like storing something in a variable first), you need curly braces and an explicit return — implicit return is specifically for short, single-expression functions.

A common gotcha: returning an object implicitly

// This looks like it should work, but doesn't do what you'd expect:
const makeUser = name => { name: name }; // JavaScript reads this as a function body, not an object!

// Wrap the object in parentheses to fix it:
const makeUser = name => ({ name: name });

Wrapping the object literal in parentheses tells JavaScript “this is an object, not a function body” — a small but genuinely common trap worth knowing about early.

Basic Difference Between Arrow Function and Normal Function

For beginners, the most important takeaway is simply this: arrow functions are a shorter way to write the same functions you already know how to write — same parameters, same logic, same return values, just less typing for simple cases. (Arrow functions do behave differently from regular functions in one specific, more advanced way — how they handle this — but that's a topic worth its own dedicated, careful explanation once you're comfortable with the basics covered here.)

Practice Assignment

1. Write a normal function to calculate the square of a number

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

square(5); // 25

2. Rewrite it using an arrow function

const square = num => num * num;

square(5); // 25

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

const evenOrOdd = num => (num % 2 === 0 ? "even" : "odd");

evenOrOdd(7);  // "odd"
evenOrOdd(10); // "even"

4. Use an arrow function inside map() on an array

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

const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

const labeled = numbers.map(num => `${num} is ${num % 2 === 0 ? "even" : "odd"}`);
console.log(labeled);
// ["1 is odd", "2 is even", "3 is odd", "4 is even", "5 is odd"]

Try running each of these directly in your browser console, and try changing the logic inside each arrow function to see how the output changes.

Final Takeaway

Arrow functions don’t change what a function does — they change how much you have to type to say it. Dropping the function keyword, making parentheses optional for a single parameter, and allowing implicit return for simple, single-expression logic all add up to noticeably cleaner code, especially for the short, inline functions that show up constantly inside things like map(), filter(), and event handlers. Once the basic shape clicks — parameters, arrow, body — converting a regular function into an arrow function becomes second nature.

Frequently Asked Questions

Do arrow functions and regular functions always behave exactly the same way?

> For the basics covered here — parameters, logic, and return values — yes, they behave identically. Arrow functions do differ from regular functions in one more advanced area (how they handle this), which matters most inside object methods and classes, and is worth learning carefully once you're comfortable with these fundamentals.

Can I always use implicit return to make my code shorter?

> Only when your function body is a single expression. The moment your logic needs more than one step (like storing an intermediate value), you’ll need curly braces and an explicit return.

Why do I need parentheses around an object when using implicit return?

> Because JavaScript interprets a { right after => as the start of a function body, not an object literal. Wrapping the object in parentheses, like num => ({ value: num }), tells JavaScript to treat it as an object being returned instead.

Should I always use arrow functions instead of regular functions now?

> Not necessarily — many developers use arrow functions for short, inline logic (like callbacks passed to map() or filter()) and still use regular named functions for larger, standalone functions, where a clear function name and more advanced behavior (like this handling) matter more.