Arrow functions (2+ parameters) - JavaScript

Length: 10 minutes

Summary

// 2+ arguments
(a, b) => {
  return a + b;
}

// No curly braces
(a, b) => a + b;

Details

To create an arrow function with 2 or more parameters, first write a pair of parentheses with your parameter names in it, followed by a space and an equals sign and greater than sign right next to each other.

(a, b) =>

After the arrow, add a space and a pair of curly braces separated by a new line.

(a, b) => {

}

Put the statements you want inside the function.

(a, b) => {
  console.log('hello');
  console.log('world');
  console.log(a);
  console.log(b);
}

Realistically, you would store the arrow function expression inside a variable or constant or use it as a callback function.

let myFunction = (a, b) => {
  console.log('hello');
  console.log('world');
  console.log(a);
  console.log(b);
}

button.addEventListener('click', () => {
  console.log('hello world');
});

Simplifying the arrow function

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

If the arrow function only contains a single return statement, you can actually get rid of the curly braces and return keyword and put everything on one line, like this:

// No curly braces
(a, b) => a + b;

Demo

Exercises

Try the following statements in the console:

let myFunction = (a, b) => {
  console.log(a);
  console.log(b);
}

myFunction('hello', 'world')

References

Arrow function expressions on MDN

Arrow functions (2+ parameters) – JavaScript