{"id":367,"date":"2023-05-22T06:54:45","date_gmt":"2023-05-22T06:54:45","guid":{"rendered":"https:\/\/www.devopsconsulting.in\/blog\/?p=367"},"modified":"2023-05-22T06:54:46","modified_gmt":"2023-05-22T06:54:46","slug":"javascript-map","status":"publish","type":"post","link":"https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/","title":{"rendered":"JavaScript Map"},"content":{"rendered":"\n

In JavaScript, Map<\/code> is a built-in data structure introduced in ECMAScript 2015 (ES6) that allows you to store key-value pairs. Unlike JavaScript objects, Map<\/code> allows any type of data to be used as keys, including objects, functions, and primitives. Here’s an overview of how to use Map<\/code> in JavaScript:<\/p>\n\n\n\n

Creating a Map:<\/strong><\/p>\n\n\n\n

You can create an empty Map<\/code> using the new Map()<\/code> constructor or initialize it with an array of key-value pairs using the new Map(entries)<\/code> constructor. Here’s an example:<\/p>\n\n\n\n

const map = new Map(); \/\/ Empty Map\n\nconst entries = [\n  ['key1', 'value1'],\n  ['key2', 'value2'],\n  ['key3', 'value3']\n];\nconst mapWithEntries = new Map(entries);\n\nconsole.log(map); \/\/ Output: Map {}\nconsole.log(mapWithEntries); \/\/ Output: Map { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }<\/code><\/pre>\n\n\n\n
Working with Map Entries:<\/strong><\/p>\n\n\n\n
You can add, retrieve, and delete entries in a Map<\/strong> using various methods:<\/p>\n\n\n\n
    \n
  • set(key, value):<\/strong> Adds a new key-value pair to the Map<\/strong>.<\/li>\n\n\n\n
  • get(key):<\/strong> Retrieves the value associated with the specified key.<\/li>\n\n\n\n
  • has(key):<\/strong> Checks if a key exists in the Map<\/strong>.<\/li>\n\n\n\n
  • delete(key):<\/strong> Removes a key-value pair from the Map<\/strong>.<\/li>\n\n\n\n
  • size:<\/strong> Returns the number of key-value pairs in the Map<\/strong>.<\/li>\n<\/ul>\n\n\n\n
    Here’s an example :<\/strong><\/p>\n\n\n\n
      const [users, setUsers] = useState([]);<\/code><\/pre>\n\n\n\n
    This line declares a state variable called users<\/code> using the useState<\/code> hook. The users<\/code> variable holds an array of user data, and setUsers<\/code> is a function used to update the value of users<\/code>. The initial value of users<\/code> is an empty array []<\/code>.<\/p>\n\n\n\n
    \n<tbody>\r\n                    {users.map((user,index)=>(\r\n                        <tr key={user.id}>\r\n                            <td>{++index}<\/td>\r\n                            <td>{user.name}<\/td>\r\n                            <td>{user.email}<\/td>\r\n                            <td>\r\n                                \r\n                                \r\n                            <\/td>\r\n                        <\/tr>\r\n                    ))}\r\n                <\/tbody><\/code><\/pre>\n\n\n\n
    This section represents the table body (<tbody><\/code><\/strong>) of the table. It uses the map<\/strong><\/code> function to iterate over the users<\/strong><\/code> array and generate a table row (<tr><\/code>) <\/strong>for each user object.<\/p>\n\n\n\n
    Within the map<\/strong><\/code> function, each user is represented by the user<\/strong><\/code> variable, and the index is represented by the index<\/strong><\/code> variable. The key<\/strong><\/code> prop is set to user.id<\/strong><\/code> to provide a unique identifier for each table row.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In JavaScript, Map is a built-in data structure introduced in ECMAScript 2015 (ES6) that allows you to store key-value pairs. Unlike JavaScript objects, Map allows any type… <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[75],"class_list":["post-367","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-map-in-javascript"],"yoast_head":"\nJavaScript Map - DevOps Consulting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Map - DevOps Consulting\" \/>\n<meta property=\"og:description\" content=\"In JavaScript, Map is a built-in data structure introduced in ECMAScript 2015 (ES6) that allows you to store key-value pairs. Unlike JavaScript objects, Map allows any type...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/\" \/>\n<meta property=\"og:site_name\" content=\"DevOps Consulting\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-22T06:54:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-22T06:54:46+00:00\" \/>\n<meta name=\"author\" content=\"Abhishek Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/javascript-map\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/javascript-map\\\/\"},\"author\":{\"name\":\"Abhishek Singh\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\"},\"headline\":\"JavaScript Map\",\"datePublished\":\"2023-05-22T06:54:45+00:00\",\"dateModified\":\"2023-05-22T06:54:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/javascript-map\\\/\"},\"wordCount\":241,\"commentCount\":1,\"keywords\":[\"Map in JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/javascript-map\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/javascript-map\\\/\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/javascript-map\\\/\",\"name\":\"JavaScript Map - DevOps Consulting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#website\"},\"datePublished\":\"2023-05-22T06:54:45+00:00\",\"dateModified\":\"2023-05-22T06:54:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/javascript-map\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/\",\"name\":\"DevOps Consulting\",\"description\":\"DevOps Consulting | SRE Consulting | DevSecOps Consulting | MLOps Consulting\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\",\"name\":\"Abhishek Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"caption\":\"Abhishek Singh\"},\"description\":\"I\u2019m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I\u2019ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains: \u2022 DevOps School \u2013 Tech blogs and tutorials \u2022 Holiday Landmark \u2013 Travel stories and guides \u2022 Stocks Mantra \u2013 Stock market strategies and tips \u2022 My Medic Plus \u2013 Health and fitness guidance \u2022 TrueReviewNow \u2013 Honest product reviews \u2022 Wizbrand \u2013 SEO and digital tools for businesses I\u2019m also exploring the fascinating world of Quantum Computing.\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/author\\\/abhishek\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Map - DevOps Consulting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Map - DevOps Consulting","og_description":"In JavaScript, Map is a built-in data structure introduced in ECMAScript 2015 (ES6) that allows you to store key-value pairs. Unlike JavaScript objects, Map allows any type...","og_url":"https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/","og_site_name":"DevOps Consulting","article_published_time":"2023-05-22T06:54:45+00:00","article_modified_time":"2023-05-22T06:54:46+00:00","author":"Abhishek Singh","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Abhishek Singh","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/#article","isPartOf":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/"},"author":{"name":"Abhishek Singh","@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f"},"headline":"JavaScript Map","datePublished":"2023-05-22T06:54:45+00:00","dateModified":"2023-05-22T06:54:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/"},"wordCount":241,"commentCount":1,"keywords":["Map in JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/","url":"https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/","name":"JavaScript Map - DevOps Consulting","isPartOf":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/#website"},"datePublished":"2023-05-22T06:54:45+00:00","dateModified":"2023-05-22T06:54:46+00:00","author":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.devopsconsulting.in\/blog\/javascript-map\/"]}]},{"@type":"WebSite","@id":"https:\/\/www.devopsconsulting.in\/blog\/#website","url":"https:\/\/www.devopsconsulting.in\/blog\/","name":"DevOps Consulting","description":"DevOps Consulting | SRE Consulting | DevSecOps Consulting | MLOps Consulting","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.devopsconsulting.in\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f","name":"Abhishek Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","caption":"Abhishek Singh"},"description":"I\u2019m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I\u2019ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains: \u2022 DevOps School \u2013 Tech blogs and tutorials \u2022 Holiday Landmark \u2013 Travel stories and guides \u2022 Stocks Mantra \u2013 Stock market strategies and tips \u2022 My Medic Plus \u2013 Health and fitness guidance \u2022 TrueReviewNow \u2013 Honest product reviews \u2022 Wizbrand \u2013 SEO and digital tools for businesses I\u2019m also exploring the fascinating world of Quantum Computing.","url":"https:\/\/www.devopsconsulting.in\/blog\/author\/abhishek\/"}]}},"_links":{"self":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/comments?post=367"}],"version-history":[{"count":2,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/367\/revisions"}],"predecessor-version":[{"id":369,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/367\/revisions\/369"}],"wp:attachment":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/media?parent=367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/categories?post=367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/tags?post=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}