How to Use Arrow Function in JavaScript: Syntax and Examples

In JavaScript, use arrow functions to write shorter function expressions with the syntax (parameters) => expression. They automatically bind this from the surrounding code and are great for simple functions.

Syntax

An arrow function uses the syntax (parameters) => expression. If there is only one parameter, parentheses can be omitted. For multiple statements, use curly braces {} and an explicit return if needed.

• parameters: input values for the function
• =>: arrow symbol separating parameters and function body
• expression: the value returned by the function

javascript

const add = (a, b) => a + b;
const square = x => x * x;
const greet = () => {
  console.log('Hello!');
};

Example

This example shows how to use arrow functions for simple math operations and a greeting. It demonstrates concise syntax and how to call these functions.

javascript

const add = (a, b) => a + b;
const square = x => x * x;
const greet = () => {
  console.log('Hello!');
};

console.log(add(3, 4));
console.log(square(5));
greet();

Output

7
25
Hello!

Common Pitfalls

Arrow functions do not have their own this, so using this inside them refers to the surrounding context, which can cause unexpected behavior. Also, if you use curly braces {} without a return statement, the function returns undefined.

javascript

const obj = {
  value: 10,
  regularFunc: function() {
    console.log(this.value); // 10
  },
  arrowFunc: () => {
    console.log(this.value); // undefined, because 'this' is not obj
  }
};

obj.regularFunc();
obj.arrowFunc();

// Missing return example
const wrong = (a, b) => { a + b };
console.log(wrong(2, 3)); // undefined

// Correct way
const right = (a, b) => { return a + b; };
console.log(right(2, 3)); // 5

Output

10
undefined
undefined
5

Quick Reference

Remember these quick tips when using arrow functions:

• Use parentheses around parameters only if you have zero or multiple parameters.
• For single-expression functions, omit curly braces and return.
• Arrow functions do not have their own this or arguments.
• Use arrow functions for short, simple functions or callbacks.

Key Takeaways

Arrow functions provide a concise syntax for writing functions in JavaScript.

They do not have their own 'this', so be careful when using 'this' inside them.

Omit curly braces and 'return' for single-expression functions to write shorter code.

Use parentheses around parameters only when needed (zero or multiple parameters).

Arrow functions are ideal for simple functions and callbacks but not for methods needing their own 'this'.