Modern JavaScript: Arrow Function Basics

• JavaScript has always supported function definitions with and without names.

• >

  function f() {
    return 1;
  }
  f();

  Result:

  1

• >

  const f = function() {
    return 2;
  };
  f();

  Result:

  2

• >

  (function() {
    return 3;
  })();

  Result:

  3

• We can also use the function syntax to define callbacks: functions that we pass to other functions. But in that context, the function syntax feels a bit awkward.

• >

  [1, 2, 3].map(function (x) { return x * 2; });

  Result:

  Run Code

• Modern JavaScript supports a cleaner syntax for function definitions called "arrow functions" (because the operator looks like an arrow). Here's an arrow function that takes an argument x, then returns x * 2. It does the same thing as the example above.

• >

  [1, 2, 3].map((x) => x * 2);

  Result:

  [2, 4, 6]

• There are three things to note here. First, because this is a one-line arrow function, we can omit the curly braces around the function body.

• Second, we can also omit the return keyword. (Both of these only work with one-line arrow functions, as we'll see shortly.)

• Third, when an arrow function takes exactly one argument, like above, we can shorten the syntax even further by dropping the parentheses: x => x * 2. However, if the function takes more than one argument, or no arguments at all, we have to include the parentheses.

• >

  [1, 2, 3].map(x => x * 2);

  Result:

  [2, 4, 6]

• >

  [1, 2, 3].map(() => 5);

  Result:

  [5, 5, 5]

• (In this next example, the index argument gets the index of each array element: 0, then 1, then 2.)

• >

  ['a', 'b', 'c'].map((x, index) => index);

  Result:

  [0, 1, 2]

• Arrow functions support rest parameters and destructuring, just like normal functions do. Using those features requires parentheses around the argument list, even if there's only one argument.

• >

  const user = {name: 'Amir'};
  const getName = ({name}) => name;
  getName(user);

  Result:

  'Amir'

• >

  const rest = (first, ...rest) => rest;
  rest(1, 2, 3, 4);

  Result:

  [2, 3, 4]

• So far, we've only seen single-line arrow functions.

• >

  const double = x => x * 2;
  double(3);

  Result:

  6

• We can also write multi-line arrow functions by wrapping the function body in {curly braces}. This longer function does the same thing as the short version above.

• >

  const double = x => {
    const result = x * 2;
    return result;
  };
  double(3);

  Result:

  6

• One-line arrow functions implicitly return the value of that one line; there's no return statement. With multi-line arrow functions, we have to explicitly return a value.

• >

  const howMany = x => {
    if (x > 10) {
      return 'many';
    } else {
      return 'few';
    }
  };
  howMany(3);

  Result:

  'few'

• If we forget the return in a multi-line arrow function, it will return undefined by default, just like regular functions do.

• >

  const howMany = x => {
    if (x > 10) {
      'many';
    } else {
      'few';
    }
  };
  howMany(3);

  Result:

  undefined

• There's a problem related to these multi-line arrow functions. When an arrow function needs to return an object, you may be tempted to write it like the example below, but it won't work.

• >

  const getUser = () => {
    name: 'Amir',
    age: 36,
  }

  Result:

  Run Code

• We meant to return an object, but the { in that example begins a multi-line function body, not an object. The solution is to wrap the object in (parentheses). That's awkward, but it's the only way to clearly distinguish between multi-line functions and objects.

• >

  const getUser = () => ({
    name: 'Amir',
    age: 36,
  });
  getUser().name;

  Result:

  'Amir'

• We can also return the object explicitly within the function body.

• >

  const getUser = () => {
    return {
      name: 'Amir',
      age: 36,
    };
  };
  getUser().name;

  Result:

  'Amir'

• Those are the basics of arrow functions! A future lesson will cover some details on how they handle scoping.