JavaScript Fundamentals / Objects

JavaScript Objects

🔰 Objects in JavaScript

In real life, an object is anything that has properties and characteristics, such as a car, a house, a person, or an animal. For example, a car has properties like color, brand, and speed.

Similarly, in JavaScript, an object is a data structure used to store multiple related values in a single place as key-value pairs. This makes it easy to organize and manage related information together, such as storing a person's name, age, and city inside one object.

🔰 Object Properties

  • A real life car has properties like name, weight and color:

car.name = "Fiat"
car.model = "500"

💠 Object Methods

  • A real life car has methods like start and stop

  • Methods are actions that can be performed on objects.

  • Methods are function definitions stored as property values.

car.start()
car.stop()

🧱 Variables vs Objects

  • Objects are variables too. But objects can contain many values.

  • Objects store properties (values) and methods (functions).

  • A property is just key: value

  • Almost everything in JavaScript (except primitives) is an object:

    • arrays, functions, dates, math, maps, sets, etc.

✅ Variable (single value)

let car = "Fiat";

✅ Object (many values)

const car = { type: "Fiat", model: "500", color: "white" };

🧩 How to Create an Object

How to Define a JavaScript Object :

  • Using an Object Literal

  • Using the new Object() Constructor

  • Using an Constructor Function

  • Many more…

🧩 Object Literals

  • The object literal is one of the most popular patterns for creating objects in JavaScript because of its simplicity.

  • An object literal is a list of name:value pairs inside curly braces {}.

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

Note:

  • name : value pairs are also called key : value pairs.

  • object literals are also called object initializers.

⭕ Creating a JavaScript Object

  • Spaces and line breaks don’t affect how the object is interpreted.

  • This is valid whether written on one line or multiple lines.

// Create an Object
const person = {  
    firstName: "John",  
    lastName: "Doe",  
    age: 50,  
    eyeColor: "blue"
};

console.log(person); 
console.log(person.firstName);
console.log(person.lastName);   
console.log(person.age);      
console.log(person.eyeColor);
{ firstName: 'John', lastName: 'Doe', age: 50, eyeColor: 'blue' }
John
Doe
50
blue

✨Accessing Object Properties

You can access object properties in two ways:

  1. The dot notation (.)

objectName.propertyName

Example :

const person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

console.log(person.lastName); // Output: Doe

  1. The array-like notation ([]).

objectName["propertyName"]

Example :

const person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

console.log(person["lastName"]); // Output: Doe

🧩Adding New Properties

You can add new properties to an existing object by simply giving it a value:

Example :

person.nationality = "Indian";
console.log(person.nationality); // Output: Indian

Now person becomes:

{
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue",
  nationality: "Indian"
}

❌ Deleting Properties

  • The delete keyword deletes a property from an object.

  • The delete keyword deletes both the value of the property and the property itself.

Example :

const person = {  
    firstName: "John",  
    lastName: "Doe",  
    age: 50,  
    eyeColor: "blue"
    nationality: "English"
};

delete person.age;
or delete person["age"];

Now person becomes:

{
  firstName: "John",
  lastName: "Doe",
  eyeColor: "blue",
  nationality: "English"
}

Creating Object with new Object() constructor

You can create an empty object first, then add properties later.

const car = new Object();

car.brand = "Fiat";
car.model = "500";
car.color = "white";

console.log(car); // { brand: 'Fiat', model: '500', color: 'white' }

✅ What happens here?

  • new Object() creates an empty object

  • Properties are added one by one

  • Not commonly used today (object literals are preferred)

You will learn about Constuctor Function method later in the OOP Section