How to create an object from the given key-value pairs using JavaScript ?

12 Jan, 2022
In this article, we will learn to create an object from the given key-value pairs using JavaScript.
Problem Statement: You are given different key-value pair(s), in any form like an array, and using those key-value pairs you need to construct an object which will have those key-value pair(s).
Object{} => Object {
                         "0" : "Geeksforgeeks",
                         "1" : "Hello JavaScript",
                         "2" : "Hello React"
                   }

Approach: We first need to declare an empty object, with any suitable name, then by using various JavaScript techniques and methods, we need to insert the given key-value pairs into the previously created empty object.
Let us first try to understand that how we could create an empty object in JavaScript. Creating an empty object in JavaScript could be achieved in several ways. 
Example 1:
let object = {};
console.log(object);
Output:
{}
Example 2:
let object = new Object();
console.log(object);
Output:
{}
Now after creating the object now we are going to analyze the approaches through which we could add the given key-value pair (s) in that previously created empty object.
Following are some approaches to achieve the mentioned target.
Example 1: This is the simplest as well as the native approach. In this approach, we will directly append the key-value pair(s) in that previously created empty object.
Javascript
<script>    let object = {};  let firstKey = 0;  let firstKeyValue = "GeeksforGeeks";  let secondKey = 1;  let secondKeyValue = "Hello JavaScript";  let thirdKey = 2;  let thirdKeyValue = "Hello React";    object[firstKey] = firstKeyValue;  object[secondKey] = secondKeyValue;  object[thirdKey] = thirdKeyValue;  console.log(object);</script>
Output:
{ "0": "GeeksforGeeks", "1": "Hello JavaScript", "2": "Hello React" }
Example 2: In this second approach, we will use Object.assign() method which is the part of the Object superclass. This method will copy all the values and will append those values in the object as key-value pair(s).
Javascript
<script>   let object = {};  let firstKey = 0;  let firstKeyValue = "GeeksforGeeks";  let secondKey = 1;  let secondKeyValue = "Hello JavaScript";  let thirdKey = 2;  let thirdKeyValue = "Hello React";    Object.assign(object, { [firstKey]: firstKeyValue });  Object.assign(object, { [secondKey]: secondKeyValue });  Object.assign(object, { [thirdKey]: thirdKeyValue });    console.log(object);</script>
Output:
{ "0": "GeeksforGeeks", "1": "Hello JavaScript", "2": "Hello React" }
Example 3: In this third approach, we will consider that our keys and their corresponding values are present in an array. We will first run a for loop over the array, and then we will dynamically append our data from the arrays into an empty object as key-value pair(s).
Javascript
<script>    let object={};  let keys = [0, 1, 2];  let values = ["GeeksforGeeks",     "Hello JavaScript", "Hello React"];  for (let i = 0; i < keys.length; i++) {    object[keys[i]] = values[i];  }  console.log(object);</script>
Output:
{ "0": "GeeksforGeeks", "1": "Hello JavaScript", "2": "Hello React" }
javascript-object
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?