Add New Property To Object in JavaScript

How to Add New Property To Object in JavaScript | You must define the object name, the dot, the name of the new property, an equals sign, and the new property’s value in order to add a new property to a JavaScript object. Let’s first review and quickly go over the idea of objects and their characteristics.

The term “object” in JavaScript refers to a group of unordered attributes, which are essentially key-value pairs that specify an object’s features. Both object names and their properties are case-sensitive, just as JavaScript variables. Take a look at a JavaScript object example to see how some of its properties are defined.

const car = {
  brand: "Honda",
  year: 2010,
};

console.log(car);

Output:-

{ brand: ‘Honda’, year: 2010 }

Here, we’ve created an object called car with the properties brand and year and given them values. Now, we can easily utilize dot notation or square-bracket notation if we need to access these characteristics of a car object.

Note that if we attempt to access an object’s unassigned attributes, it will return undefined and (not null). Also see:- JavaScript Get Highest Value in Array of Objects

// JavaScript object named car with some defined properties inside it
const car = {
  brand: "BMW",
  year: 2010,
};

console.log(car);

// displaying JavaScript property using dot notation
console.log(car.brand);
console.log(car.year);

//displaying JavaScript property using bracket notation
console.log(car["brand"]);
console.log(car["year"]);

//trying to access unassigned JavaScript property of car object
console.log(car.name);

Output:-

{ brand: ‘BMW’, year: 2010 }
BMW
2010
BMW
2010
undefined

Add New Property To Object in JavaScript Employing Dot Notation

Dot notation is one of the simplest ways to add, access, or change properties of an existing object in JavaScript.

let obj = {
  //JavaScript object named obj with some define properties inside it
  name: "Alex",
  age: 20,
  major: "Computer Science",
};
console.log("Object just after its creation: ", obj);

obj.roll_no = 1;
obj.secondName = "Siemens";
obj.gender = "Male";
console.log("Object after adding new property: ", obj);

Output:-

Object just after its creation: { name: ‘Alex’, age: 20, major: ‘Computer Science’ }
Object after adding new property: {
name: ‘Alex’,
age: 20,
major: ‘Computer Science’,
roll_no: 1,
secondName: ‘Siemens’,
gender: ‘Male’
}

Add New Property To Object in JavaScript Using of Square Brackets [ ]

Here, we have an empty JavaScript object named obj, and we are using a for-loop to add properties to it in order to illustrate the benefits of square bracket notation.

In the case of dynamic property names, it is obviously advantageous that the property name is an expression that must be assessed during each iteration of the loop depending on the value of I (when i==1, obj[‘num1’] = 1;).

let obj = {}; //Empty JavaScript Object
for (let i = 0; i <= 5; i++) {
  obj["num" + i] = i;
}
console.log(obj);
console.log(obj.num4);
for (let i = 0; i <= 6; i++) {
  console.log(obj["num" + i]);
}

Output:-

{ num0: 0, num1: 1, num2: 2, num3: 3, num4: 4, num5: 5 }
4
0
1
2
3
4
5
undefined

If you enjoyed this post, share it with your friends. Do you want to share more information about the topic discussed above or do you find anything incorrect? Let us know in the comments. Thank you!

Search