• +91-8294938831

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript this Keyword

← Previous Next →

In JavaScript, the this keyword is a fundamental concept that refers to the context in which a function or object is executed. Its value depends on how and where a function is called. Understanding this is crucial for building dynamic web applications, as it allows developers to access object properties, invoke methods, and maintain proper context in functions and event handlers.

In this tutorial, you will learn about the JavaScript this keyword, how it behaves in different contexts, practical examples, common mistakes, best practices, and real-world applications.

Why the this Keyword Is Important

The this keyword is important because it:

  • Provides access to the current execution context

  • Allows methods to reference the object they belong to

  • Supports dynamic function invocation in different contexts

  • Enables object-oriented programming patterns in JavaScript

  • Helps manage scope in event handlers and callback functions

Without a proper understanding of this, code may produce unexpected results, especially when dealing with nested functions, event handlers, or object methods.

How this Works in Different Contexts

The value of this changes depending on how a function is called. The main contexts include:

  1. Global Context

  2. Function Context

  3. Object Method Context

  4. Constructor Functions

  5. Arrow Functions

  6. Event Handlers

1. Global Context

In the global execution context (outside any function), this refers to the global object. In browsers, this is usually the window object. In strict mode, this is undefined.

console.log(this); // Window object in browser

In strict mode:

"use strict";
console.log(this); // undefined

2. Function Context

In a regular function, this refers to the global object in non-strict mode. In strict mode, it is undefined.

function showThis() {
    console.log(this);
}
showThis(); // Window (non-strict) or undefined (strict)

3. Object Method Context

When a function is called as a method of an object, this refers to the object that owns the method.

const student = {
    name: "Priya",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

student.greet(); // Hello, Priya

Here, this refers to the student object.

4. Constructor Functions

Inside constructor functions, this refers to the newly created object.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const aarushi = new Person("Aarushi", 25);
console.log(aarushi.name); // Aarushi

5. Arrow Functions

Arrow functions do not have their own this. They inherit this from the surrounding lexical scope.

const teacher = {
    name: "Saanvi",
    greet: function() {
        const arrowFunc = () => console.log("Hello, " + this.name);
        arrowFunc();
    }
};

teacher.greet(); // Hello, Saanvi

6. Event Handlers

In HTML event handlers, this usually refers to the element that received the event.

<button id="btn">Click Me</button>

<script>
const button = document.getElementById("btn");
button.addEventListener("click", function() {
    console.log(this.id); // btn
});
</script>

Using arrow functions here would change the context of this:

button.addEventListener("click", () => {
    console.log(this.id); // undefined, because arrow functions inherit lexical this
});

Practical Examples

Example 1: Object Method

const student = {
    name: "Aarushi",
    introduce: function() {
        console.log("My name is " + this.name);
    }
};
student.introduce(); // My name is Aarushi

Example 2: Constructor Function

function Course(title, duration) {
    this.title = title;
    this.duration = duration;
}
const jsCourse = new Course("JavaScript Basics", "30 days");
console.log(jsCourse.title); // JavaScript Basics

Example 3: Nested Function Problem

const student = {
    name: "Priya",
    greet: function() {
        function inner() {
            console.log(this.name);
        }
        inner();
    }
};
student.greet(); // undefined (strict mode) or Window.name

Example 4: Using Arrow Function to Fix Context

const student = {
    name: "Priya",
    greet: function() {
        const inner = () => console.log(this.name);
        inner();
    }
};
student.greet(); // Priya

Example 5: Event Handler with Correct this

const btn = document.getElementById("btn");
btn.addEventListener("click", function() {
    console.log(this.id); // btn
});

Example 6: Using call, apply, and bind

You can explicitly set this using these methods.

function greet(city) {
    console.log(`Hello, ${this.name} from ${city}`);
}

const student = { name: "Aarushi" };

greet.call(student, "Patna");  // Hello, Aarushi from Patna
greet.apply(student, ["Patna"]); // Hello, Aarushi from Patna

const boundGreet = greet.bind(student);
boundGreet("Patna"); // Hello, Aarushi from Patna

Common Mistakes

  • Using regular functions inside objects or callbacks without understanding context

  • Expecting arrow functions to have their own this

  • Confusing this in strict vs non-strict mode

  • Relying on this in event handlers without binding

  • Misusing constructor functions without new

Best Practices

  • Use arrow functions for nested functions when you want to inherit this

  • Always use new with constructor functions

  • Use call, apply, or bind to explicitly set this when needed

  • Avoid unnecessary reliance on global this

  • Understand this behavior in event handlers for consistent results

Real-World Applications

  • Accessing and modifying object properties dynamically

  • Maintaining context in asynchronous callbacks and promises

  • Event handling in DOM elements

  • Implementing classes and constructor functions

  • Binding methods for reusable utility functions

Summary of JavaScript this Keyword

The JavaScript this keyword provides access to the current execution context. Its value varies depending on whether it is used in the global scope, inside a function, an object method, a constructor function, an arrow function, or an event handler. Understanding how this works, combined with call, apply, and bind, allows developers to write modular, maintainable, and predictable code. Following best practices helps avoid common pitfalls and ensures proper context in complex applications.

Practice Questions

  1. Log this in the global context and explain the output in a browser and Node.js environment.

  2. Create a regular function and log this inside it. Compare the result in strict and non-strict mode.

  3. Define an object with a method and log this inside the method. Explain what this points to.

  4. Create a nested function inside a method and log this inside the nested function. Explain the behavior.

  5. Rewrite the nested function from the previous question using an arrow function and observe how this changes.

  6. Create a class with a method and log this inside the method. Instantiate the class and call the method.

  7. Create a static method in a class and log this inside it. Explain what this points to.

  8. Use call() and apply() to invoke a function with a specific this context. Compare the results.

  9. Use bind() to create a new function with this permanently set to a given object. Call the function and log the output.

  10. Create a DOM element and attach an event listener. Log this inside a regular function and then inside an arrow function. Explain the difference.

← Previous Next →

Try a Short Quiz.

No quizzes available.


CodePractice Blogs

Latest Blogs on JavaScript

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top