JavaScript Arrow Functions

In the previous lesson, we learned how to store a function in a variable as a function expression. Now let’s learn a shorter, more modern way to write those functions: arrow functions.

🏹 What is an Arrow Function?

An arrow function is a compact way to write a function expression. Instead of the function keyword, we use an arrow => (an equals sign followed by a greater-than sign) between the parameters and the body.

Here is a regular function expression and the same thing written as an arrow function:

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

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

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

Let’s walk through what each part does:

• The first add uses the function keyword, takes parameters a and b, and returns their sum.
• The second add does the same job, but drops the function keyword and places => after the parameter list (a, b).
• console.log(add(5, 3)) calls the function with 5 and 3, so it prints 8.

Both versions do exactly the same job. We drop the function keyword, and we place => after the parentheses that hold the parameters.

✂️ Implicit Return for One-Liners

When the function body is a single expression that returns a value, we can make it even shorter. We remove the curly braces and the return keyword, and JavaScript returns the result automatically. This is called an implicit return.

// With curly braces and return
const add = (a, b) => {
  return a + b;
};

// Implicit return: no braces, no return keyword
const add = (a, b) => a + b;

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

Here is how the short form maps onto the long one:

• The first add keeps the curly braces { } and writes return a + b explicitly.
• The second add removes the braces and the return, leaving just a + b after the arrow, so that value is returned automatically.
• console.log(add(5, 3)) calls either version and prints 8.

The value a + b is returned without us writing return. This short form is one of the main reasons arrow functions are so popular.

🎯 Single Parameter, No Parentheses

When an arrow function takes exactly one parameter, we can leave out the parentheses around it.

// With parentheses
const double = (n) => n * 2;

// Single parameter, parentheses omitted
const double = n => n * 2;

console.log(double(10)); // 20

Let’s see what changed between the two lines:

• The first double wraps its single parameter n in parentheses: (n).
• The second double drops those parentheses and writes n on its own, which is allowed because there is exactly one parameter.
• console.log(double(10)) passes 10 in for n, so it returns 10 * 2 and prints 20.

This rule applies only to a single parameter. With zero parameters or more than one, the parentheses are required.

const greet = () => "Hello!"; // No parameters: parentheses required
const sum = (a, b) => a + b; // Two parameters: parentheses required

These two lines show when parentheses are mandatory:

• greet takes no parameters, so we still need an empty pair of parentheses () before the arrow.
• sum takes two parameters, so they must be wrapped in (a, b).

📊 Regular Function vs Arrow Syntax

This table compares the same function written in different ways so the pattern is easy to see.

🧰 A Practical Example

Here is a small, real example. We have a function that calculates the final price after a discount.

const getFinalPrice = (price, discount) => price - price * discount;

console.log(getFinalPrice(100, 0.2)); // 80
console.log(getFinalPrice(50, 0.1)); // 45

Let’s trace what this code does:

• getFinalPrice takes two parameters, price and discount, and uses an implicit return for price - price * discount.
• price * discount is the discount amount, and subtracting it from price gives the final price.
• The first call uses 100 and 0.2, so it subtracts 20 and prints 80.
• The second call uses 50 and 0.1, so it subtracts 5 and prints 45.

The function takes a price and a discount rate, and returns the price minus the discount. The whole thing fits on one readable line.

🔍 A Note on this

Arrow functions also handle the this keyword differently from regular functions. An arrow function does not get its own this; it uses the this from the surrounding code instead. We will not go deep here, but it is good to know this difference exists for later lessons on objects.

⚠️ Common Mistakes to Avoid

Here is the most common slip in code, side by side:

// ❌ Wrong: braces but no return, so it gives undefined
const add = (a, b) => {
  a + b;
};

// ✅ Correct: implicit return with no braces
const add = (a, b) => a + b;

Let’s compare the two versions:

• The first add keeps the curly braces but only writes a + b; without return, so the function calculates the sum and then throws it away, returning undefined.
• The second add removes the braces, so a + b becomes an implicit return and the sum actually comes back.

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ Arrow functions are a shorter way to write function expressions using =>
• ✅ A single-expression body can use an implicit return with no braces and no return
• ✅ A single parameter lets us drop the parentheses around it
• ✅ Zero or multiple parameters still need parentheses
• ✅ Arrow functions are common in array methods and treat this differently

🚀 What’s Next?

Now that we can write compact functions, let’s learn how to pass functions into other functions. Let’s continue to Callback Functions.