Skip to main content

Difference between ()=> {} and ()=>({})

 (()=>()) and (()=>{}) are different because:

  • ()=>() — parentheses mean an expression with an implicit return

  • ()=>{} — curly braces mean a function body, so you must use return yourself

Let’s break it down.


1️⃣ ()=>() — implicit return (expression)

Whatever is inside the parentheses is automatically returned.

const add = (a, b) => (a + b); console.log(add(2, 3)); // 5

No return keyword needed.

This is often used when returning simple values.


2️⃣ ()=>{} — block body (no implicit return)

Curly braces mean it's a normal function body.

So this:

const add = (a, b) => { a + b }; console.log(add(2, 3)); // undefined

returns undefined, because there is no return statement.

To return, you must write:

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

⚠️ Special case: returning an object

Because {} means “function body”, if you try:

const getUser = () => { name: "Ayush" };

This is treated as a block, not an object → returns undefined.

To return an object, you wrap it in parentheses:

const getUser = () => ({ name: "Ayush" });

📌 Summary

SyntaxMeaningReturn behavior
()=>()expressionimplicit return
()=>{}function blockmust use return
()=>({})object in parenthesesimplicit return object

If you want, I can give exercises or more examples — just tell me 👍

const getUser = () => { return name: "Ayush" }; console.log(getUser())

Good — this is a great place where many learners get stuck 🙂

Your code:

const getUser = () => { return name: "Ayush" }; console.log(getUser())

❌ Why it’s wrong

Two problems:

1️⃣ After return, you cannot use key: value directly.
JavaScript thinks you’re writing a label, not an object.

2️⃣ When returning an object from an arrow function body, the syntax should be:

return { name: "Ayush" }

✅ Correct version

const getUser = () => { return { name: "Ayush" }; }; console.log(getUser());

Output:

{ name: 'Ayush' }

👍 Shorter version (implicit return)

Because it’s just one expression, we can skip return and braces:

const getUser = () => ({ name: "Ayush" }); console.log(getUser());

Notice the parentheses around the object — they tell JavaScript:

“this is an object, not a function block”.

Comments

Popular posts from this blog

Tailwind css and its corresponding vanilla css

Tailwind Class CSS Property Vanilla CSS Equivalent Description bg-white background-color background-color: #ffffff; Sets background color to white. shadow-sm box-shadow box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); Adds a small shadow under the element. border-b border-bottom-width border-bottom-width: 1px; Adds a bottom border. Default color: #e5e7eb (gray-200). max-w-7xl max-width max-width: 80rem; /* 1280px */ Restricts container width for large screens. mx-auto margin-left , margin-right margin-left: auto; margin-right: auto; Centers the container horizontally. px-4 padding-left , padding-right padding-left: 1rem; padding-right: 1rem; Adds horizontal padding (16px). sm:px-6 Responsive padding (small screens ≥640px) @media (min-width: 640px) { padding-left: 1.5rem; padding-right: 1.5rem; } Increases padding on small screens. lg:px-8 Responsive padding (large screens ≥1024px) @media (min-width: 1024px) { padding-left: 2rem; paddi...

Rest and spread operator in javascript

  Absolutely 👍 — here are several practical and clear examples of the rest operator ( ... ) in JavaScript, covering functions, arrays, and objects 👇 🧮 1. Rest in Function Parameters When you don’t know how many arguments a function will receive: function multiply ( factor, ...numbers ) { return numbers. map ( n => n * factor); } console . log ( multiply ( 2 , 1 , 2 , 3 , 4 )); // Output: [2, 4, 6, 8] 👉 factor gets the first argument ( 2 ), and ...numbers collects the rest into an array [1, 2, 3, 4] . 🧑‍🤝‍🧑 2. Rest with Array Destructuring You can collect remaining array elements into a variable: const fruits = [ "apple" , "banana" , "mango" , "orange" ]; const [first, second, ...others] = fruits; console . log (first); // "apple" console . log (second); // "banana" console . log (others); // ["mango", "orange"] 👉 The rest operator gathers all remaining elements afte...

Role of box-sizing and its attributes in css

  🧱 Default behavior (content-box) By default, browsers use: box-sizing : content-box; This means: Total element width = content width + padding + border So if you have: .container { width : 300px ; padding : 20px ; border : 5px solid black; } Then the total visible width becomes: 300 (content) + 40 ( left + right padding) + 10 ( left + right border) = 350 px ⚠️ The box becomes wider than 300px , which can cause overflow or layout shifts. ✅ With box-sizing: border-box When you use: box-sizing : border-box; the formula changes to: Total element width = width (including padding + border) So the same CSS now behaves like this: width = 300 px (total) → content area = 300 - ( 40 padding + 10 border) = 250 px ✅ The box stays exactly 300px wide — no overflow. 🎯 Why it’s useful Prevents unexpected overflow due to padding/borders Makes responsive layouts easier Keeps your box sizes consistent You can trust width to be the actu...