How to Add Property to Array of Objects in JavaScript

JavaScript has a built-in data structure that can store multiple values of different data types. If we have multiple variables, we can group them into an array. We get the value of every element by iterating that array using the for loop or forEach() method.

Syntax of Array

const array = [value1,value2,value3,...];

How to print array in JavaScript

To print an array on the console in JavaScript, use the console.log() method. To print the element one by one, use the forEach() method.

const arr = [1, "sumit", 45, 32];

console.log("Printing the whole array")
console.log(arr)

console.log("Printing one by one element of the whole array")
arr.forEach((value) => {
   console.log(value);
});

Output

Printing the whole array
[ 1, 'sumit', 45, 32 ]

Printing one by one element of the whole array
1
sumit
45
32

In the above example, we store the different data types in the array. We can get value by providing an index of that value. We can also iterate an array by for loop, forEach() method, map() method, etc.

How to add properties to an array in JavaScript

To add properties to an array in JavaScript, create a new property to the existing array and assign a value to that property. In short, use the array.property = value syntax. To add a custom property to an array, use the array.property = value syntax. It is used if we need to add a property at the end of an array.

Syntax

array.property = value

Example

const arr = [1, "sumit", 45, 32];

arr.name = "Richard"
arr.age = 38

console.log(arr);
console.log(arr["name"], arr["age"]);

Output

[ 1, 'sumit', 45, 32, name: 'Richard', age: 38 ]

Richard 38

You can see that we added key-value pairs to the array.

JavaScript Object and its properties

Object in JavaScript is a collection of properties, and a property is an association between a name (or key) and a value. So if we have one object with a different kind of property, we need to declare different variables for this, which is not a good way.

So using the object, we add multiple properties into one object, so it’s easy to read and modify. It also stores different types of value inside the properties.

Syntax

Data_type object_name = {
    Property_name1 : value,
    Property_name2 : value
}

Example

const bike = {
 name: "yamaha",
 color: "red",
 average: 54,
 speed: 70,
 gear: 4
}

console.log(bike["name"]);
console.log(bike["color"])

Output

yamaha
red

In the above example, we declare a bike as an object, and it has many different properties like name, color, average, speed, etc. We can access a value by its property name. We can see the above two consoles, which show how we access the objects.

How to add property to Array of Objects in JavaScript

To addproperty to an Array of Objects in JavaScript, use the built-in push() method. The push() is a built-in method that adds an element at the end of the array.

const arr = [{
 car: 'bmw'
}, {
 car: 'audi'
}, {
 car: 'mercedez'
}]
arr.push({
 car: 'toyota'
})

console.log(arr)

Output

[
   { car: 'bmw' },
   { car: 'audi' },
   { car: 'mercedez' },
   { car: 'toyota' }
]

We added an object to the array of objects using the push() method.

How to Add Property to Object in JavaScript

To add a property to an Object in JavaScript, use the dot(.) operator. The dot operator grants access to the data inside the object.

If we declare the objects later, we need to add other properties to the object using the dot operator. If we add other properties, which already exist in the object, it will overwrite those properties.

Example

const laptop = {
 name: "dell",
 system: "i5 7th",
}

laptop.color = "black"
laptop.system = "i7 3th"

console.log(laptop);

Output

{ name: 'dell', system: 'i7 3th', color: 'black' }

In the above example, we declare a laptop object with two properties. After that, we declare another property color, and then we declare system property that already exists so that it will overwrite that property.

That’s it for this tutorial.

See also

Javascript Add to Object: Insert Key/Value in JavaScript Object

How to Check If a Variable is an Array in JavaScript

How to Append Element to Array in JavaScript

Leave a Comment