JavaScript Interview Puzzle #1
The this Keyword Trap That Confuses Even Experienced Developers
Most developers think they understand JavaScript.And to be fair — most of the time they do.But every now and then, JavaScript throws a small puzzle that quietly exposes a gap in our understanding.
Today’s puzzle is one of those.It looks harmless.It looks simple.But it has confused thousands of developers during interviews.
Let’s see if it tricks you too.
The Puzzle
Look at the code below carefully.
What do you think it will print?
const user = {
name: "Ebenezer",
greet: function() {
console.log(this.name);
}
};
const greetFunc = user.greet;
greetFunc();
Take a moment.
Don't rush to the answer.
What do you think the output will be?
Most people say:
Ebenezer
But that is not what JavaScript prints.
The actual output is:
undefined
Wait.
Why?
The object clearly has a name.
So why did JavaScript forget it?
To understand this puzzle, we need to talk about one of JavaScript’s most misunderstood ideas:
The this keyword.
Let’s Understand This With a Tiny Story
Let’s imagine something simple.You have a robot.And that robot belongs to you.You tell the robot:
“Whenever someone asks who you belong to, say my name.”
So the robot has instructions like this:
Robot:
If someone asks → say owner name
Now imagine something interesting happens.Someone removes the robot from your house.The robot is standing alone somewhere else.
Now someone asks the robot:
“Who is your owner?”The robot looks around.It doesn't see you.
So it says:
“I don’t know.”
That is exactly what happens in our JavaScript puzzle.
Understanding the Code Slowly
Let’s look at the first part.
const user = {
name: "Ebenezer",
greet: function() {
console.log(this.name);
}
};
Here we created an object called user.
Inside the object we have:
name → "Ebenezer"
greet → a function
The important part is this line:
console.log(this.name)
Here this refers to the object that owns the function.
So if we run this:
user.greet();
JavaScript understands that the function belongs to user.
So this becomes:
this = user
Which means:
this.name = "Ebenezer"
So it prints:
Ebenezer
So far everything makes sense.
Now Comes the Trap
Look at this line again.
const greetFunc = user.greet;
What did we just do?
We took the function out of the object.
It’s no longer attached to user.
Now greetFunc is just a normal standalone function.
When we call it:
greetFunc();
JavaScript asks:
“Who owns this function?”
But there is no object calling it anymore.
So this becomes:
undefined
Which means:
this.name → undefined
And that is exactly what gets printed.
The Rule That Saves You
Here is a simple rule to remember.
this depends on how a function is called, not where it was written.
That sentence is one of the most important lessons in JavaScript.
Let’s repeat it again.
this depends on how the function is called.
Not where it was defined.
How Interviews Use This Question
Interviewers love this puzzle.Not because it is complicated.But because it tests whether you understand:
• JavaScript function context
• Object methods
• The this keyword
Many developers memorize syntax.
But interviews test mental models.And this puzzle reveals whether someone truly understands JavaScript behavior.
The Correct Way to Preserve this
If you want the function to always remember the object, you can use .bind().
Example:
const greetFunc = user.greet.bind(user);
greetFunc();
Now the output becomes:
Ebenezer
Because we permanently told the function:
“Your this should always be user.”
Why This Matters in Real Applications
This concept appears everywhere in JavaScript.
For example:
• Event listeners
• React components
• Callbacks
• Timers
• API handlers
Many bugs happen because developers lose the correct this context.
Understanding this puzzle helps you avoid those mistakes.
Try This Variation
Before you leave, try solving this.
What will this print?
const person = {
name: "Alex",
sayHello() {
console.log(this.name);
}
};
setTimeout(person.sayHello, 1000);
Take a guess before running it.You might be surprised again.
Final Thought
JavaScript is not just about writing code.
It’s about understanding how the language thinks.
Small puzzles like this reveal the hidden rules behind the language.
And once you see them, JavaScript suddenly feels much clearer.
Your Turn
What do you think the second example prints?
Write your answer in the comments before testing it.
Tomorrow we’ll look at another JavaScript interview puzzle that tricks even experienced developers.
See you in Puzzle #2.
Top comments (0)