Skip to main content

JavaScript Objects 🚀

JavaScript Objects is a core JavaScript concept covering learn how to use Objects in JavaScript to store complex data. Master dot notation, bracket notation, and the 'this' keyword with the Car scenario. This topic is essential for academic learning, board exam preparation, and developing optimized real-world code.

Mentor's Note: In the real world, an "Item" has many features. A phone isn't just a number; it has a color, a model, and actions it can do. Objects allow us to model these real items in code! 💡


🌟 The Scenario: The Luxury Car 🏎️

Imagine you are looking at a sports car.

  • The Properties: The car has a Brand (Ferrari), a Color (Red) 🔴, and a Top Speed (300km/h). 📦
  • The Methods: The car can Start 🏁, Drive 🏎️, and Stop 🛑.
  • The Result: You group all these features under one name: myCar. ✅

📖 Concept Explanation

1. What is an Object?

An object is a collection of related data and/or functionality. These usually consist of several variables and functions, which are called Properties and Methods when they are inside objects.

2. Creating an Object

We use curly braces {} to create an object literal.

const person = {
name: "Vishnu",
age: 25
};

3. Accessing Data

  • Dot Notation: person.name (The professional way). 🖱️
  • Bracket Notation: person["name"] (The dynamic way).

🎨 Visual Logic: The Object Container


💻 Implementation: The Object Lab

// 🛒 Scenario: Building a User Profile
// 🚀 Action: Creating properties and a method

const user = {
name: "Vishnu Digital",
course: "Full Stack JS",
isLoggedIn: true,

// ⚙️ A Method (Action)
greet: function() {
console.log(`Hello, welcome to ${this.course}! 👋`);
}
};

// Accessing properties
console.log(user.name);

// Calling a method
user.greet();

🧠 Step-by-Step Logic (The this Keyword)

  1. When you call user.greet(), JavaScript looks inside the user object.
  2. The word this points back to the object itself (the user).
  3. So, this.course becomes "Full Stack JS".
  4. End 🏁

📊 Sample Dry Run

InstructionComputer ActionResult
user.age = 20Add new label 'age'{name:..., age: 20}
delete user.ageRemove label 'age'{name:...} 🗑️

📈 Technical Analysis

  • Reference Type: Objects are stored as a reference. If you copy an object (const a = b), you aren't making a new one; both names point to the Same memory box. 🧠

🎯 Practice Lab 🧪

Task: The Book Shelf

Task: Create an object book with properties title, author, and isRead (boolean). Add a method summary() that prints: "[Title] was written by [Author]." Hint: Use this.title and this.author. 💡


💡 Interview Tip 👔

"Interviewers love asking: 'What is the difference between an Object and an Array?' Answer: Arrays are ordered lists accessed by numbers (0, 1, 2). Objects are unordered collections accessed by names (keys)!"


💡 Pro Tip: "Object-oriented programming is like building with LEGOs—you create parts once and use them to build anything!" - Anonymous


← Back: Functions | Next: Events →

📍 Visit Us

🏫 VD Computer Tuition Surat

VD Computer Tuition
📍 Address
2/66 Faram Street, Rustompura
Surat395002, Gujarat, India
📞 Phone / WhatsApp
+91 84604 41384
🌐 Website

Computer Classes & Tuition — Areas We Serve in Surat

AdajanAlthanAmroliAthwaAthwalinesBhagalBhatarBhestanCanal RoadChowkCitylightDumasGaurav PathGhod Dod RoadHaziraJahangirpuraKamrejKapodraKatargamLimbayatMagdallaMajura GateMota VarachhaNanpuraNew CitylightOlpadPalPandesaraParle PointPiplodPunaRanderRing RoadRustampuraSachinSalabatpuraSarthanaSosyo CircleUdhnaVarachhaVed RoadVesuVIP Road
📞 Call Sir💬 WhatsApp Sir