Arrow Functions

About JavaScript

JavaScript is a programming language that makes web pages interactive. It can respond to user actions, update content and fetch data, and it also runs on servers through runtimes such as Node.js.

• Interactive websites
• Web applications
• Server APIs

Created by

Brendan Eich at Netscape

First released

1995 · browser debut

Version / standard

ECMAScript 2026

17th edition of the language standard. Browser and runtime support varies.

In the real world

• Netflix: The netflix.com browser interface
• PayPal: The JavaScript checkout SDK
• GOV.UK: Interactive GOV.UK Frontend components

Facts checked 8 September 2026. Links open the sources; examples describe specific products or documented uses.

Syntax

const functionName = (parameters) => { /* body */ }

Examples

// No parameters
const greet = () => {
  console.log("Hello!");
};

// Single parameter (parentheses optional)
const square = x => x * x;
console.log(square(5)); // 25

// Multiple parameters
const add = (a, b) => a + b;
console.log(add(3, 4)); // 7

// Multiple statements
const multiply = (a, b) => {
  const result = a * b;
  return result;
};

console.log(multiply(6, 7)); // 42

const numbers = [1, 2, 3, 4, 5];

// Map - transform each element
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Filter - select elements
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// Reduce - accumulate values
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// Chaining methods
const result = numbers
  .filter(n => n > 2)
  .map(n => n * 3)
  .reduce((acc, n) => acc + n, 0);

console.log(result); // 36

// Return object literal
const createPerson = (name, age) => ({ name, age });

const person = createPerson("Alice", 25);
console.log(person); // { name: "Alice", age: 25 }

// Array of objects
const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 35 }
];

const names = users.map(user => user.name);
console.log(names); // ["John", "Jane", "Bob"]

const adults = users.filter(user => user.age >= 30);
console.log(adults);

// setTimeout callback
setTimeout(() => {
  console.log("Delayed message");
}, 1000);

// Event handler
document.querySelector("#myButton")?.addEventListener("click", (event) => {
  console.log("Button clicked!", event.target);
});

// Promises
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

// Async/await
const fetchData = async () => {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
};

Best practices

• Use arrow functions for short, simple operations and callbacks
• Omit parentheses for single parameters, but always use them for clarity in complex cases
• Remember that arrow functions don't have their own "this" - they inherit it from parent scope
• Wrap object returns in parentheses: () => ({ key: value })
• Don't use arrow functions for object methods if you need access to "this"
• Prefer arrow functions in array methods (map, filter, reduce) for conciseness

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation