Sling Academy
Home/JavaScript/JavaScript: Create an Object from Arrays of Keys and Values

JavaScript: Create an Object from Arrays of Keys and Values

Last updated: March 14, 2023

This succinct, straightforward article walks you through 5 different approaches to creating an object from 2 arrays of keys and values in JavaScript. The main point here is to make sure the keys and values in the 2 arrays are aligned in terms of their positions, meaning that the first key in the keys array should correspond to the first value in the values array, and so on.

Using Object.fromEntries()

The Object.fromEntries() method takes a list of key-value pairs and returns a new object with those properties. We can make use of it to construct an object based on 2 given arrays.

Examples:

let keys = ['name', 'age', 'gender'];
let values = ['Sling Academy', 325, 'unknown'];

let obj = Object.fromEntries(
    keys.map((key, index) => [key, values[index]]));

console.log(obj);

Output:

{ name: 'Sling Academy', age: 325, gender: 'unknown' }

Using a traditional for loop

The for loop is a powerful tool for many problems, and in the context of this article, it is also true.

Example:

// the array of keys
let keys = ['a', 'b', 'c'];

// the array of values
let values = [1, 2, 3];

// Create an empty object
let obj = {};

for (let i = 0; i < keys.length; i++) {
  obj[keys[i]] = values[i];
}

console.log(obj);

Output:

{ a: 1, b: 2, c: 3 }

Using reduce()

Example:

let keys = ['a', 'b', 'c'];
let values = [1, 2, 3];
let obj = keys.reduce((acc, key, index) => {
  acc[key] = values[index];
  return acc;
}, {});

console.log(obj);

Output:

{ a: 1, b: 2, c: 3 }

See also: Ways to Compare 2 Objects in JavaScript

Using Object.assign()

This method is quite similar to the first method; only the difference is that we use the Object.assign() method.

Example:

// the array of keys
let keys = ['a', 'b', 'c'];

// the array of values
let values = [1, 2, 3];

let obj = Object.assign(
  {},
  ...keys.map((key, index) => ({ [key]: values[index] }))
);

console.log(obj);

Output:

{ a: 1, b: 2, c: 3 }

Using forEach()

Example:

// the array of keys
let keys = ['a', 'b', 'c'];

// the array of values
let values = [1, 2, 3];

let obj = {};

// Iterate over the keys array and assign properties to the object
keys.forEach((key, index) => {
  obj[key] = values[index];
});

console.log(obj);

Output:

{ a: 1, b: 2, c: 3 }

See also: The Modern JavaScript Objects Cheat Sheet

Afterword

We’ve explored more than one technique to build an object from 2 arrays of keys and values. Which one will you use in your project? Please leave your opinion in the comment section. Happy coding & have a nice day!

Next Article: 3 Ways to Compare 2 Objects in JavaScript

Previous Article: JavaScript: Checking if a Key/Value Exists in an Object

Series: Working with Objects in JavaScript

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration