Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
JavaScript: How to Create an Object from Key-Value Pairs
In JavaScript, there are several ways to create objects from key-value pairs. Whether you have individual keys and values or arrays of data, you can build objects dynamically using different approaches.
Using Object Literal Syntax
The simplest way is to create an empty object and assign properties directly:
<!DOCTYPE html>
<html>
<head>
<title>Object Using Key-value Pair</title>
</head>
<body>
<h1 style="color: green;">Welcome to Tutorials Point</h1>
<script type="text/javascript">
let object = {};
let firstKey = 0;
let firstKeyValue = "Hey User...";
let secondKey = 1;
let secondKeyValue = "Welcome To Tutorials Point";
let thirdKey = 2;
let thirdKeyValue = "Start Learning now...";
object[firstKey] = firstKeyValue;
object[secondKey] = secondKeyValue;
object[thirdKey] = thirdKeyValue;
console.log(object);
</script>
</body>
</html>
{0: "Hey User...", 1: "Welcome To Tutorials Point", 2: "Start Learning now..."}
Using Arrays with For Loop
When you have separate arrays for keys and values, you can iterate through them to build the object:
<!DOCTYPE html>
<html>
<head>
<title>Object Using Key-value Pair</title>
</head>
<body>
<h1 style="color: green;">Welcome to Tutorials Point</h1>
<script type="text/javascript">
let object = {};
let keys = ["name", "tagLine", "title"];
let values = ["Welcome To Tutorials Point", "Simply Learning", "Start your learning journey now."];
for (let i = 0; i < keys.length; i++) {
object[keys[i]] = values[i];
}
console.log(object);
</script>
</body>
</html>
{name: "Welcome To Tutorials Point", tagLine: "Simply Learning", title: "Start your learning journey now."}
Using Object.assign() Method
The Object.assign() method copies properties from source objects to a target object. You can use computed property names with square brackets:
<!DOCTYPE html>
<html>
<head>
<title>Object Using Key-value Pair</title>
</head>
<body>
<h1 style="color: green;">Welcome to Tutorials Point</h1>
<script type="text/javascript">
let object = {};
let firstKey = "greeting";
let firstKeyValue = "Hey User...";
let secondKey = "welcome";
let secondKeyValue = "Welcome To Tutorials Point";
let thirdKey = "action";
let thirdKeyValue = "Start Learning now...";
Object.assign(object,
{ [firstKey]: firstKeyValue },
{ [secondKey]: secondKeyValue },
{ [thirdKey]: thirdKeyValue }
);
console.log(object);
</script>
</body>
</html>
{greeting: "Hey User...", welcome: "Welcome To Tutorials Point", action: "Start Learning now..."}
Using Object.fromEntries() Method
For array pairs, Object.fromEntries() provides a clean solution:
<!DOCTYPE html>
<html>
<head>
<title>Object Using Key-value Pair</title>
</head>
<body>
<h1 style="color: green;">Welcome to Tutorials Point</h1>
<script type="text/javascript">
let keyValuePairs = [
["name", "Tutorials Point"],
["type", "Learning Platform"],
["motto", "Simply Learning"]
];
let object = Object.fromEntries(keyValuePairs);
console.log(object);
</script>
</body>
</html>
{name: "Tutorials Point", type: "Learning Platform", motto: "Simply Learning"}
Comparison
| Method | Best For | Browser Support |
|---|---|---|
| Direct Assignment | Simple, individual properties | All browsers |
| For Loop | Parallel arrays of keys/values | All browsers |
| Object.assign() | Merging multiple objects | ES6+ (IE not supported) |
| Object.fromEntries() | Array of [key, value] pairs | ES2019+ (modern browsers) |
Conclusion
JavaScript offers multiple approaches to create objects from key-value pairs. Choose direct assignment for simple cases, loops for parallel arrays, and Object.fromEntries() for elegant handling of entry pairs.
3K+ Views
