Skip to main content

JavaScript Objects (Live Playground)

Objects are a fundamental building block in JavaScript. They allow you to store and organize data using key-value pairs.

Creating JavaScript Objects​

We will explore two common ways to create objects in JavaScript: using object literals and constructor functions.

Using Object Literals​

An object literal is a simple and concise way to create an object. You define the object and its properties within curly braces {}.

Example:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  greet: function () {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
  },
};

person.greet(); // Output: Hello, my name is John Doe.
Live Playground, Try it Yourself

Using Constructor Functions​

Constructor functions allow you to create objects with a specific structure and behavior. You define a function that initializes the object's properties and methods.

Example:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;

  this.getDetails = function () {
    return `${this.year} ${this.make} ${this.model}`;
  };
}

const car1 = new Car('Toyota', 'Corolla', 2020);
console.log(car1.getDetails()); // Output: 2020 Toyota Corolla
Live Playground, Try it Yourself

Accessing and Modifying JavaScript Object Properties​

Once you've created an object, you'll often need to access and modify its properties. We will discuss two methods for accessing and modifying object properties in JavaScript: dot notation and bracket notation.

Using Dot Notation​

Dot notation is a simple and common way to access and modify object properties. You use the object name followed by a dot and the property name.

Example:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

console.log(person.firstName); // Output: John

// Modify property
person.age = 31;
console.log(person.age); // Output: 31
Live Playground, Try it Yourself

Using Bracket Notation​

Bracket notation is another way to access and modify object properties. You use the object name followed by the property name enclosed in square brackets [] and quotes.

Example:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

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

// Modify property
person['age'] = 32;
console.log(person['age']); // Output: 32
Live Playground, Try it Yourself

Bracket notation is especially useful when the property name is stored in a variable or contains special characters.

Example:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 32,
};

const propName = 'age';
console.log(person[propName]); // Output: 32
Live Playground, Try it Yourself

Conclusion​

Knowing how to create objects in JavaScript is essential for organizing and structuring your data. By mastering object literals and constructor functions, you can efficiently create and manage objects in your programs.

Knowing how to access and modify object properties in JavaScript is crucial for working with objects. By mastering dot notation and bracket notation, you can efficiently manipulate object properties in your programs.