Next ❯

Objects Overview

  • This lesson introduces objects and their importance in JavaScript.

  • Introduction to Objects in JavaScript

    In JavaScript, objects are one of the most important and powerful concepts.

    Almost everything in JavaScript is an object:

    • User data

    • Products

    • Students

    • Cars

    • Functions

    • Arrays

    Objects allow us to store related data and functionality together in a structured way.

    What is an Object ?

    An object is a collection of key–value pairs, where:

    • Keys are called properties

    • Values can be data or functions

    Simple Definition

    An object represents a real-world entity by grouping related properties and actions together.

    Real-Life Example

    Consider a student:

    Student has:

    • Name

    • Roll number

    • Age

    • Marks

    • Ability to display details

    In JavaScript, we represent this using an object.

    Object Creation & Access

    How to Create an Object in JavaScript

    JavaScript provides multiple ways to create objects.
    At the beginner level, the most common and recommended way is Object Literal.

    Method 1: Object Literal (Most Common)

    Syntax

    let objectName = {

      key1: value1,

      key2: value2

    };

Object Creation using Object Literal

Defines an object with key-value pairs to store related data. 

// Creating a student object

let student = {
  name: "Rahul",
  rollNo: 101,
  age: 20,
  isPassed: true
};

  • Here:

    • name, rollNo, age, isPassed are properties

    • Values can be string, number, boolean, etc.

    Accessing Object Properties

    There are two ways to access object properties:

    1. Dot notation

    2. Bracket notation

    1. Dot Notation

    Syntax

    objectName.propertyName

Accessing Object Properties

Retrieves object values using dot notation for direct property access. 

// Accessing properties using dot notation

let student = {
  name: "Rahul",
  rollNo: 101,
  age: 20,
  isPassed: true
};

console.log(student.name); // Rahul
console.log(student.age);  // 20

  • 2. Bracket Notation

    Syntax

    objectName["propertyName"]


Bracket Notation for Object Access

Accesses object properties using string keys inside brackets. 

// Accessing properties using bracket notation

let student = {
  name: "Rahul",
  rollNo: 101,
  age: 20,
  isPassed: true
};

console.log(student["rollNo"]);   // 101
console.log(student["isPassed"]); // true
  • Difference Between Dot and Bracket Notation
    FeatureDot NotationBracket Notation
    Easy to useYesSlightly complex
    Dynamic keysNoYes
    PreferredMost casesWhen key is variable

Dynamic Property Access in Objects

Uses a variable as a key to access object properties dynamically. 

// Dynamic property access

let student = {
  name: "Rahul",
  rollNo: 101,
  age: 20,
  isPassed: true
};

let keyName = "age";

console.log(student[keyName]); // 20

  • Dot notation cannot be used here.


Modifying Object Properties

Updates existing values in an object using assignment. 

// Modifying object properties

let student = {
  name: "Rahul",
  rollNo: 101,
  age: 20,
  isPassed: true
};

student.age = 21;
student.isPassed = false;

console.log(student);
  • Adding New Properties

Adding New Object Properties

Adds new key-value pairs to an existing object dynamically. 

// Adding new property

let student = {
  name: "Rahul",
  rollNo: 101,
  age: 20,
  isPassed: true
};

student.city = "Delhi";

console.log(student);
  • Objects in JavaScript are dynamic, so new properties can be added anytime.

Deleting Object Properties

Removes a property from an object using the delete keyword. 

// Deleting object property

let student = {
  name: "Rahul",
  rollNo: 101,
  age: 20,
  isPassed: true,
  city: "Delhi"
};

delete student.city;

console.log(student);

  • Object Methods

    What is an Object Method ?

    When a function is stored as a property of an object, it is called a method.

    Definition

    A method is an action that an object can perform.

    Real-Life Example

    A car object:

    • Properties: brand, color, speed

    • Methods: start(), stop(), accelerate()

Object Methods

Defines functions inside objects to perform actions using object data. 

// Object with method

let student = {
  name: "Rahul",
  rollNo: 101,
  age: 20,
  
  showDetails: function () {
    console.log("Name:", this.name);
    console.log("Roll No:", this.rollNo);
    console.log("Age:", this.age);
  }
};

// Calling method
student.showDetails();

  • Understanding this Keyword (Basic Intro)

    Inside an object method:

    • this refers to the current object

    In the example above:

    • this.name means student.name

Object with Multiple Methods

Groups related functions inside an object to perform different operations. 

// Object with multiple methods

let calculator = {
  a: 10,
  b: 5,

  add: function () {
    return this.a + this.b;
  },

  subtract: function () {
    return this.a - this.b;
  }
};

console.log(calculator.add());      // 15
console.log(calculator.subtract()); // 5

  • Shorter Method Syntax (ES6)

    JavaScript also allows a shorter way to write methods.

ES6 Object Short Method Syntax

Defines object methods in a shorter ES6 format without using function keyword. 

// Short method syntax

let user = {
  name: "Amit",
  
  greet() {
    console.log("Hello", this.name);
  }
};

user.greet();

  • Methods vs Properties

    FeaturePropertyMethod
    StoresDataFunction
    Examplename, ageshowDetails()
    TypeValueFunction

    Common Mistakes

    • Forgetting to use this inside methods

    • Using dot notation for dynamic keys

    • Overwriting object properties accidentally

    • Confusing methods with normal functions

      Best Practices for Objects

      • Use meaningful property names

      • Group related data in one object

      • Use methods for actions

      • Avoid very large objects

      • Keep object structure clear

      Real-World Use Cases of Objects

      Objects are used to represent:

      • User profiles

      • Product details

      • API responses

      • Configuration settings

      • Game characters

    Next ❯