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)