JavaScript Program to Add Key/Value Pair to an Object

Introduction

Working with objects is a fundamental aspect of JavaScript programming, particularly when managing data structures. Adding key/value pairs to objects dynamically is an essential skill, allowing you to build and manipulate data on the fly. Typically, this involves adding properties to existing objects, which can significantly affect the way data is stored and accessed in your applications.

In this article, you will learn how to add key/value pairs to JavaScript objects through several practical examples. Discover how to use both dot notation and bracket notation for adding properties, and explore the use of the Object.assign() method for merging objects.

Adding Key/Value Pairs Using Dot and Bracket Notation

Using Dot Notation

1. Declare and initialize an object.

2. Use dot notation to add a new key/value pair.

   JAVASCRIPT

   Copy

   let person = { name: 'John' };
   person.age = 30;
   console.log(person);

   Explain Code

   Powered by Vultr AgentBeta

   This code initializes an object person with a property name. It then adds an age property using dot notation. The console.log() outputs the updated object.

Using Bracket Notation

1. Initialize an object with some properties.

2. Utilize bracket notation to add a new key/value pair, especially useful when the key name is stored in a variable or needs to be computed.

   JAVASCRIPT

   Copy

   let person = { name: 'John' };
   let propertyName = 'age';
   person[propertyName] = 30;
   console.log(person);

   Explain Code

   Powered by Vultr AgentBeta

   Here, bracket notation allows adding the property age where the key name is dynamically determined by the variable propertyName.

Using Object.assign() to Add Properties

Merging Objects

1. Start with an initial object.

2. Use Object.assign() to add new properties or merge another object.

   JAVASCRIPT

   Copy

   let person = { name: 'John' };
   let additionalInfo = { age: 30, city: 'New York' };
   Object.assign(person, additionalInfo);
   console.log(person);

   Explain Code

   Powered by Vultr AgentBeta

   In this code, Object.assign() is used to merge additionalInfo into person. The properties from additionalInfo are added to person, effectively updating it with new key/value pairs.

Adding Multiple Properties

1. Have a base object ready.

2. Apply Object.assign() to add multiple properties at once.

   JAVASCRIPT

   Copy

   let person = { name: 'John' };
   Object.assign(person, { age: 30, city: 'New York' });
   console.log(person);

   Explain Code

   Powered by Vultr AgentBeta

   This demonstrates how to use Object.assign() to add more than one key/value pair directly using an anonymous object.

Conclusion

Adding key/value pairs to JavaScript objects is a versatile way to manage and manipulate data dynamically in your applications. Through the simplicity of dot and bracket notations for direct additions and the power of Object.assign() for merging objects, you can effectively tailor data structures to meet diverse requirements. Employ these techniques in your JavaScript projects to enhance data handling and functionality, ensuring your code remains adaptable and maintainable.