Arrow function without curly braces

by

The parenthesis are returning a single value, the curly braces are executing multiple lines of code.

Your example looks confusing because it’s using JSX which looks like multiple “lines” but really just gets compiled to a single “element.”

Here are some more examples that all do the same thing:

const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (who) => {
  return "hello " + who + "!";
};

You will also often see parenthesis around object literals because that’s a way to avoid the parser treating it as a code block:

const x = () => {} // Does nothing
const y = () => ({}) // returns an object

More Related Contents:

  1. What do multiple arrow functions mean in JavaScript?
  2. Why shouldn’t JSX props use arrow functions or bind?
  3. Can I use arrow function in constructor of a react component?
  4. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  5. setState doesn’t update the state immediately
  6. What does “this” refer to in arrow functions in ES6?
  7. Unable to access React instance (this) inside event handler [duplicate]
  8. Why doesn’t my arrow function return a value?
  9. Adding script tag to React/JSX
  10. How to avoid bind or inline arrow functions inside render method
  11. When to use ES6 class based React components vs. functional ES6 React components?
  12. Why and when do we need to bind functions and eventHandlers in React?
  13. How do I write a named arrow function in ES2015?
  14. What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
  15. Arrow Functions and This [duplicate]
  16. Using _ (underscore) variable with arrow functions in ES6/Typescript
  17. What does three dots do in ReactJS [duplicate]
  18. How to add multiple classes to a ReactJS Component?
  19. React useState hook event handler using initial state
  20. JavaScript ES6: Test for arrow function, built-in function, regular function?
  21. When should I use brackets with imports
  22. ESCMAScript 6 arrow functions – parentheses around parameter
  23. Unable to use Arrow functions inside React component class [duplicate]
  24. Best way to polyfill ES6 features in React app that uses create-react-app
  25. this.setState is not a function [duplicate]
  26. Error: How to serialize data from getStaticProps : Next.js
  27. Update one of the objects in array, in an immutable way
  28. How to namespace es6 classes (for React components)
  29. Why is `throw` invalid in an ES6 arrow function?
  30. $(‘elems’).each() with fat arrow

Leave a Comment