Skip to main content

Why return in if and no else?

 

Common pattern without else

Many developers prefer an early return instead of else:

function login(user) {
if (!user) {
console.log("No user found");
return;
}

console.log("Welcome");
}

Here no else is needed because return exits the function.

Rule: If there is no else, JavaScript simply ignores the if block when the condition is false and continues executing the next line.

why return

return is used to immediately stop a function and optionally send a value back.

Example without return:

function greet() {
console.log("Hello");
console.log("Welcome");
}

greet();

Output:

Hello
Welcome

Both lines run.


Example with return:

function greet() {
console.log("Hello");
return;
console.log("Welcome");
}

greet();

Output:

Hello

After return, the function ends immediately. Anything below it is not executed.


That's why developers often avoid else:

function login(user) {
if (!user) {
console.log("No user found");
return;
}

console.log("Welcome");
}

If user is missing:

No user found

The function stops at return.

If user exists:

Welcome

return can also send a value back:

function add(a, b) {
return a + b;
}

let result = add(2, 3);
console.log(result);

Output:

5

Here return a + b means:

"End the function and give back the value 5."

So return has two jobs:

  1. Stop the function.
  2. Optionally return a value to the caller. 

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...