JavaScript: Add a Property to an Object

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

In JavaScript, objects are dynamic, which means you can add properties to them at any time. There are multiple ways to add a property to an existing object, whether you're working with object literals or more complex objects. This guide will cover the different methods you can use.

1. Using Dot Notation

The most common and straightforward way to add a new property to an object is by using dot notation. This method directly adds the property to the object.

Example:

const employee = {
  firstName: "Ramesh",
  lastName: "Fadatare"
};

// Adding a new property
employee.email = "ramesh.fadatare@gmail.com";

console.log(employee);

Output:

{
  firstName: "Ramesh",
  lastName: "Fadatare",
  email: "ramesh.fadatare@gmail.com"
}

In this example, we add the email property to the employee object using dot notation.

2. Using Bracket Notation

Another way to add a property is by using bracket notation. This method is useful if the property name is stored in a variable or contains special characters.

Example:

const employee = {
  firstName: "Ramesh",
  lastName: "Fadatare"
};

const property = "email";

// Adding a new property using bracket notation
employee[property] = "ramesh.fadatare@gmail.com";

console.log(employee);

Output:

{
  firstName: "Ramesh",
  lastName: "Fadatare",
  email: "ramesh.fadatare@gmail.com"
}

Bracket notation is especially handy when dealing with dynamic property names or when the property name is not a valid identifier (e.g., it contains spaces).

3. Using Object.defineProperty()

You can also add properties using the Object.defineProperty() method, which gives you more control over the property's behavior. You can define whether the property is writable, enumerable, or configurable.

Example:

const employee = {
  firstName: "Ramesh",
  lastName: "Fadatare"
};

// Adding a new property using Object.defineProperty
Object.defineProperty(employee, "email", {
  value: "ramesh.fadatare@gmail.com",
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(employee);

Output:

{
  firstName: "Ramesh",
  lastName: "Fadatare",
  email: "ramesh.fadatare@gmail.com"
}

Using Object.defineProperty() is helpful when you need to fine-tune the property’s characteristics, such as making it non-writable or non-enumerable.

4. Adding Multiple Properties

You can add multiple properties at once using the spread operator or by directly assigning them.

Example 1: Using Multiple Assignments

const employee = {
  firstName: "Ramesh",
  lastName: "Fadatare"
};

// Adding multiple properties
employee.email = "ramesh.fadatare@gmail.com";
employee.department = "Engineering";

console.log(employee);

Example 2: Using the Spread Operator

const employee = {
  firstName: "Ramesh",
  lastName: "Fadatare"
};

const newProperties = {
  email: "ramesh.fadatare@gmail.com",
  department: "Engineering"
};

// Adding multiple properties using the spread operator
const updatedEmployee = { ...employee, ...newProperties };

console.log(updatedEmployee);

Output for both:

{
  firstName: "Ramesh",
  lastName: "Fadatare",
  email: "ramesh.fadatare@gmail.com",
  department: "Engineering"
}

Conclusion

Adding properties to an object in JavaScript is simple and can be done in various ways depending on your needs. For basic use cases, dot notation and bracket notation work well. If you need more control, use Object.defineProperty(). You can also use the spread operator to add multiple properties at once.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF