JavaScript Array Push Key Value Pair
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of JavaScript array push key value pair, an array is a finite collection of a homogenous element. In the key-value pair in an array, keys are indexes and values are elements.
We will use two different methods for array key-value pair by using for loop and by using Map() method.
Array map() method execute a given function on every element from an array and returns a new array.
Step By Step Guide On JavaScript Array Push Key Value Pair :-
Method 1
In this method, we are going to use for loop to get the key-value pair.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> JavaScript array push key value pair </title>
<style>
body {
font-family : 'Lucida Sans', Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> JavaScript array push key value pair </h3>
<script>
var array1 = [ "key1" , "key2" ,"key3" , "key4" ,"key5" ] ;
var array2 = [ 1 , 3 , 5 , 7 , 9 ] ;
var result = { } ;
for ( var i = 0 ; i <array1.length ; i++ ) {
result[ array1 [ i ] ] = array2 [ i ] ;
}
console.log ( result ) ;
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- We created two arrays, one with keys and one with values
- Create an empty object result
- Using the for loop for store the key value pair into that empty array.
- Using console.log() to display it
Method 2
In this method, we are going to use the JavaScript map() method.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> JavaScript array push key value pair </title>
<style>
body {
font-family : 'Lucida Sans', Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> JavaScript array push key value pair </h3>
<script>
let array = new Map();
array.set('k1', 10)
array.set('k2', 20)
array.set('k3', 30)
array.set('k4', 40)
array.set('k5', 50)
console.log(array)
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- First create new array with new map() method as map constructor.
- Set() method to add key and value pair.
- Using console.log() to display the array.
- Here he can also clear or delete any element.
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to array push key-value pair using JavaScript.
I hope this article on JavaScript array push key value pair helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
