The this Keyword (call, apply & bind)

this is the single most misunderstood word in JavaScript — and once it clicks, half of the "weird" bugs you've hit suddenly make sense. The trick: this is not decided by where a function is written , but by how it is called .

Learn The this Keyword (call, apply & bind) in our free JavaScript course — a beginner-friendly interactive lesson with runnable examples, a practice…

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

In this lesson you'll learn the four call patterns that set this , why callbacks "lose" it, and how call , apply , and bind let you take back control.

📚 Prerequisites: You should be comfortable with functions and basic objects. If you know that objects hold key/value pairs and that methods are just functions stored on an object, you're ready.

💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

🗣️ Real-World Analogy: Think of the word "my" in a spoken sentence:

Most beginners assume this refers to the object the function "belongs to". It doesn't. A function has no fixed this at all. The value is decided fresh every time the function is called , based on how the call is written. Look at the object immediately to the left of the dot at the moment of the call — that's usually your this .

Every function call falls into one of these four patterns. Learn them once and you'll never guess again:

This is the bug that bites everyone. You have a method that works perfectly when you call it directly, but the moment you hand it to setTimeout , an event listener, or map , this vanishes. Why? Because those callers invoke your function as a plain function — there's no object before the dot anymore.

Fill in the blank so the method reads its own object's data.

fn.call(thisArg, arg1, arg2, ...) runs fn immediately, sets this to thisArg , and passes the rest as normal arguments. It's perfect for borrowing a method from one object to use on another.

fn.apply(thisArg, [args]) is identical to call except the arguments arrive as a single array. Remember it as "A for Array" . It shines when you already have your values in an array and the function expects them as separate parameters.

Unlike call and apply , bind does not run the function. It returns a new function whose this is permanently fixed. That makes it the go-to fix for event handlers and timers, where the framework decides when (and how) your function gets called. You can also pre-fill leading arguments — a technique called partial application .

Create a bound copy of greet that is locked to the captain object.

These lines are scrambled. Put them in the right order so the bound function logs Hi Nova .

Why: you must declare the function and the object before you can bind them, and bind before you call.

Predict the output before revealing the answer.

7 — called as o.get() , so this is o . (Calling f() instead would lose this .)

15 — this.a is locked to 10 , and 5 is passed as b .

x9 — call invokes immediately with this set to the object we passed.

Up next: Destructuring — unpack arrays and objects in a single, elegant line. 📦

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary