How to Create Dynamic Values and Objects in JavaScript?

In JavaScript, you can choose dynamic values or variable names and object names and choose to edit the variable name in the future without accessing the array, Dynamic values and objects in JavaScript allow changing, accessing, or creating values and object properties at runtime for flexibility and adaptability.

Below are the approaches to create dynamic values and objects in JavaScript:

Approach 1: Using object literals with computed property names

In this approach, we are using object literals with computed property names that allow you to dynamically create or modify object properties based on variables or expressions within square brackets [].

Syntax:

const dynamicObject = {
  [dynamicKey]: dynamicValue,
};

Example: In this example, we are using the above-explained approach.

const dynamicKey1 = 'age';
const dynamicValue1 = 25;

const dynamicKey2 = 'city';
const dynamicValue2 = 'Noida';

const dynamicObject = {
    name: 'Aman',
    [dynamicKey1]: dynamicValue1,
    [dynamicKey2]: dynamicValue2,
};

console.log(dynamicObject);

{ name: 'Aman', age: 25, city: 'Noida' }

Approach 2: Using the bracket notation for object property assignment

In this approach we are using bracket notation for object property assignment allows you to set or add properties to an object dynamically.

Syntax:

obj[propertyName] = propertyValue;

Example: In this example, we are using the above-explained approach.

const dynamicKey = 'age';
const dynamicValue = 30;

const dynamicObject = {
    name: 'Aman',
};

// Using bracket notation to 
//set properties dynamically
dynamicObject[dynamicKey] = dynamicValue;
dynamicObject['city'] = 'Noida';

console.log(dynamicObject);

{ name: 'Aman', age: 30, city: 'Noida' }

Approach 3: Using the spread operator

The spread operator allows merging objects into a new one with all properties copied. It creates a concise and non-destructive way to combine objects or clone them.

Example: In this example, we are using the above-explained approach.

const obj1 = { name: 'Ankit' };
const obj2 = { age: 30 };
const obj3 = { city: 'Noida' };

const mergedObject = { ...obj1, ...obj2, ...obj3 };

console.log(mergedObject);

{ name: 'Ankit', age: 30, city: 'Noida' }

Approach 4: Using Object.assign() Method

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. This method can be used to dynamically add properties to an object or merge multiple objects into one.

Syntax:

Object.assign(target, ...sources);

Parameters:

• target: The target object to which properties will be copied.
• sources: One or more source objects from which properties will be copied.

Example: In this example, we use the Object.assign() method to dynamically add properties to an object.

const dynamicKey1 = 'age';
const dynamicValue1 = 28;

const dynamicKey2 = 'city';
const dynamicValue2 = 'Noida';

const targetObject = {
    name: 'Aman',
};

// Using Object.assign to add dynamic properties
Object.assign(targetObject, {
    [dynamicKey1]: dynamicValue1,
    [dynamicKey2]: dynamicValue2,
});

console.log(targetObject);

{ name: 'Aman', age: 28, city: 'Noida' }