Loading...

JavaScript Arrow Functions

You already know how to declare a function, pass arguments, and return a value. Many everyday helpers are short enough that the full function keyword feels heavy. JavaScript also lets you write those helpers with an arrow — the => token — in a tighter line.

What an arrow function is

An arrow function is still a function: it takes inputs, runs a body, and can send a result back. The shape changes. You usually assign it to a name with const, list parameters, write =>, then either a short expression or a { } block.

Arrow next to a classic function

📊 Classic function vs arrow

Idea Classic style Arrow style
named helper function add(a, b) { return a + b; } const add = (a, b) => a + b;
return one expression return a + b; inside { } expression after => returns by itself
several statements { } plus return { } plus return — same rule
one parameter (name) or name in older forms name => ... (parentheses optional)
no parameters function hi() { ... } const hi = () => ... — empty () required
where it lives declaration or expression almost always stored in a variable

Both styles can return numbers and strings. Prefer the arrow when the helper is small and you want a clear const name. Prefer a classic function when you want a declaration that stands out as a named block — both are valid JavaScript.

Expression body (auto return)

javascript 
const double = (n) => n * 2;
let answer = double(5);
console.log(answer);

Expression body returns for you

After =>, a single expression is evaluated and returned automatically. No { } and no return keyword. Here double(5) becomes 10. Change the argument; the returned product follows.

Block body needs return

javascript 
const label = (score) => {
if (score < 0) {
return "invalid";
}
return "ok";
};
console.log(label(-1));
console.log(label(8));

Braces mean you control return

When the body uses { }, JavaScript does not auto-return the last line. Write return yourself, just like a classic function. That is how early exits and multi-step logic stay clear.

One parameter without parentheses

javascript 
const greet = name => "Hello, " + name;
let line = greet("Sara");
console.log(line);

One parameter can drop the parentheses

If there is exactly one parameter, you may write name => ... without ( ). The call site is unchanged: greet("Sara"). With two or more parameters, keep the parentheses.

No parameters need empty parentheses

javascript 
const hello = () => "Hello";
console.log(hello());

Zero parameters still need ()

With no inputs, write empty parentheses before =>. Skipping them is a syntax error. The call still uses hello() — the empty pair marks “no parameters.”

Store, call, reuse

javascript 
const add = (a, b) => a + b;
let total = add(3, 4);
console.log(total);
console.log(add(10, 2));

Name it, then call it

const add = (a, b) => a + b stores the arrow under add. You call it like any function: add(3, 4) returns 7. Same helper, two calls — reuse without rewriting the body.

Put an arrow on the page

Build a welcome string with an arrow, call it, and write the result into a paragraph — same page pattern as before, shorter function shape.

Page call with an arrow

html 
<!DOCTYPE html>
<html>
<head>
<title>arrow — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
const welcome = guest => "Hello, " + guest;
let box = document.getElementById("msg");
box.textContent = welcome("Omar");
</script>
</body>
</html>

The paragraph shows Hello, Omar. The arrow returned the string; the next line placed it on the page. Change only the argument, refresh, and read the new line. Next lesson covers scope — where those names are visible.

Practice steps

  1. Rewrite function triple(n) { return n * 3; } as a const arrow with an expression body.
  2. Write const hi = name => "hi " + name and log hi("Neda").
  3. Write const ping = () => "pong" and call it once.
  4. Write a block-body arrow that returns "zero" when n === 0, else "nonzero".
  5. Call add(6, 1) after defining const add = (a, b) => a + b and confirm you get 7.
  6. In the HTML demo, change only the argument string, refresh, and read the paragraph.

Frequent slip-ups

  • Writing { } after => and forgetting return — the call then yields undefined
  • Dropping () when there are zero parameters
  • Mixing up => with comparison operators — the arrow is function syntax, not “greater than”
  • Expecting a full lesson on this here — binding differences belong in a later page; this page is the compact shape
  • Thinking arrows replace return knowledge — expression bodies still return; block bodies still need return

Summary

  • Arrow functions use => and are usually stored in const
  • A bare expression after => returns automatically
  • A { } body needs an explicit return
  • One parameter may omit ( ); zero parameters need empty ()
  • Call an arrow by its name like any other function
  • Page updates can use a returned string from an arrow
  • Next: scope — where names live

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 30 of 31
Javascript Tutorial