this Basics; call/apply/bind (intro)
Understand what this refers to in functions and methods; learn arrow this, and taste call/apply/bind.
this Basics; call/apply/bind (intro) is a free JavaScript Academy lesson on CoddyKit. This is lesson 3 of 3. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 3 lessons in total.
Intro to this
Goal: See what this refers to in different calls, learn arrow this, and try call/apply/bind in tiny steps.
- Method vs plain call
- Arrow this
- call/apply/bind
Method call this
In a method call, this points to the object before the dot.
// Method call: this is the object before the dot
const user = {
name: "Ayla",
say() {
console.log("I am", this.name);
}
};
user.say();
Plain call this
A plain call has this as undefined in strict mode. In browsers without strict mode it may be the window.
// Plain function call: this is undefined in strict mode
function show() {
console.log("this is", this);
}
show();
Arrow this (lexical)
An arrow function uses the outer this (lexical). Great for callbacks inside methods.
// Arrow functions do not have their own this
// They capture this from the surrounding scope
const team = {
title: "Blue",
start() {
const report = () => {
console.log("Team:", this.title);
};
report();
}
};
team.start();
call vs apply
call and apply run the function now with the given this.
// call/apply invoke the function with a chosen this
function intro(lang1, lang2) {
console.log("User:", this.name, "knows", lang1, "and", lang2);
}
const person = { name: "Mina" };
// call passes arguments normally
intro.call(person, "JS", "TS");
// apply passes arguments as an array
intro.apply(person, ["JS", "TS"]);
bind basics
bind returns a new function that remembers the chosen this for future calls.
// bind creates a new function with this fixed
function sayHi() {
console.log("Hi from", this.name);
}
const dev = { name: "Lena" };
const sayHiFromLena = sayHi.bind(dev);
sayHiFromLena();
sayHiFromLena();
bind vs call/apply quiz
Quick check: Fixing this.
Recap
Recap: Method calls set this to the object, plain calls have this undefined in strict mode, arrows capture outer this, call/apply set it for one call, and bind fixes it for later calls.
Learn JavaScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 59
- Lessons
- 200
Frequently Asked Questions
Is the “this Basics; call/apply/bind (intro)” lesson free?
Yes — any 3 lessons of the JavaScript Academy learning path, including “this Basics; call/apply/bind (intro)”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 3 lessons in total.
What will I learn in “this Basics; call/apply/bind (intro)”?
Understand what this refers to in functions and methods; learn arrow this, and taste call/apply/bind. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 3.
How long does the “this Basics; call/apply/bind (intro)” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Declarations vs Expressions, Arrow Basics
- Parameters, Defaults, Rest, and Returns
- this Basics; call/apply/bind (intro)