ES6 Стрелочные функции возвращают объект

Правильные способы

1. Обычная функция возвращает объект

const getUser = user => {
  // выполняем какие-то действия
  const { name, age } = user;
  return { name, age };
};

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
// {name: "xgqfrms", age: 21}

2. (JS-выражения)

const getUser = user => ({ name: user.name, age: user.age });

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
// {name: "xgqfrms", age: 21}

Объяснение

Если вы попытаетесь переписать это выражение функции в виде стрелочной функции, вы, возможно, захотите просто перевести его так же, как в предыдущем примере, вот так:

let square = n => {
  square: n * n;
};

Когда вы вызовете square, вы заметите, что функция не работает так, как ожидалось. Какой бы входной параметр вы ни передали, вы всегда получите undefined в качестве значения возврата. Почему это происходит?

Проблема со стрелочной функцией заключается в том, что парсер не интерпретирует фигурные скобки как литерал объекта, а рассматривает их как блочное выражение. Внутри этого блочного выражения парсер видит метку с именем square, которая принадлежит оператору выражения n * n. Поскольку нет никакого оператора return, возвращаемое значение всегда undefined.

Если быть более точным, тело функции состоит из блочного выражения, которое содержит один оператор — помеченный оператор. Его тело является оператором выражения, содержащим бинарное выражение. Поскольку отсутствует оператор return, возврат значения не происходит.

Ссылки

• GitHub
• Marius Schulz