Add an Object to an Array in JavaScript
Adding an object to an array in JavaScript entails incorporating the object as an element within the array. This process is fundamental for dynamically managing data structures, enabling flexible storage and manipulation of complex data collections within the application.
Table of Content
- Using JavaScript Array push() Method
- Using JavaScript Array splice() Method
- Using JavaScript Array unshift() Method
- Using array concatenation (concat)
- Using JavaScript Array spread operator
Using JavaScript Array push() Method
The push() method is used to add one or multiple elements to the end of an array. It returns the new length of the array formed. An object can be inserted by passing the object as a parameter to this method. The object is hence added to the end of the array.
Syntax:
array.push(objectName)
Example: In this example, we will use the push() method to add an object to the array in JavaScript.
function pushFunction() {
list.push("Four", "Five"
);
console.log(list);
}
let list = ["One", "Two", "Three"];
pushFunction();
Output
[ 'One', 'Two', 'Three', 'Four', 'Five' ]
Using JavaScript Array splice() Method
The splice method is used to both remove and add elements from a specific index. An object can only be added without deleting any other element by specifying the second parameter to 0.
Syntax:
arr.splice(index, 0, objectName)
Example: In this example, we will add new objects to the array using the splice() method in Javascript.
function spliceFunction() {
list.splice(2, 0, "Angular", "SQL");
console.log(list);
}
let list = ["HTML", "CSS", "JavaScript"];
spliceFunction();
Output
[ 'HTML', 'CSS', 'Angular', 'SQL', 'JavaScript' ]
Using JavaScript Array unshift() Method
The unshift() method is used to add one or multiple elements to the beginning of an array. It returns the length of the new array formed. An object can be inserted by passing the object as a parameter to this method. The object is hence added to the beginning of the array.
Syntax:
arr.unshift( object );
Example: In this example, we will be adding new objects in the array using the unshift() method in JavaScript.
function unshiftFunction() {
list.unshift("for", "Beginner",);
console.log(list);
}
let list = ["Beginner", "Contribute", "Explore"];
unshiftFunction();
Output
[ 'for', 'Beginner', 'Beginner', 'Contribute', 'Explore' ]
Using array concatenation (concat)
This approach involves utilizing the concat method, which combines two arrays non-destructively. It produces a new array containing all elements from the original arrays without modifying them.
Syntax:
newArray = array.concat(obj);
Example: In this example, we will be adding new objects in the array using the concat method in javascript.
function addObj() {
list = ["Java", "C++"].concat(list);
console.log(list);
}
let list = ["Python", "C#", "GO"];
addObj();
Output
[ 'Java', 'C++', 'Python', 'C#', 'GO' ]
Using JavaScript Array spread operator
The spread operator (…) is used to expand elements of an iterable (like an array) into places where multiple elements are expected. We can utilize the spread operator to add an object to an array.
Example: In this example the addObject function creates an object obj with properties name and age, then adds it to the arr array using the spread operator (…).
function addObject() {
let obj = { name: "John", age: 30 };
let arr = ["Alice", "Bob"];
arr = [...arr, obj];
console.log(arr);
}
addObject();
Output
[ 'Alice', 'Bob', { name: 'John', age: 30 } ]