this Keyword
- This lesson explains how the this keyword behaves in different contexts.
Introduction to Objects in JavaScript
Objects are one of the most important concepts in JavaScript.
They allow us to store data and behavior together using key-value pairs.
Objects
Stores related data together using key-value pairs in a structured way.
// Object example
let student = {
name: "Rahul",
age: 20,
course: "JavaScript"
};In this lesson, we will focus on:
The this keyword
Object Destructuring
Both concepts are essential for writing clean, readable, and professional JavaScript code.
this Keyword
What is the this Keyword ?
The this keyword refers to the object that is currently calling the function.
In simple words:
this points to the object that owns the current code.
The value of this changes depending on where and how it is used.
Why is this Important ?
Allows access to object properties
Makes code reusable
Avoids hard-coding object names
Used heavily in objects, methods, classes, and frameworks
this Inside an Object Method
When this is used inside an object method, it refers to that object.
this Keyword in Object Method
Refers to the current object and accesses its properties inside methods.
// Using this inside object method
let person = {
name: "Rahul",
age: 25,
greet: function () {
console.log("My name is " + this.name);
}
};
person.greet();Explanation
this.name refers to person.name
this points to the person object
Why Not Use Object Name Directly ?
Avoid Hardcoding Object Name
Using this makes code flexible instead of directly referencing object name.
// Bad practice: using object name directly
let person = {
name: "Amit",
greet: function () {
console.log("My name is " + person.name);
}
};- If the object name changes, the code breaks.
Using this for Flexibility
Keeps code reusable by referring to the current object instead of its name.
// Good practice using this
let person = {
name: "Amit",
greet: function () {
console.log(this.name);
}
};
person.greet();this makes the method flexible and reusable.
this in Global Scope
this in Global Scope
Refers to the global object when used outside any function or object.
// this in global scope
console.log(this);In browser: this refers to the window object
In strict mode: this is undefined
this in Normal Function
Refers to the global object (or undefined in strict mode) when used inside a regular function.
// this inside normal function
function show() {
console.log(this);
}
show();In non-strict mode: refers to window
In strict mode: undefined
this Inside Arrow Functions
Arrow functions do not have their own this.
this in Arrow Function
Inherits this from the surrounding scope instead of the object.
// this inside arrow function
let user = {
name: "Neha",
greet: () => {
console.log(this.name); // undefined (does not refer to user)
}
};
user.greet();Reason
Arrow function takes this from global scope
Global scope has no name
Correct this with Arrow Function
Uses arrow function inside method to inherit this from parent scope.
// Correct use of this with arrow function
let user = {
name: "Switty",
greet: function () {
let inner = () => {
console.log(this.name); // refers to user
};
inner();
}
};
user.greet();- this Behavior
Situation Value of this Inside object method The object Inside normal function Global / undefined Inside arrow function Parent scope Global scope Window / global Common Mistakes with this
Using arrow functions as object methods
Expecting this to behave the same everywhere
Forgetting strict mode behavior
Object Destructuring
What is Object Destructuring ?
Object destructuring is a modern JavaScript feature that allows us to extract object properties into variables easily.
Accessing Object Properties Manually
Assigns each object property to separate variables one by one.
// Without destructuring
let student = {
name: "Ravi",
age: 21,
course: "Web Development"
};
let name = student.name;
let age = student.age;
let course = student.course;- This is repetitive and lengthy.
Object Destructuring
Extracts object properties into variables in a single step.
// Using object destructuring
let student = {
name: "Ravi",
age: 21,
course: "Web Development"
};
let { name, age, course } = student;
console.log(name);
console.log(age);
console.log(course);How Destructuring Works
Variable names must match object keys
Values are assigned automatically
Order does not matter
Renaming Variables in Destructuring
Assigns object properties to variables with custom names.
// Destructuring with different variable names
let student = {
name: "Ravi",
age: 21
};
let { name: studentName, age: studentAge } = student;
console.log(studentName);
console.log(studentAge);- Destructuring with Default Values
Default Values in Object Destructuring
Assigns fallback values when a property is missing in the object.
// Default values in destructuring
let user = {
username: "admin"
};
let { username, role = "guest" } = user;
console.log(role); // guest- Destructuring Function Parameters
Destructuring in Function Parameters
Extracts object properties directly in function parameters for cleaner code.
// Destructuring in function parameters
function display({ name, age }) {
console.log(name, age);
}
display({ name: "Anita", age: 22 });- This makes function code clean and readable.
Nested Object Destructuring
Extracts values from nested objects using deep destructuring syntax.
// Nested object destructuring
let employee = {
id: 101,
profile: {
name: "Suresh",
department: "IT"
}
};
let { profile: { name, department } } = employee;
console.log(name);
console.log(department);Real-Life Use of Object Destructuring
API response handling
React props
Configuration objects
Cleaner function parameters
Normal Access vs Destructuring
Feature Normal Access Destructuring Code length Longer Shorter Readability Average High Modern JS No Yes Use in frameworks Limited Extensive Best Practices
Use destructuring for clean code
Avoid destructuring deeply nested objects unnecessarily
Use default values to avoid undefined
Combine destructuring with functions wisely