How can I add a key/value pair to a JavaScript object?

Adding Key-Value Pairs to JavaScript Objects

Learn various methods to dynamically add new properties (key-value pairs) to existing JavaScript objects, from simple assignment to advanced techniques.

JavaScript objects are fundamental data structures used to store collections of key-value pairs. Often, you'll need to modify these objects by adding new properties dynamically after their initial creation. This article explores several common and effective ways to achieve this, catering to different scenarios and preferences.

Understanding JavaScript Objects

Before diving into adding properties, it's crucial to understand that JavaScript objects are mutable. This means their content can be changed after they are created. A key (or property name) in a JavaScript object is always a string or a Symbol. If you use a number or another data type as a key, it will be implicitly converted to a string.

flowchart TD
    A[Start with an Object] --> B{Need to add a property?}
    B -- Yes --> C[Use Dot Notation]
    B -- Yes --> D[Use Bracket Notation]
    B -- Yes --> E[Use Object.assign()]
    B -- Yes --> F[Use Spread Syntax (...)]
    C --> G[Property Added]
    D --> G
    E --> G
    F --> G
    G --> H[End]

Flowchart illustrating different methods for adding properties to a JavaScript object.

Method 1: Dot Notation

The most straightforward and commonly used method for adding a new key-value pair to an object is dot notation. This works when your key is a valid JavaScript identifier (e.g., no spaces, starts with a letter, underscore, or dollar sign).

let myObject = {
  name: 'Alice',
  age: 30
};

// Add a new property using dot notation
myObject.city = 'New York';

console.log(myObject); 
// Output: { name: 'Alice', age: 30, city: 'New York' }

Adding a new property using dot notation.

Method 2: Bracket Notation

Bracket notation is more flexible than dot notation. It allows you to use keys that are not valid JavaScript identifiers (e.g., keys with spaces, hyphens, or starting with numbers). It's also essential when the key name is stored in a variable or needs to be dynamically computed.

let myObject = {
  name: 'Bob'
};

// Add a new property with a space in the key
myObject['favorite food'] = 'Pizza';

// Add a new property using a variable for the key
let newKey = 'email';
myObject[newKey] = 'bob@example.com';

console.log(myObject);
// Output: { name: 'Bob', 'favorite food': 'Pizza', email: 'bob@example.com' }

Adding properties using bracket notation with string literals and variables.

Method 3: Object.assign()

The Object.assign() method is used to copy all enumerable own properties from one or more source objects to a target object. It returns the target object. This is particularly useful when you want to add multiple properties or merge objects.

let myObject = {
  id: 101
};

let newProperties = {
  status: 'active',
  lastLogin: new Date()
};

// Add new properties from 'newProperties' to 'myObject'
Object.assign(myObject, newProperties);

console.log(myObject);
/* Output:
{ 
  id: 101, 
  status: 'active', 
  lastLogin: [Date object] 
}*/

// You can also add properties directly:
Object.assign(myObject, { role: 'admin' });
console.log(myObject);
// Output: { id: 101, status: 'active', lastLogin: [Date object], role: 'admin' }

Using Object.assign() to add multiple properties or merge objects.

Method 4: Spread Syntax (...)

The spread syntax (...) is a modern JavaScript feature (ES2018+) that provides a concise way to copy enumerable own properties from one object into a new object. While it doesn't modify the original object directly, it's excellent for creating a new object with added properties, which is often preferred for immutability.

let myObject = {
  product: 'Laptop',
  price: 1200
};

// Create a new object with existing properties and a new one
let updatedObject = {
  ...myObject,
  brand: 'TechCo'
};

console.log(updatedObject);
// Output: { product: 'Laptop', price: 1200, brand: 'TechCo' }

// Add multiple new properties
let anotherUpdate = {
  ...myObject,
  brand: 'TechCo',
  inStock: true
};
console.log(anotherUpdate);
// Output: { product: 'Laptop', price: 1200, brand: 'TechCo', inStock: true }

Using spread syntax to create a new object with added properties.