JavaScript Arrow Functions: Syntax and Parameters

Arrow functions are an important feature of JavaScript ES6 (ECMAScript 2015). They provide a shorter way to write function expressions and make JavaScript code easier to read in many situations.

Arrow functions are commonly used in event handlers, array methods, callbacks, and modern frameworks such as React. Understanding their syntax and parameters will help you write cleaner and more reusable JavaScript code.

In this tutorial, you will learn how to write arrow functions, pass parameters, return values, and use different parameter patterns with practical examples.

What Is an Arrow Function in JavaScript?

An arrow function is a function expression that uses the arrow (=>) syntax instead of the traditional function keyword.

A traditional function looks like this:

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

console.log(add(10, 20));

Output:

The same function can be written using an arrow function:

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

console.log(add(10, 20));

Output:

Both examples return the sum of two numbers. The arrow function uses the => symbol to separate its parameters from its function body.

Arrow Function Syntax

The general syntax of an arrow function is:

const functionName = (parameters) => {
    // Function body
};

The syntax contains several parts:

const declares the variable that stores the function.
functionName is the name used to call the function.
parameters represent the input values.
=> separates the parameters from the function body.
Curly braces contain the statements executed when the function is called.

For example:

const greet = (name) => {
    console.log(`Hello, ${name}!`);
};

greet("Alex");

Output:

Hello, Alex!

The function receives "Alex" as its argument and displays a greeting.

Arrow Function with No Parameters

An arrow function that does not accept parameters must use empty parentheses ().

const greet = () => {
    console.log("Welcome to JavaScript!");
};

greet();

Output:

Welcome to JavaScript!

The function does not require any input values. When you call greet(), it executes the statement inside its body.

You can also write a no-parameter arrow function using a concise body:

const getMessage = () => "Hello, JavaScript!";

console.log(getMessage());

Output:

Hello, JavaScript!

Because the function contains only one return expression, curly braces and the return keyword are unnecessary.

Arrow Function with One Parameter

When an arrow function has exactly one simple parameter, you can omit the parentheses around that parameter.

const square = number => {
    return number * number;
};

console.log(square(5));

Output:

The parameter number receives the value 5. The function multiplies it by itself and returns 25.

You can also use a concise body:

const square = number => number * number;

console.log(square(6));

Output:

Both versions work correctly.

Although parentheses are optional for one simple parameter, using them consistently is also valid and may make your code easier to read.

Arrow Function with Multiple Parameters

When an arrow function has two or more parameters, you must enclose them in parentheses.

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

console.log(add(15, 25));

Output:

Here, a and b are parameters. The values 15 and 25 are arguments passed when the function is called.

You can also write the function in a shorter form:

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

console.log(multiply(4, 5));

Output:

The expression a * b is returned automatically because the function uses a concise body without curly braces.

Parameters vs Arguments

Parameters and arguments are related, but they have different meanings.

Parameters are the variable names defined in a function declaration or expression.
Arguments are the actual values supplied when calling the function.

Example:

const greet = (name) => {
    console.log(`Hello, ${name}!`);
};

greet("Sarah");

In this example, name is the parameter, while "Sarah" is the argument.

Output:

Hello, Sarah!

Understanding this distinction makes it easier to work with functions and reusable JavaScript code.

Arrow Functions with Default Parameters

ES6 allows you to assign default values to function parameters. The default value is used when an argument is omitted or explicitly passed as undefined.

const greet = (name = "Guest") => {
    console.log(`Hello, ${name}!`);
};

greet("Alex");
greet();

Output:

Hello, Alex!
Hello, Guest!

The first call uses "Alex" as the argument. The second call uses the default value "Guest" because no argument is supplied.

Default parameters are useful when a function should continue working even when some inputs are not provided.

Arrow Functions with Multiple Parameters and Default Values

You can combine multiple parameters with default values.

const calculatePrice = (price, quantity = 1) => {
    return price * quantity;
};

console.log(calculatePrice(500, 3));
console.log(calculatePrice(500));

Output:

1500
500

In the first call, price is 500 and quantity is 3.

In the second call, quantity uses its default value of 1.

Arrow Functions with Rest Parameters

Rest parameters allow an arrow function to accept multiple arguments and collect them into an array. The rest parameter uses three dots (...) before its name.

const addNumbers = (...numbers) => {
    return numbers.reduce((total, number) => total + number, 0);
};

console.log(addNumbers(10, 20, 30));
console.log(addNumbers(5, 15, 25, 35));

Output:

60
80

The numbers parameter collects all the supplied arguments into an array. The reduce() method calculates their total.

A rest parameter must be the last parameter in the parameter list.

Arrow Functions with Object Parameters

Arrow functions can accept objects as parameters. You can use destructuring to extract specific properties directly from an object.

const displayUser = ({ name, age }) => {
    console.log(`Name: ${name}`);
    console.log(`Age: ${age}`);
};

displayUser({
    name: "Alex",
    age: 22
});

Output:

Name: Alex
Age: 22

The parameter ({ name, age }) extracts the name and age properties from the supplied object.

This pattern is especially useful when working with user information, API responses, and React component properties.

Arrow Functions with Array Methods

Arrow functions are frequently used with JavaScript array methods such as map(), filter(), and forEach().

Using map()

The map() method creates a new array by applying a function to each element.

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

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

console.log(doubled);

Output:

[2, 4, 6, 8]

Using filter()

The filter() method creates a new array containing elements that satisfy a condition.

const numbers = [10, 15, 20, 25, 30];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

Output:

[10, 20, 30]

These examples show how arrow functions make callback functions shorter and easier to read.

Important Rules for Arrow Function Syntax

Remember these rules when writing arrow functions:

Use () for zero parameters.
Parentheses are optional for one simple parameter.
Use parentheses for multiple parameters.
Use => between the parameters and the function body.
Use curly braces when the body contains multiple statements.
Use return explicitly when returning a value from a body with curly braces.
A concise body without curly braces automatically returns its expression.
Use parentheses around an object literal that you want to return implicitly.

For example, returning an object requires parentheses around the object literal:

const createUser = name => ({
    name: name,
    active: true
});

console.log(createUser("Alex"));

Output:

{ name: 'Alex', active: true }

Without the parentheses, the curly braces would be interpreted as a function body rather than an object literal to return.

Arrow Functions vs Traditional Functions

Feature	Arrow Functions	Traditional Functions
Syntax	Uses `=>`	Uses the `function` keyword
Concise body	Supported	Not supported in the same way
Single parameter	Parentheses may be omitted	Parentheses are required
Own `this` binding	No	Yes, depending on how the function is called
Can be used as constructors with `new`	No	Yes, for suitable constructible functions
Common uses	Callbacks and concise expressions	Methods, constructors, and functions requiring their own `this`

Arrow functions are useful for many tasks, but they are not a complete replacement for traditional functions. For example, object methods that need their own this binding are often written using method syntax.

Frequently Asked Questions

What is an arrow function in JavaScript?

An arrow function is a function expression that uses the => syntax to define a function more concisely.

How do you write an arrow function with one parameter?

You can omit the parentheses around one simple parameter.

const double = number => number * 2;

console.log(double(5));

Output: 10

Do arrow functions require a return statement?

No. A concise body automatically returns its expression. If you use curly braces for the function body, you must use return explicitly when you want to return a value.

Can arrow functions have default parameters?

Yes. You can assign default values to parameters, such as (name = "Guest").

Can arrow functions accept multiple parameters?

Yes. Multiple parameters must be enclosed in parentheses, such as (a, b) => a + b.

Can arrow functions use rest parameters?

Yes. Rest parameters collect multiple arguments into an array, such as (...numbers) => numbers.length.

Are arrow functions supported in modern browsers?

Yes. Arrow functions are supported in modern browsers and current JavaScript runtimes.

What to Learn Next

Continue learning JavaScript ES6 features with these topics: