Operators, Expressions & Truthy/Falsy

প্রতিটি অপারেটর এবং truthy/falsy পদ্ধতি

~30 min Beginner 10 practice problems Live runner

1. Arithmetic Operators

arith.js

console.log(7 + 3);     // 10
console.log(7 - 3);     // 4
console.log(7 * 3);     // 21
console.log(7 / 3);     // 2.3333... (always float)
console.log(7 % 3);     // 1   (remainder)
console.log(2 ** 10);   // 1024 (exponent)
console.log(-5);         // unary -
let n = 5;
console.log(n++, n);   // 5 6 (post-increment)
console.log(++n, n);   // 7 7 (pre-increment)

JavaScript-এ / সবসময় float ফলাফল দেয় — 7 / 3 মানে 2.33..., না 2। Integer division করতে চাইলে Math.floor(7 / 3) ব্যবহার করুন। % হলো remainder operator।

2. The String Concatenation Trap

The + operator does two things: number addition and string concatenation. If either side is a string, JS concatenates.

concat.js

console.log(1 + 2 + "3");    // "33"  (1+2=3, then "3"+"3"="33")
console.log("3" + 2 + 1);    // "321" (left-to-right, all become strings)
console.log("sum: " + (2 + 3));// "sum: 5" (parentheses fix order)

3. Comparison Operators

Operator	Meaning	Coerces?
`<` `>` `<=` `>=`	Less / greater / etc	Yes (numeric)
`==` `!=`	Loose equality	Yes — avoid
`===` `!==`	Strict equality	No — use this

Strings compare lexicographically "10" < "9" is true because string comparison goes char-by-char ("1" < "9"). Always cast to number first when comparing numeric strings.

compare.js

console.log("10" < "9");          // true   (string compare!)
console.log(Number("10") < Number("9")); // false
console.log("abc" < "abd");        // true   (alphabetical)

4. Logical Operators & Short-Circuit

JS logical operators don't return true/false — they return one of the operands. This is the secret behind elegant default-value patterns.

logic.js

console.log(true && "yes");   // "yes"   (returns 2nd if 1st truthy)
console.log(false && "yes");  // false   (returns 1st if falsy)
console.log(0 || "hi");        // "hi"    (returns 2nd if 1st falsy)
console.log("a" || "b");       // "a"     (returns 1st if truthy)
console.log(!0);               // true    (! always returns boolean)
console.log(!!"hello");         // true    (double-bang to coerce)

// Default value pattern
const name = "" || "Anonymous";
console.log(name);             // "Anonymous"

5. Nullish Coalescing `??` & Optional Chaining `?.`

Two of the best ES2020 additions. They prevent the most annoying class of beginner bugs.

nullish.js

// ??  → only null/undefined trigger the fallback
console.log(0 ?? "fallback");   // 0  (0 is NOT null)
console.log("" ?? "fallback");  // ""
console.log(null ?? "fallback"); // "fallback"
console.log(undefined ?? 99);  // 99

// || → ALL falsy values trigger the fallback
console.log(0 || "fallback");   // "fallback"  ← bug if 0 is valid!
console.log("" || "fallback");  // "fallback"  ← bug if "" is valid!

// ?. → safely access nested fields that might not exist
const user = { profile: null };
console.log(user.profile?.email);     // undefined  (no crash)
console.log(user.profile?.email ?? "-"); // "-"

?? এবং || ভিন্ন। ?? শুধু null/undefined-এ fallback দেয়; || সব falsy value-এ (0, "", false) fallback দেয়। তাই সংখ্যা/string-এর জন্য ?? বেশি নিরাপদ।

6. The Truthy/Falsy Table

JavaScript has exactly 6 falsy values. Everything else — including empty arrays, empty objects, and the string "false" — is truthy.

Value	Boolean(value)	Note
`false`	false	The literal
`0`, `-0`, `0n`	false	Zero in any flavour
`""`	false	Empty string
`null`	false	Intentional empty
`undefined`	false	Default empty
`NaN`	false	Not-a-number
`[]`	true	Empty array is TRUTHY!
`{}`	true	Empty object is TRUTHY!
`"0"`, `"false"`	true	Non-empty strings are TRUTHY!

7. Assignment & Compound Operators

assign.js

let x = 10;
x += 5;   console.log(x); // 15
x -= 3;   console.log(x); // 12
x *= 2;   console.log(x); // 24
x /= 4;   console.log(x); // 6
x **= 2;  console.log(x); // 36

// ES2021 logical assignments
let a = null;
a ??= "default";            console.log(a); // "default"
let b = 0;
b ||= 99;                   console.log(b); // 99
let c = 1;
c &&= 2;                   console.log(c); // 2

8. Bitwise — The Tiny Side Note

Rare in normal app code but show up in flags, hashing, and graphics. & AND, | OR, ^ XOR, ~ NOT, << shift left, >> shift right.

bitwise.js

console.log(5 & 3);   // 1   (101 & 011 = 001)
console.log(5 | 3);   // 7   (101 | 011 = 111)
console.log(5 ^ 3);   // 6   (101 ^ 011 = 110)
console.log(1 << 3);  // 8   (1 shifted left 3 bits)
console.log(~5);      // -6

9. Glossary (শব্দকোষ)

Term	Meaning	বাংলায়
Operator	A symbol or keyword that produces a value from operands.	চিহ্ন বা keyword যা operand থেকে value তৈরি করে।
Operand	The values an operator works on.	Operator যাদের উপর কাজ করে।
Truthy	Any value that becomes `true` in a boolean context.	Boolean context-এ যা `true` হয়।
Falsy	The 6 values that become `false`: `false, 0, "", null, undefined, NaN`.	৬টি falsy value: `false, 0, "", null, undefined, NaN`।
Short-circuit	Logical operator stops evaluating once the result is decided.	ফলাফল নিশ্চিত হলে logical operator আর evaluate করে না।
`??`	Nullish coalescing — fallback only on `null`/`undefined`.	শুধু `null/undefined`-এ fallback দেয়।
`?.`	Optional chaining — safely access nested properties.	Nested property নিরাপদে access করার syntax।
Bitwise	Operators (`& \| ^ ~ << >>`) acting on 32-bit binary representation.	৩২-bit binary level-এ কাজ করা operator।

সংক্ষেপে: Arithmetic-এ +-এর string trap থেকে সাবধান। তুলনায় সবসময় ===; স্ট্রিং numerically compare করতে cast করুন। Default value-তে ?? (zero/empty বৈধ হলে) এবং || (যেকোনো falsy বাদ দিতে চাইলে) — পার্থক্য মনে রাখুন। ৬টি falsy ছাড়া বাকি সব truthy — [] ও {} truthy!

10. Practice Problems

Predict and run: 1 + 2 + "3" vs "1" + 2 + 3.

✨ Show Answer

a1.js

console.log(1 + 2 + "3");  // "33"
console.log("1" + 2 + 3);  // "123"

Compute the remainder when 2026 is divided by 7 (the day-of-week shift).
✨ Show Answer
a2.js
```
console.log(2026 % 7);   // 4
```

Show the difference between x ?? "default" and x || "default" when x = 0.

✨ Show Answer

a3.js

const x = 0;
console.log(x ?? "default");   // 0
console.log(x || "default");   // "default"

Use optional chaining to read user.address.city safely when address may be missing.

✨ Show Answer

a4.js

const user1 = { name: "Arif", address: { city: "Dhaka" } };
const user2 = { name: "Karim" };
console.log(user1.address?.city ?? "Unknown"); // "Dhaka"
console.log(user2.address?.city ?? "Unknown"); // "Unknown"

Verify all 6 falsy values with one loop.

✨ Show Answer

a5.js

const falsies = [false, 0, "", null, undefined, NaN];
falsies.forEach(v =>
    console.log(JSON.stringify(v), "→", Boolean(v))
);

Show that an empty array [] is truthy but its length is 0.

✨ Show Answer

a6.js

const arr = [];
console.log(Boolean(arr));    // true
console.log(arr.length === 0); // true
console.log(arr.length || "empty"); // "empty"

Use a single expression with && to call console.log("ok") only when x is truthy.

✨ Show Answer

a7.js

const x = 42;
x && console.log("ok");  // short-circuit guard

const y = 0;
y && console.log("never"); // nothing

Compute 2 raised to the 16th power using two different operators.

✨ Show Answer

a8.js

console.log(2 ** 16);            // 65536
console.log(Math.pow(2, 16));      // 65536
console.log(1 << 16);            // 65536 (bit shift)

Implement isEven(n) in three different one-liners.

✨ Show Answer

a9.js

const v1 = n => n % 2 === 0;
const v2 = n => (n & 1) === 0;
const v3 = n => !(n % 2);

[2, 3, 4].forEach(n =>
    console.log(n, v1(n), v2(n), v3(n))
);

Why is "100" < "9" true? How would you compare them numerically?

✨ Show Answer

Answer: Both operands are strings, so JS does lexicographic (dictionary) comparison char-by-char. The first char "1" sorts before "9", so the whole comparison is true. To compare numerically, cast both: Number("100") < Number("9") is false.

দুটিই string হওয়ায় JS dictionary order-এ তুলনা করে — অক্ষর-ধরে। প্রথম অক্ষর "1" "9"-এর আগে আসে। সংখ্যা হিসেবে compare করতে Number() দিয়ে cast করুন।

Summary — Module 05

Master arithmetic (with the + string trap), comparison (always ===), and logical operators (which return operands, not booleans). The two best ES2020 additions, ?? and ?., eliminate entire bug classes. Memorise the 6 falsy values: false, 0, "", null, undefined, NaN.

Arithmetic, comparison, logical — তিন ধরনের অপারেটর। + এর string trap থেকে সাবধান। সবসময় ===। ?? এবং ?. আধুনিক JS-এর দুটি সেরা feature। ৬টি falsy মনে রাখুন।

Next Module → Variables: var, let, const & Scope — JS-এর সবচেয়ে গুরুত্বপূর্ণ নিয়ম।

L04: Types Next: Variables & Scope

1. Arithmetic Operators

2. The String Concatenation Trap

3. Comparison Operators

4. Logical Operators & Short-Circuit

5. Nullish Coalescing ?? & Optional Chaining ?.

6. The Truthy/Falsy Table

7. Assignment & Compound Operators

8. Bitwise — The Tiny Side Note

9. Glossary (শব্দকোষ)

10. Practice Problems

Summary — Module 05

5. Nullish Coalescing `??` & Optional Chaining `?.`