Imagine you’re texting a friend. Sometimes you type a long formal message, like:

“Hello, how are you doing today? I was wondering if you’d like to play football this evening.”

But other times, you keep it short and fast, like:

“Game at 5?”

Both messages mean the same thing, but the second one is way quicker.

That’s exactly what arrow functions are in JavaScript: a shorter, faster way to write functions.

The Usual Way of Writing Functions

Normally, if you want a function, you’d write:

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

That works fine. But JavaScript says: 👉 “Hey, want a shortcut?”

The Arrow Function Way

The same thing can be written with an arrow (=>):

let add = (a, b) => a + b;
console.log(add(2, 3)); // 5

Much shorter, right?

Real Life Scenario 1: Calculator App

Imagine you’re making a small calculator on a webpage:

let multiply = (x, y) => x * y;
let divide = (x, y) => x / y;

console.log(multiply(4, 5)); // 20
console.log(divide(10, 2));  // 5

Arrow functions make your code feel lighter and quicker.

Real Life Scenario 2: To-Do List App

Suppose you have a list of tasks and you want to print them all:

let tasks = ["Homework", "Clean room", "Play football"];

tasks.forEach(task => console.log(task));

Here, instead of writing a long function(task) { ... }, you just write task => .... Super neat!

When You Need Braces {}

If your function has more than one line, you still need {} and return:

let greet = (name) => {
  let message = "Hello, " + name + "!";
  return message;
};

console.log(greet("Ada")); // Hello, Ada!

Special Rule: this

Arrow functions don’t have their own this.

Think of it like this: a normal function has its own backpack called this, but arrow functions borrow the backpack from where they were created.

This is super helpful when working with buttons or events.

Example:

function Person(name) {
  this.name = name;
  setTimeout(() => {
    console.log("Hi, I'm " + this.name);
  }, 1000);
}

let p = new Person("Chidi");
// After 1 second → Hi, I'm Chidi

If we had used a normal function inside setTimeout, it would lose the name! Arrow functions save us from that confusion.

✅ Quick Recap

  • Arrow functions are shortcuts for writing functions.
  • (a, b) => a + b is the same as function(a, b) { return a + b; }.
  • Use them for short, simple functions.
  • They don’t have their own this, which makes them handy in certain cases.

Review Fill-in-the-Gap Questions

  1. Arrow functions are a __________ way to write functions in JavaScript.
  2. The symbol used for arrow functions is __________.
  3. (a, b) => a + b is the short form of function(a, b) { __________ }.
  4. In arrow functions, if there is only one line, the __________ keyword can be skipped.
  5. Arrow functions do not have their own __________; they borrow it from the parent scope.
  6. A real-life example of arrow functions is printing tasks in a __________ app.
  7. To make an arrow function with multiple lines, you need __________ and the return statement.
  8. Arrow functions are especially useful in handling __________ like button clicks or timeouts.
  9. let multiply = (x, y) => x * y; will return __________ when called with (4, 5).
  10. Arrow functions make code more __________ and __________.
<
Previous Post
WebSockets: Why It’s a Game-Changer
>
Blog Archive
Archive of all previous blog posts