ES6箭头函数两种写法是否存在差异？const name = () => {}与const name = () => ()的区别探讨

Hey there! Great question—this is a super common point of confusion when first getting comfortable with arrow functions in ES6, especially when working with React. Let me break down the differences clearly for you:

1. Curly Brace Syntax: const name = () => {} #

This defines an explicit function body, just like regular function declarations. Here’s what you need to know:

• You can include multiple lines of code inside the braces (variable declarations, conditionals, console logs, etc.).
• If you want the function to return a value, you must explicitly write the return keyword.
• This is ideal when you need to run multiple operations, like handling React event handlers with side effects:

  const handleSubmit = () => {
    console.log("Form submitted");
    setIsLoading(true);
    submitFormData();
  };
  

• If you omit the return statement, the function will default to returning undefined.

2. Parentheses Syntax: const name = () => () #

This is shorthand for implicit return—the expression inside the parentheses is automatically returned without needing a return keyword. Here’s the breakdown:

• It’s used when you only need to return a single value or expression (like a React component, an object, or a calculation).
• A critical note: If you’re returning an object literal, you must wrap it in parentheses. Otherwise, JavaScript will interpret the curly braces as a function body instead of an object:

  // Correct: Returns an object
  const getUser = () => ({ name: "Harjit", age: 28 });
  
  // Incorrect: This would be an empty function body returning undefined
  const getUser = () => { name: "Harjit", age: 28 };
  

• For simple JSX components, this syntax keeps your code concise:

  const TodoItem = ({ task }) => (<li className="todo">{task}</li>);
  

• For even simpler expressions, you can omit the parentheses entirely (e.g., const double = num => num * 2;), but parentheses help with readability for more complex returns like JSX.

Let’s test both styles to see their output:

// Curly braces without return → undefined
const noReturnFunc = () => {};
console.log(noReturnFunc()); // Logs: undefined

// Parentheses with implicit return → the value inside
const implicitReturnFunc = () => ("Hello!");
console.log(implicitReturnFunc()); // Logs: "Hello!"

In short: Use curly braces when you need multiple lines of logic or explicit control over the return, and use parentheses (or omit them for simple expressions) when you want to concisely return a single value—this is especially handy in React for writing compact components or state updater functions!

内容的提问来源于stack exchange，提问作者harjit.kainth7