DEV Community: Azaan Suhail

Day 6 of Complete JavaScript in 17 days | Visual Series📚✨

Azaan Suhail — Tue, 23 Sep 2025 16:01:02 +0000

Day 6 of My JavaScript Visual Series 📚✨

💡 Arrow Function vs Normal Function in JavaScript – Why It Actually Matters in Interviews.

As a beginner, I used to think both functions are the same. But here's what interviewers love to ask the difference in how "this" behaves in both!
🔹 Normal Function:
this refers to the object calling the function.

🔹 Arrow Function:
this refers to the parent scope (lexical scope). It does not bind its own this.
So if you're using this inside a method, be very cautious using arrow functions!

const obj = {
 name: "Azaan",
 sayHi: function () {
 console.log("Hi", this.name); // Works ✅
 },
 greet: () => {
 console.log("Hello", this.name); // Undefined ❌
 }
};

Fun Fact : Arrow function is also called fat arrow function.

Use Case:

A couple of days ago, I was debugging a login feature in my app. Everything seemed perfect... except it kept saying "Invalid Password" even for correct ones.
The issue? I used an arrow function inside my comparePassword method. 🤦‍♂️
It couldn't access this.password from the Mongoose model correctly.

// ❌ Wrong: 'this' doesn't refer to the document
userSchema.methods.comparePassword = (inputPassword) => {
 return bcrypt.compare(inputPassword, this.password);
};

// ✅ Correct: 'this' refers to the Mongoose document
userSchema.methods.comparePassword = function (inputPassword) {
 return bcrypt.compare(inputPassword, this.password);
};

Day 5 of Complete JavaScript in 17 days | Visual Series📚✨

Azaan Suhail — Mon, 22 Sep 2025 16:08:26 +0000

Day 5 of My JavaScript Visual Series 📚✨

💡 Hoisting in JavaScript – JavaScript ka jugaadu nature 😄

Real life example : -

Imagine you’re in class and the teacher asks a question…
You didn’t study, but your bestie already gave your name to answer — JavaScript does the same thing 😅

It remembers your function or variable declarations even before they are actually written — that’s Hoisting.

🔁 Real-Life in Code:

🔹 Function Hoisting

You can call the function before declaring it.

greet(); 
function greet() {
 console.log("Good to see you!");
}

🔹 Anonymous Function / Arrow Function?

No shortcut! These won’t work if you call them before defining.

sayHi(); // ❌ Error
var sayHi = function() {
 console.log("Hey there!");
};

🔹 var?

Hoisted, but value is undefined

console.log(x); // undefined
var x = 10;

🔹 let & const? [Interview Question]

JavaScript: “I know it exists… but you can't touch it yet 😶”

They live in a Temporal Dead Zone (TDZ).

console.log(y); // ❌ ReferenceError
let y = 5;

🎯 Summary:

)> Except Arrow functions all normal function show the hoisting nature.
)> Var is hoisted , let & const are also hoisted only in the temporal deadzone.

Day 4 of Complete JavaScript in 17 days | Visual Series📚✨

Azaan Suhail — Fri, 19 Sep 2025 16:45:30 +0000

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

✅ 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

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

🛠️ 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); // ?

Day 3 of Complete JavaScript in 17 days | Visual Series📚✨

Azaan Suhail — Thu, 18 Sep 2025 14:46:14 +0000

Day 3 of My JavaScript Visual Series 📚✨

All JavaScript Operators - cracked in one Go

Operators in JS aren't just +, -, or .
Today I explored all of them — and the logic behind each one 🔍
✅ Categories I covered:
🔹 Arithmetic: +, -, *, /, %, *
🔹 Assignment: =, +=, -=, etc.
🔹 Comparison: ==, ===, !=, !==, >, <, >=, <=
🔹 Logical: &&, ||, !
🔹 Ternary: condition ? true : false
🔹 Bitwise: &, |, ^, ~, <<, >>, >>>
🔹 Nullish Coalescing: ??

🔹 String + Operators

→ null == undefined ✅
→ null === undefined ❌
→ null >= 0 ✅ but null > 0 ❌
→ undefined becomes NaN when compared with numbers 😮

💥 Mind-blowing interview edge:

null is loosely equal to undefined

Read this GFG article : https://lnkd.in/gdq_gPZf

Day 2 of Complete JavaScript in 17 days | Visual Series📚✨

Azaan Suhail — Wed, 17 Sep 2025 17:10:34 +0000

Day 2 of My JavaScript Visual Series 📚✨
Primitive vs Non-Primitive Data Types.
Let’s break it down like we’re explaining to a friend 👇
Ever got confused hearing “primitive” or “non-primitive” data types in JS?
I did too 😅

So here’s a short and super simple breakdown that finally made sense to me:
🧠 Primitive = Single Value (stored in stack, call by value)
Use my quick trick to remember: NN SS BB U
N - null
N - number
S - string
S - symbol
B - boolean
B - bigint
U - undefined

📦 Non-Primitive = Multiple values (stored in heap, call by reference)
These are your:

→ objects, arrays, and functions.

🧩 INTERVIEW STUFF YOU SHOULD KNOW
❓ Q: What’s the type of null in JS?
😲 It’s actually "object" — and yes, it’s a weird quirk of JavaScript.
❓ Q: Are integers and floats treated differently in JavaScript?
✅ No! Both are just number. JS doesn’t care if it's 10 or 10.5.

Let’s keep learning and sharing JS like this — no fluff, just real concepts with examples.
One day at a time 🌱

Day 1 of Complete JavaScript in 17 days | Visual Series📚✨

Azaan Suhail — Tue, 16 Sep 2025 17:31:45 +0000

Day 1 of My JavaScript Visual Series 📚✨
When I started learning JavaScript, I used to get super confused between let, const, and var 😵‍💫
All three looked the same to me until I made a simple table like this ✅❌
And guess what? It made everything so clear in just 2 mins!
Here’s what finally clicked for me:

var is old-school and can be used anywhere inside a function
let and const are modern and work only inside curly braces {}
const is like a strict teacher – once set, can’t change 😅

This small concept wasted a lot of my time earlier.
Hope this helps someone who's stuck like I was 🔁