What is Object?
In JavaScript, an object is a complex data type that allows you to store collections of data and more complex entities. An object is made up of key-value pairs, where each key (also called a property name) is a string (or symbol), and each value can be any data type—such as a string, number, array, function, or even another object.
Basic Syntax
let person = {
name: "Alice",
age: 30,
isStudent: false
};
In the example above:
person is an object.
It has three properties: name, age, and isStudent.
Accessing Object Properties
You can access or modify properties using dot notation or bracket notation:
console.log(person.name); // "Alice"
console.log(person["age"]); // 30
person.age = 31; // Update value
person.city = "New York"; // Add new property
Object Methods
An object can also contain functions, which are then called methods:
let person = {
name: "Alice",
greet: function() {
console.log("Hello, my name is " + this.name);
}
};
p**erson.greet(); // "Hello, my name is Alice"
Why Use Objects?**
Objects are useful for:
Grouping related data together.
Modeling real-world entities (like a car, user, order, etc.).
Passing structured data around in your programs.
In JavaScript, the this keyword refers to the context in which a function is called. Its value depends on how and where the function is invoked.
🧠 Core Concept
this is a reference to the object that is executing the current function.
**
🔹 1. In an Object Method**
const person = {
name: "Alice",
greet() {
console.log(this.name);
}
};
person.greet(); // "Alice" → this refers to the person object
🔹 2. In a Regular Function (not inside an object)
function show() {
console.log(this);
}
show(); // In non-strict mode: this is the global object (window in browser)
// In strict mode: this is undefined
🔹 3. In an Arrow Function
const person = {
name: "Alice",
greet: () => {
console.log(this.name);
}
};
person.greet(); // undefined → arrow functions don’t bind their own this
➡️ Arrow functions inherit this from the surrounding lexical scope (where the function was defined).
🔹 4. In Event Handlers (DOM)
document.querySelector("button").addEventListener("click", function () {
console.log(this); // this refers to the button that was clicked
});
🔹 5. With bind(), call(), or apply()
You can manually set the value of this.
function greet() {
console.log(this.name);
}
const user = { name: "Bob" };
greet.call(user); // "Bob"
**
📝 Summary Table**
Context Value of this
Object method The object itself
Standalone function Global object (window or global)
Strict mode function undefined
Arrow function Lexical (outer) this
Event handler (non-arrow) Element that received the event
call / apply / bind Manually set
⚡ What Is Hoisting?
Hoisting is JavaScript's behavior of moving declarations to the top of their scope (before code execution).
This applies to:
✅ var variable declarations
✅ Function declarations
❌ NOT let and const (they are not hoisted in the same way)
🔹 Hoisting with var
console.log(a); // undefined
var a = 5;
What’s actually happening:
var a; // hoisted declaration
console.log(a); // undefined
a = 5; // assignment happens later
➡️ var is hoisted and initialized with undefined.
🔹 Hoisting with let and const
console.log(b); // ❌ ReferenceError
let b = 10;
let and const are hoisted but not initialized, so they stay in a "temporal dead zone" until the line where they are defined.
Accessing them before that results in an error.
🔹 Hoisting with Function Declarations
greet(); // ✅ Works fine
function greet() {
console.log("Hello!");
}
Function declarations are fully hoisted — both their name and body.
🔹 Function Expressions (Not Hoisted Like Declarations)
sayHi(); // ❌ TypeError: sayHi is not a function
var sayHi = function () {
console.log("Hi!");
};
Only the variable (sayHi) is hoisted (as undefined), not the function assignment.
✅ Summary
Feature Hoisted? Initialized?
var ✅ Yes ✅ With undefined
let / const ✅ Yes (TDZ) ❌ No (TDZ error)
Function Declaration ✅ Yes ✅ Yes
Function Expression ✅ (as var) ❌ No
Top comments (0)