{"id":7467,"date":"2022-11-10T14:43:12","date_gmt":"2022-11-10T09:13:12","guid":{"rendered":"https:\/\/innovationm.co\/?p=7467"},"modified":"2022-11-10T15:07:40","modified_gmt":"2022-11-10T09:37:40","slug":"map-method-in-javascript","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/","title":{"rendered":"Map\u00a0Method\u00a0 IN Javascript"},"content":{"rendered":"<p>The map method holds key and value pair, the key can be any datatype.<\/p>\n<p>The map method is the function for every array element and returns the new part. The map method does not change the original array.<\/p>\n<p>We can create a map method passing an Array to a new Map().<\/p>\n<p>We can set the value\u00a0 Map.set().<\/p>\n<p><strong><em><u>Syntax-<\/u><\/em><\/strong><\/p>\n<p>-array.map(callback(currentval,index,arr),thisArg<\/p>\n<p>-Callback- This represents the function that produces the new array .<\/p>\n<p>Currentval-\u00a0 This shows the current element of an array.<\/p>\n<p>Index-\u00a0 This shows the index of the current element.<\/p>\n<p>Arr- it is optional.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-7468\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b1-300x206.png\" alt=\"\" width=\"403\" height=\"277\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b1-300x206.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b1.png 575w\" sizes=\"(max-width: 403px) 100vw, 403px\" \/><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7469\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b2-300x223.png\" alt=\"\" width=\"401\" height=\"298\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b2-300x223.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b2.png 359w\" sizes=\"(max-width: 401px) 100vw, 401px\" \/><\/p>\n<p>Above code, we can get the whole array without changing the original array.<\/p>\n<p>In the second image, we can get only the company name by using company.name.<\/p>\n<p>&nbsp;<\/p>\n<p><strong><em><u>New Map()-<\/u><\/em><\/strong><\/p>\n<p>We can create a Map by passing an Array to the new Map() constructor:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7470\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b3-300x152.png\" alt=\"\" width=\"399\" height=\"202\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b3-300x152.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b3.png 547w\" sizes=\"(max-width: 399px) 100vw, 399px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7471\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b4.png\" alt=\"\" width=\"391\" height=\"199\" \/><\/p>\n<p>By new map() we are able to create a new array.<\/p>\n<p>output-<\/p>\n<p><strong><em><u>Map.set()-<\/u><\/em><\/strong><\/p>\n<p>We can add elements to a map with the set method. Set methods are also used to change the old values.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7472\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b5-300x158.png\" alt=\"\" width=\"408\" height=\"215\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b5-300x158.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b5.png 539w\" sizes=\"(max-width: 408px) 100vw, 408px\" \/><\/p>\n<p>output-<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7473\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b6.png\" alt=\"\" width=\"402\" height=\"201\" \/><\/p>\n<p>Map.get()-<\/p>\n<p>It is used to get the value of a key in a map method.a map object remembers the original insertion order of the keys.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7474\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b7-300x107.png\" alt=\"\" width=\"398\" height=\"142\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b7-300x107.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b7.png 578w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/p>\n<p>output-<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7475\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/b8.png\" alt=\"\" width=\"389\" height=\"176\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The map method holds key and value pair, the key can be any datatype. The map method is the function for every array element and returns the new part. The map method does not change the original array. We can create a map method passing an Array to a new Map(). We can set the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7476,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[360,71,585],"tags":[722,723,224,346,818],"class_list":["post-7467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-mobile","category-mobile-app-development","tag-blog","tag-blogging","tag-java","tag-javascript","tag-map"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Map\u00a0Method\u00a0 IN Javascript - InnovationM - Blog<\/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.innovationm.com\/blog\/map-method-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Map\u00a0Method\u00a0 IN Javascript - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"The map method holds key and value pair, the key can be any datatype. The map method is the function for every array element and returns the new part. The map method does not change the original array. We can create a map method passing an Array to a new Map(). We can set the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-10T09:13:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-10T09:37:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/map-method-in-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1689\" \/>\n\t<meta property=\"og:image:height\" content=\"950\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Map\u00a0Method\u00a0 IN Javascript\",\"datePublished\":\"2022-11-10T09:13:12+00:00\",\"dateModified\":\"2022-11-10T09:37:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/\"},\"wordCount\":214,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/map-method-in-javascript.png\",\"keywords\":[\"blog\",\"blogging\",\"java\",\"JavaScript\",\"map\"],\"articleSection\":[\"JavaScript\",\"Mobile\",\"Mobile App Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/\",\"name\":\"Map\u00a0Method\u00a0 IN Javascript - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/map-method-in-javascript.png\",\"datePublished\":\"2022-11-10T09:13:12+00:00\",\"dateModified\":\"2022-11-10T09:37:40+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/map-method-in-javascript.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/map-method-in-javascript.png\",\"width\":1689,\"height\":950},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/map-method-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Map\u00a0Method\u00a0 IN Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Map\u00a0Method\u00a0 IN Javascript - InnovationM - Blog","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.innovationm.com\/blog\/map-method-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Map\u00a0Method\u00a0 IN Javascript - InnovationM - Blog","og_description":"The map method holds key and value pair, the key can be any datatype. The map method is the function for every array element and returns the new part. The map method does not change the original array. We can create a map method passing an Array to a new Map(). We can set the [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/","og_site_name":"InnovationM - Blog","article_published_time":"2022-11-10T09:13:12+00:00","article_modified_time":"2022-11-10T09:37:40+00:00","og_image":[{"width":1689,"height":950,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/map-method-in-javascript.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Map\u00a0Method\u00a0 IN Javascript","datePublished":"2022-11-10T09:13:12+00:00","dateModified":"2022-11-10T09:37:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/"},"wordCount":214,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/map-method-in-javascript.png","keywords":["blog","blogging","java","JavaScript","map"],"articleSection":["JavaScript","Mobile","Mobile App Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/","url":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/","name":"Map\u00a0Method\u00a0 IN Javascript - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/map-method-in-javascript.png","datePublished":"2022-11-10T09:13:12+00:00","dateModified":"2022-11-10T09:37:40+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/map-method-in-javascript.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/11\/map-method-in-javascript.png","width":1689,"height":950},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/map-method-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Map\u00a0Method\u00a0 IN Javascript"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7467"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7467\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7476"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}