We can add objects into an array using different JavaScript methods, and below are some examples.

Using push()

The push() function adds an object at the end of the array.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Add an Object Inside an Array in JavaScript?</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<script>
	var cities = [
	    { id: 1, name: "Patna", state: "Bihar" },
	    { id: 2, name: "Gaya", state: "Bihar" },
	    { id: 3, name: "Bangalore", state: "Karnataka" },
	    { id: 4, name: "Bhopal", state: "Madhya Pradesh" },
	    { id: 5, name: "Agra", state: "Utter Pradesh" },
	    { id: 6, name: "Kanpur", state: "Utter Pradesh" },
	    { id: 7, name: "Kannur", state: "Kerala" },
	];

	cities.push({ id: 8, name: "Hyderabad", state: "Telangana" });

	console.log(cities);
</script>
</body>
</html>

Output:

Using unshift()

The unshift() function adds an object at the start of the array.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Add an Object Inside an Array in JavaScript?</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<script>
	var cities = [
	    { id: 1, name: "Patna", state: "Bihar" },
	    { id: 2, name: "Gaya", state: "Bihar" },
	    { id: 3, name: "Bangalore", state: "Karnataka" },
	    { id: 4, name: "Bhopal", state: "Madhya Pradesh" },
	    { id: 5, name: "Agra", state: "Utter Pradesh" },
	    { id: 6, name: "Kanpur", state: "Utter Pradesh" },
	    { id: 7, name: "Kannur", state: "Kerala" },
	];

	cities.unshift({ id: 0, name: "Hyderabad", state: "Telangana" });

	console.log(cities);
</script>
</body>
</html>

Output:

Using splice()

The splice() function allows inserting an object at any index.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Add an Object Inside an Array in JavaScript?</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<script>
	var cities = [
	    { id: 1, name: "Patna", state: "Bihar" },
	    { id: 3, name: "Bangalore", state: "Karnataka" },
	    { id: 4, name: "Bhopal", state: "Madhya Pradesh" },
	    { id: 5, name: "Agra", state: "Utter Pradesh" },
	    { id: 6, name: "Kanpur", state: "Utter Pradesh" },
	    { id: 7, name: "Kannur", state: "Kerala" },
	];

	cities.splice(1, 0, { id: 2, name: "Hyderabad", state: "Telangana" });

	console.log(cities);
</script>
</body>
</html>

Output:

Description of Functions

  • push(): Adds an object to the end of the array
  • unshift(): Adds an object to the beginning of the array
  • splice(): Adds an object at a specific index without removing others