Create JavaScript key value array pairs using easy examples

This is by far the most simple tutorial I will be writing. What forced me to write this guide on creating JavaScript key value array pairs, were some comments I received in other Js tutorials.

If you are a Js developer, you might need these scripts probably most of the time. Be it a Js newbie or experienced developer, you will need this guide at some or the other points of life.

Approach :

This post will show multiple ways to define key value array. Choose one that suits you the best, based on the use case.

To give examples, we will be creating an array of students. We will push some student details in it using javascript array push.

We will verify these changes by looping over the array again and printing the result. Basically we will use javascript array get key value pair method.

1. Using an empty JavaScript key value array

var students = [];

students.push({id:120,name:‘Kshitij’,age:20});

students.push({id:130,name:‘Rajat’,age:31});

 

for(i=0;i<students.length;i++){

console.log(“ID:- “ + students[i].id + ” Name:- “ + students[i].name + ” Age:- “ + students[i].age);

}

[su_label type=”info”]Also read: [/su_label] Best JavaScript Frameworks trending now

2. Using Javascript Object

In JavaScript, Objects are most important data types. They are widely used in modern Javascript to copy data also.

Objects are different from primitive data-types ( Number, String, Boolean, null, undefined, and symbol ).

This method shows how to combine two different arrays into one array of key-value maps.

Please note that here the assumption is that key-value pairs lie at the same indexes in both existing arrays.

    // An array of keys 
    var keys = [1, 2, 3]; 
      
    // An array of values 
    var values = ["MTC", "MyTrashCode", "Computers"]; 
      
    // Object created 
    var obj = {}; 
      
    // Using loop to insert key 
    // value in Object 
    for(var i = 0; i < keys.length; i++){ 
        obj[keys[i]] = values[i]; 
    } 
      
    // Printing object 
    for (var key of Object.keys(obj)) { 
        document.write(key + " => " + obj[key] + "</br>") 
    }

[su_label type=”info”]Also read: [/su_label] 5 Best IDE for React and ReactJs text editors

3. Using Javascript Maps

Map in javascript is a collection of key-value pairs. It can hold both the object or primitive type of key-values. It returns the key, value pair in the same order as inserted.

  // An array of keys 
   var keys = [1, 2, 3]; 

  // An array of values 
  var values = ["MTC", "MyTrashCode", "Computers"]; 
      
    // Map created 
    var map = new Map(); 
      
    // Using loop to insert key 
    // value in map 
    for(var i = 0; i < keys.length; i++){ 
        map.set(keys[i], values[i]); 
    } 
      
    // Printing 
    for (var key of map.keys()) { 
        document.write(key + " => " + map.get(key) + "</br>") 
    }

Comment below and let me know if the guide helped you.