Difference between ( )=>{ } and ( )=>( ) arrow function in JavaScript (JS)

The difference between ()=>{} and ()=>() lies in how they handle function bodies and return statements in JavaScript. Both are arrow functions, but they behave slightly differently depending on the syntax used.

---

1. ()=>{} (With Curly Braces)

• Syntax: When you use curly braces {} after the arrow (=>), it defines a function body.
• If you want to return a value, you must use the return keyword explicitly.
• Without return, the function does not return anything (i.e., it implicitly returns undefined).

Example:

const add = (a, b) => {
  return a + b; // Explicit return
};

console.log(add(2, 3)); // Output: 5

Key Points:

• Curly braces indicate a full function body.
• The return keyword must be explicitly used to return a value.

---

2. ()=>() (With Parentheses)

• Syntax: When you use parentheses () after the arrow (=>), it defines an implicit return.
• This is shorthand for returning a single expression directly.
• There’s no need for the return keyword, and no curly braces are used.

Example:

const add = (a, b) => a + b; // Implicit return

console.log(add(2, 3)); // Output: 5

Key Points:

• Parentheses indicate an implicit return of the single expression inside.
• No need to use the return keyword.

---

When to Use Which?

Use ()=>{} When:

1. The function has multiple statements or complex logic.
2. You need to explicitly control what gets returned.

Example:

const processNumbers = (a, b) => {
  const sum = a + b;
  const product = a * b;
  return sum + product; // Explicitly return the result
};

console.log(processNumbers(2, 3)); // Output: 11

---

Use ()=>() When:

1. The function is a single-line expression that needs to return a value.
2. You want to keep the syntax concise.

Example:

const square = (x) => x * x; // Implicit return

console.log(square(4)); // Output: 16

---

Tricky Cases

Returning an Object Literal

If you want to return an object literal using an implicit return, you need to wrap it in parentheses. Otherwise, JavaScript interprets the {} as a function body.

Example:

const getObject = () => ({ key: 'value' }); // Correct: Wrap in parentheses
console.log(getObject()); // Output: { key: 'value' }

const getObjectError = () => { key: 'value' }; // Incorrect: Interpreted as function body
console.log(getObjectError()); // Output: undefined

---

Summary Table

Syntax	Behavior	Example
()=>{}	Full function body, explicit return	const add = (a, b) => { return a + b; };
()=>()	Single-line implicit return	const add = (a, b) => a + b;

Choose between the two based on your use case: clarity for complex functions (()=>{}) vs. concise syntax for simple functions (()=>()).

Comments

[Ravin Rau]

This is a good explanation of the differences between ()=>{} and ()=>() in arrow functions! The clear examples and key points make it easy to understand when to use each syntax. I particularly appreciate for including tricky cases, like returning object literals, which can be confusing for beginners.

When working on a team, how do you strike a balance between using concise implicit returns for readability and opting for explicit returns to ensure clarity for more complex logic? It’s always interesting to hear how developers manage this trade-off in real-world projects!

[Muhammad Atif Iqbal]

Thanks for the kind words! I’m glad you found the explanation helpful, especially with tricky cases like returning object literals. Balancing concise implicit returns with explicit returns is definitely a challenge, and I’ll be diving deeper into this topic in a blog post very soon. I’ll cover how to decide when to use each approach based on function complexity and team conventions to ensure clarity and maintain readability. Stay tuned for that!

[George WL]

*arrow