Arrow functions (1 parameter) - JavaScript

Length: 10 minutes

Summary

// 1 argument
(a) => {
  return a + 1;
}

// No curly braces
(a) => a + 1;

// No parentheses
a => a + 1;

Details

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

(a) =>

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

(a) => {

}

Put the statements you want inside the function.

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

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

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

Simplifying the arrow function

(a) => {
  return a + 1;
}

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) => a + 1;

If the arrow function has one argument, you can simplify things even further and get rid of the parentheses around the parameter.

// No parentheses
a => a + 1;

Demo

Exercises

Try the following statements in the console:

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

myFunction('hello')

References

Arrow function expressions on MDN

Arrow functions (1 parameter) – JavaScript