JavaScript Arrow Functions

By now you have written many functions the long way: function add(a, b) { return a + b; }. It works, but it is a lot of typing for a small idea. JavaScript has a shorter way to write the same thing — the arrow function, named after the fat arrow => in the middle. It does the same job in fewer words, and you will see it in almost every modern JavaScript file.

Diagram — see how it fits together

Think of it like a shortcut on your phone. The long way (calling the full number) still works, but the shortcut gets you to the same person faster. Arrow functions are the shortcut: same result, less typing, easier to read once you know the shape.

The shape — three small rules

let add = (a, b) => a + b;      // two params, one line, no return needed
let double = x => x * 2;        // one param — the brackets are optional
let sayHi = () => "Namaste!";   // no params — empty brackets

Rule one: if the body is a single line, you can drop the curly braces — and then the return is automatic. The value of that line is the result. Rule two: with exactly one parameter, the round brackets are optional. Rule three: with no parameters, or more than one, the brackets stay. When the body needs more than one line, you keep the braces and write return yourself, like a normal function.

The one big difference — this

Arrow functions are not just shorter. They handle this differently, and this is the part interviewers love to ask about. A normal function gets its own this depending on how it is called — inside a button click, this is the button. An arrow function has no this of its own: it borrows the this from the code around it.

let shop = {
  name: "Chai Shop",
  items: ["Masala", "Adrak", "Kulhad"],
  list: function () {
    this.items.forEach(item => {
      console.log(this.name + " sells " + item);
    });
  }
};

Inside forEach, the arrow function still sees this.name as "Chai Shop", because it borrowed this from list. If you used a normal function there, this would be something else entirely, and this.name would be undefined. That is why arrows are the standard choice inside map, filter and forEach.

Common mistakes

• Using an arrow function as an object method and expecting this to be the object — it is not. Methods should be normal functions.
• Writing () => { a + b } and wondering why the answer is undefined — with braces, you must write return yourself.
• Forgetting the brackets with two parameters — a, b => a + b is a syntax error. It must be (a, b) => a + b.
• Using arrows everywhere, even for long functions — readability suffers. Arrows are for short jobs.

Remember

• Arrow syntax: (a, b) => a + b — one line, no braces, no return.
• One parameter can drop its brackets: x => x * 2.
• With braces, you must write return yourself.
• Arrows have no this of their own — they borrow it from the surrounding code.
• The fat arrow points at the answer — no return needed for one line.

Example explained

• const price = cup => cup * 10; — an arrow with one parameter, no brackets, one line. price(3) returns 30.
• const total = (qty, rate) => qty * rate; — two parameters, so the brackets stay. total(3, 10) returns 30.
• const bill = qty => { let t = qty * 10; return "Total: ₹" + t; }; — with braces the body has two lines, so return is written by hand.
• document.getElementById("calc").onclick = () => { ... }; — an arrow as a click handler: short, and it borrows this from outside, which is what we want here.
• document.getElementById("out").textContent = bill(qty); — the arrow's answer is shown on the page.