Arrow Functions in JavaScript: A Simpler Way to Write Functions

Let's be honest: developers are lazy in the best way possible. If we can save five keystrokes, we will take the shortcut every single time.

For years, JavaScript forced us to write the word function every time we wanted the computer to do something. It felt clunky. It took up space.

Then came the Arrow Function. It is a sleeker, cleaner, and much more modern way to write code. If you are building modern apps—especially if you ever touch libraries like React.js—arrow functions aren't just an option; they are the absolute standard.

Here is how you ditch the boilerplate.

The Evolution of a Function

Let's say you're building a feature to calculate travel distances (maybe for a carbon-footprint tracker). Here is the old-school way to write that logic:

function calculateMiles(distance) {
  return distance * 1.5;
}

It works perfectly fine. But we can put it on a diet.

Step 1: The Transformation Kill the word function. We don't need it. Instead, we add a "fat arrow" => right after the parentheses to point to what the function actually does. Since it no longer has a name attached to the front, we store it in a const variable.

const calculateMiles = (distance) => {
  return distance * 1.5;
};

The Real Magic: Implicit Return

This is where arrow functions go from "okay" to "amazing."

If your function only does one simple thing—like a single line of math—you can delete the curly braces {} AND the word return. The arrow implies that you want to return the result.

const calculateMiles = (distance) => distance * 1.5;

Look at that. We went from three lines of code down to one clean, readable sentence.

Dropping the Parentheses

Arrow functions are incredibly flexible. The rules change slightly depending on how many parameters (inputs) you are handing to the function:

One Parameter: If you have exactly one input, you don't even need the parentheses around it!
```
const doubleNum = num => num * 2;
```
Multiple Parameters: If you have two or more, you must bring the parentheses back.
```
const addScores = (score1, score2) => score1 + score2;
```
Zero Parameters: If the function doesn't take any inputs, use an empty set of parentheses.
```
const sayHello = () => "Welcome to the platform!";
```

Normal vs. Arrow: What's the Catch?

At a beginner level, they do the exact same thing.

The main difference right now is purely stylistic. Normal functions are bulky, standalone declarations. Arrow functions are lightweight, which makes them perfect for passing into other methods (like when you need a quick callback).

(Note: There is a deep, technical difference under the hood involving a JavaScript keyword called this, but honestly, you can completely ignore that until you start building highly complex object-oriented architecture).

Assignment

1 & 2: The Square Setup (Normal vs. Arrow)

// 1. The Old Way
function squareNormal(num) {
  return num * num;
}

// 2. The Modern Arrow Way (Look at that implicit return!)
const squareArrow = num => num * num;

3: The Even/Odd Checker We can use an arrow function alongside a ternary operator (a one-line if/else statement) to create a tiny, powerful tool.

const isEven = num => num % 2 === 0 ? "Even" : "Odd";

console.log(isEven(4)); // Output: "Even"
console.log(isEven(7)); // Output: "Odd"

4: The Ultimate Combo (Arrow inside map) Remember the map() method from the last article? This is where arrow functions truly shine. Instead of writing a bulky traditional function inside the map, we just pass a quick arrow.

// Let's say these are IDs for some practice questions
const questionIds = [10, 20, 30, 40];

// We want to double every ID in the array
const doubledIds = questionIds.map(id => id * 2);

console.log(doubledIds); 
// Output: [20, 40, 60, 80]