DEV Community

Azaan Suhail
Azaan Suhail

Posted on

Day 4 of Complete JavaScript in 17 days | Visual SeriesπŸ“šβœ¨

Day 4 of My JavaScript Visual Series πŸ“šβœ¨

πŸ’‘ JavaScript Truthy & Falsy Values – Made Simple
While writing JS code, we often see expressions like:

const firstName = "";
const nickName = "Azzu";
console.log(firstName || nickName); // Output: Azzu
Enter fullscreen mode Exit fullscreen mode

βœ… If firstName is falsy (like ""), JS smartly picks the next truthy value.
πŸ“Œ Falsy values β†’ 0, "", null, undefined, NaN, false
πŸ“Œ Truthy values β†’ anything meaningful like "Azaan", [], {}, "0"

  • Some real-life examples:
let fname = "";
let mname = undefined;
let lname = null;
console.log(fname || mname || lname); // Output: null
--------------------------------------------------
let a = 12;
let b;
console.log(a + b); // Output: NaN
--------------------------------------------------
let c = 12;
let d;
console.log(c + (d || 0)); // Output: 12
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ || returns the first truthy value and
πŸ‘‰ returns the first falsy value

let f_name_1 = "Azaan";
let f_name_2 = "";
let ans = f_name_1 && f_name_2;
console.log(`Name-${ans}`); // Output: Name-
--------------------------------------------------
let f_name_3 = "Azaan";
let f_name_4 = null;
let ans2 = f_name_3 && f_name_4;
console.log(`Name-${ans2}`); // Output: Name-null
Enter fullscreen mode Exit fullscreen mode

πŸ› οΈ Real-world use in backend (Node.js):

const PORT = process.env.PORT || 5000;
Means β†’ Use the environment port if it exists, else use 5000.

🧠 Quick Quiz :

console.log(3 || 2 || 1); // ?
console.log("" || 0 || 2); // ?
console.log(null || 2 || 3); // ?
console.log("" || 0 || undefined); // ?
console.log("undefined" || "null" || 2); // ?
console.log(3 && 2 && 1); // ?
console.log("" && 0 && 2); // ?
console.log(undefined && "null" && 2); // ?
Enter fullscreen mode Exit fullscreen mode

Top comments (0)