Why doesn’t my arrow function return a value?

by

When you use the function body version of an arrow function (with {}), there is no implied return. You have to specify it. When you use the concise body (no {}), the result of the body expression is implicitly returned by the function.

So you would write that either with an explicit return:

const f = arg => { return arg.toUpperCase(); };
// Explicit return ^^^^^^

or with a concise body:

const f = arg => arg.toUpperCase();

Examples:

const f1 = arg => { return arg.toUpperCase(); };
console.log(f1("testing"));

const f2 = arg => arg.toUpperCase();
console.log(f2("testing"));

Slightly tangential, but speaking of {}: If you want the concise arrow’s body expression to be an object initializer, put it in ():

const f = arg => ({prop: arg.toUpperCase()});

More Related Contents:

  1. Are ‘Arrow Functions’ and ‘Functions’ equivalent / interchangeable?
  2. What’s the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?
  3. When should I use a return statement in ES6 arrow functions
  4. ECMAScript 6 arrow function that returns an object
  5. What does “this” refer to in arrow functions in ES6?
  6. When should I use arrow functions in ECMAScript 6?
  7. What do multiple arrow functions mean in JavaScript?
  8. Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)
  9. Arrow function without curly braces
  10. Curly Brackets in Arrow Functions
  11. Why shouldn’t JSX props use arrow functions or bind?
  12. How do I write a named arrow function in ES2015?
  13. What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
  14. Official information on `arguments` in ES6 Arrow functions?
  15. Arrow Functions and This [duplicate]
  16. Using _ (underscore) variable with arrow functions in ES6/Typescript
  17. ES6 arrow functions not working on the prototype?
  18. Arrow Function in Object Literal [duplicate]
  19. What does arrow function ‘() => {}’ mean in Javascript? [duplicate]
  20. JavaScript ES6: Test for arrow function, built-in function, regular function?
  21. Can I use arrow function in constructor of a react component?
  22. Can I use ES6’s arrow function syntax with generators? (arrow notation)
  23. Immediate function using JavaScript ES6 arrow functions
  24. ESCMAScript 6 arrow functions – parentheses around parameter
  25. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  26. Why can I not use `new` with an arrow function in JavaScript/ES6?
  27. How can I differentiate between an arrow function, class and a normal function?
  28. Why is `throw` invalid in an ES6 arrow function?
  29. Is it possible to export Arrow functions in ES6/7?
  30. $(‘elems’).each() with fat arrow

Leave a Comment