Functions›Core· 30 min read

Arrow Functions

The shorter, modern way to write functions — used everywhere in React and modern JavaScript.

What you will learn

Write arrow functions
Use the short implicit-return form
Recognise arrows in modern code

A shorter syntax

Arrow functions do the same job with less typing. You will see them constantly in React and array methods.

function vs arrow

<script>
  // Traditional
  function addOld(a, b) { return a + b; }

  // Arrow
  const add = (a, b) => a + b;

  document.write(add(4, 6));
</script>

Live preview

Both functions do the exact same thing. The arrow version stores the function in a const and uses => instead of the word function. Calling add(4, 6) works just like before and returns 10.

Note: Output: 10

When the body is a single expression, you can drop { } and return — the value is returned automatically (implicit return).

Concise arrow forms

<script>
  const double = n => n * 2;          // one param, no brackets needed
  const greet = name => "Hi " + name; // implicit return
  document.write(double(5) + "<br>" + greet("Asha"));
</script>

Live preview

With one parameter you can even skip the ( ) around it. double takes n and returns n * 2, so double(5) gives 10. greet takes name and returns the joined text, so greet("Asha") gives "Hi Asha". There is no return word — a single-expression arrow returns its value automatically.

Note: Output: 10 Hi Asha

Tip: Arrow functions are the default in modern JavaScript and React. Learn to read and write them comfortably — you will use them every day.

Q. What is the arrow-function version of function(x){ return x * 3; }?

Answer: const f = x => x * 3; — parameters before =>, and a single expression is returned automatically.

✍️ Practice

Rewrite three normal functions as arrow functions.
Write an arrow function that returns whether a number is even.

🏠 Homework

Convert your earlier functions to arrow functions.