Arrow Functions in JavaScript: A Simpler Way to Write Functions

In the world of standard JavaScript functions, the keyword this is a shapeshifter. It changes its identity based on who called it, often leading to the infamous .bind(this) hacks of the past. But Arrow Functions changed the game. They don't have an identity crisis—because they don't have an identity at all. They are the 'chameleons' of the JS engine, and today, we’re looking at why that makes them so powerful.

What are Arrow functions?

At its core, an arrow function is just a shorter, more concise way to write functions in JavaScript. Introduced in ES6, it has quickly become the standard for modern JS development. It strips away the bulky keywords and leaves you with just the essential logic.

Instead of the function keyword, we use an arrow => (an equals sign followed by a greater-than sign) to connect the parameters to the function's body.

Handling Parameters

Functions usually need some data to work with, which we pass in as parameters. Arrow functions handle these beautifully.

Arrow functions with multiple parameters: When you have two or more parameters, you wrap them in parentheses, just like a normal function. Let us do some simple math:

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

Arrow functions with exactly one parameter: Here is a really neat trick. If your function only takes exactly one parameter, JavaScript lets you drop the parentheses completely! It makes the code look incredibly clean.

const greetUser (name) => {
  return "Welcome, " + name + "!";
};

The Magic of Returns: Implicit vs Explicit

This is where arrow functions truly shine.

Explicit Return: This is what you are probably used to. You open up your curly braces {}, write your logic, and explicitly use the word return to send a value back.

const multiply = (x, y) => {
  return x * y;
};

Implicit Return: If your function is simple enough that it only takes up one single line of code, you can drop the curly braces and drop the return keyword entirely. JavaScript will automatically "implicitly" return whatever that single line evaluates to.

const multiply = (x, y) => x * y; 

Look at how readable that is! It practically reads like plain English.

Arrow Functions vs Normal Functions: The Basics

You might be wondering why we don't just use normal functions all the time. Well, aside from arrow functions being much faster to type and easier to read, there are a few basic differences.

The most noticeable difference for beginners is how they are declared. Normal functions use the function keyword and can often be called before they appear in your code file. Arrow functions are usually stored inside variables (like const or let), meaning you have to define them before you try to use them.

There is also a deeper difference involving how they handle a special JavaScript keyword called this. Normal functions create their own this context, while arrow functions inherit it from their surroundings. But honestly, let us save that headache for another day! For now, just focus on how great they are for writing clean, modern code.

Your Turn!

The best way to learn is by doing. Pop open your browser console or your favorite code editor and try these out:

1. Write a normal, classic function that takes a number as a parameter and returns the square of that number (number multiplied by itself).

2. Now, rewrite that exact same function using an arrow function. Try your best to use an implicit return to make it a one-liner!

3. Create an arrow function that takes a number and returns the word "Even" if the number is even, or "Odd" if it is odd.

4. Challenge: Create a simple array of numbers, like [1, 2, 3, 4]. Use the array .map() method along with an arrow function to double every number inside that array.