Map an Array to an Object

JavaScriptJavaScriptBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will explore how to map an object array to an object using the provided mapping functions. We will use the Array.prototype.reduce() method to map the array, and the mapKey and mapValue functions to map the keys and values of the resulting object respectively. By the end of this lab, you will have a better understanding of how to transform data structures in JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") subgraph Lab Skills javascript/variables -.-> lab-28525{{"`Map an Array to an Object`"}} javascript/data_types -.-> lab-28525{{"`Map an Array to an Object`"}} javascript/arith_ops -.-> lab-28525{{"`Map an Array to an Object`"}} javascript/comp_ops -.-> lab-28525{{"`Map an Array to an Object`"}} javascript/higher_funcs -.-> lab-28525{{"`Map an Array to an Object`"}} javascript/destr_assign -.-> lab-28525{{"`Map an Array to an Object`"}} end

How to Map an Array to an Object in JavaScript

To map an object array to an object in JavaScript, follow these steps:

  1. Open the Terminal/SSH and type node to start practicing coding.
  2. Use Array.prototype.reduce() to map the array to an object.
  3. Use the mapKey parameter to map the keys of the object and the mapValue parameter to map the values.

Here's an example code snippet that demonstrates how to use the objectify function to map an object array to an object:

const objectify = (arr, mapKey, mapValue = (i) => i) =>
  arr.reduce((acc, item) => {
    acc[mapKey(item)] = mapValue(item);
    return acc;
  }, {});

You can then use the objectify function to map an object array to an object in the following ways:

const people = [
  { name: "John", age: 42 },
  { name: "Adam", age: 39 }
];

// Map the object array to an object using the name property as keys
objectify(people, (p) => p.name.toLowerCase());
// Output: { john: { name: 'John', age: 42 }, adam: { name: 'Adam', age: 39 } }

// Map the object array to an object using the name property as keys and the age property as values
objectify(
  people,
  (p) => p.name.toLowerCase(),
  (p) => p.age
);
// Output: { john: 42, adam: 39 }

Summary

Congratulations! You have completed the Map an Array to an Object lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like