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

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);
};