JavaScript Arrow Functions: The ES6 Syntax Guide

2026-03-1510 min

Front-endJavaScript

ES6 (ECMAScript 2015) introduced a cleaner way to write functions in JavaScript: the arrow function.

Arrow functions offer a more concise syntax — and in some cases, they also change how a function behaves, most notably how this works.

What Is an Arrow Function

An arrow function is a function syntax introduced in ES6.

It uses => to define a function — hence the name.

Regular function:

function plus(a, b) {
  return a + b;
}

Arrow function:

const plus = (a, b) => {
  return a + b;
};

The pattern is:

(parameters) => { body }

When a function body contains just one expression, you can drop the return keyword and the curly braces:

const multiply = (a, b) => a * b;

This is called an implicit return. JavaScript automatically returns the result of the expression.

When a function has exactly one parameter, you can omit the parentheses:

const square = x => x * x;

For zero parameters or multiple parameters, parentheses are still required:

const sayHi = () => "Hi";

const plus = (a, b) => a + b;

One of the biggest differences between arrow functions and regular functions is how they handle this.

Regular function — this refers to the object that called the function:

const obj = {
  value: 10,
  show: function () {
    console.log(this.value); // 10
  }
};

Arrow function — this is not bound dynamically. Instead, it's inherited from the surrounding lexical scope.

const obj = {
  value: 10,
  show: () => {
    console.log(this.value); // undefined
  }
};

This is why arrow functions are generally not recommended for object methods.

Arrow functions aren't a drop-in replacement for regular functions. Here are the cases where you should stick with regular functions:

const user = {
  name: "Charmy",
  greet() {
    console.log(this.name); // "Charmy"
  }
};

Using an arrow function here breaks this:

const user = {
  name: "Charmy",
  greet: () => {
    console.log(this.name); // undefined
  }
};

Arrow functions can't be used as constructors — they have no prototype and don't support new.

const Person = (name) => {
  this.name = name;
};

new Person("Charmy"); // TypeError

Use a regular function instead:

function Person(name) {
  this.name = name;
}

Arrow functions don't have their own arguments object — just like this, it's looked up in the outer scope:

function test() {
  console.log(arguments); // works
}

const test = () => {
  console.log(arguments); // may throw an error
};

Use a rest parameter instead:

const test = (...args) => {
  console.log(args);
};

Arrow functions are everywhere in modern JavaScript, especially with array methods:

const numbers = [1, 2, 3];

const doubled = numbers.map(n => n * 2);

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data));

button.addEventListener("click", () => {
  console.log("clicked");
});

Arrow functions are one of the most useful additions in ES6 — cleaner syntax, implicit returns, and lexical this.

Once you're comfortable with arrow functions, the natural next topics are:

These concepts will give you a much deeper understanding of how JavaScript functions actually work.