{"id":35,"date":"2023-09-10T15:33:11","date_gmt":"2023-09-10T10:03:11","guid":{"rendered":"https:\/\/successrouter.com\/tech\/?p=35"},"modified":"2024-01-28T13:31:30","modified_gmt":"2024-01-28T08:01:30","slug":"javascript-map-method","status":"publish","type":"post","link":"https:\/\/successrouter.com\/tech\/javascript-map-method\/","title":{"rendered":"JavaScript map method"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"35\" class=\"elementor elementor-35\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f36d27c e-flex e-con-boxed e-con e-parent\" data-id=\"7f36d27c\" data-element_type=\"container\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53f203b4 elementor-widget elementor-widget-text-editor\" data-id=\"53f203b4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.20.0 - 10-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<!-- wp:paragraph -->\n<p>Lets <span style=\"font-size: revert; color: initial;\">see how javascript map method works using some examples, some real world problem, Interview question and lastly there is a task for you \ud83d\ude42<\/span><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>This is an array method which iterate over the array, map values and then return a new array.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><em>Let&#8217;s see the syntax of same<\/em><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><strong>Array.map(callbackFunction(currentValue, [index], [arr]);<\/strong><\/p>\n<!-- \/wp:paragraph --><!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li>callback function &#8211; the method that will do the work<\/li>\n<!-- \/wp:list-item --><!-- wp:list-item -->\n<li>currentValue &#8211; the current value of array element<\/li>\n<!-- \/wp:list-item --><!-- wp:list-item -->\n<li>index &#8211; the current index of element<\/li>\n<!-- \/wp:list-item --><!-- wp:list-item -->\n<li>arr &#8211; the reference of the array<\/li>\n<!-- \/wp:list-item --><!-- wp:list-item -->\n<li>And finally this will return a <strong>new mapped array<\/strong><\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list --><!-- wp:paragraph -->\n<p><em>Let&#8217;s see an example<\/em><\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>var newArr = arr.map(function(value, index, arr){<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(&#8220;value: &#8220;+ value);<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(&#8220;index:&#8221;+index);<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(arr);<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return 2 * value;<\/p>\n<!-- \/wp:paragraph -->\n<p>});<\/p>\n<!-- wp:paragraph -->\n<p>\u00a0<\/p>\n<!-- \/wp:paragraph -->\n<p>console.log(newArr);<\/p>\n<p><em>This will print below things<\/em><\/p>\n<!-- wp:image {\"align\":\"center\",\"id\":39,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" class=\"wp-image-39\" src=\"https:\/\/onecoderview.files.wordpress.com\/2020\/06\/image.png?w=78\" alt=\"\" \/><\/figure>\n<!-- \/wp:image -->\n<p><em>So all the element and their index got printed, and finally a new array has been returned where each element is twice of original array element.<\/em><\/p>\n<!-- wp:paragraph -->\n<p>\u00a0<\/p>\n<!-- \/wp:paragraph -->\n<p><strong>Some real world problem which can be solved using map method<\/strong><\/p>\n<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li>We have an array of scores and we need to convert that into percentages<\/li>\n<!-- \/wp:list-item --><!-- wp:list-item -->\n<li>We have an array of numbers but all are in form of string, something like this\n<p>Arr = [\u201c1\u201d, \u201c2\u201d, \u201c3\u201d] -&gt; so we can parse each and every element to int and then return<\/p>\n<\/li>\n<!-- \/wp:list-item --><!-- wp:list-item -->\n<li>Adding extra element on already present json array<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n<p><strong>Interview questions?<\/strong><\/p>\n<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li>What is the difference between map and filter?<\/li>\n<!-- \/wp:list-item --><!-- wp:list-item -->\n<li>When not to use map method<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li>Whenever we don\u2019t need the return value of map. Its better to use foreach at that time<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list --><\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list --><!-- wp:paragraph {\"fontSize\":\"normal\"} -->\n<p class=\"has-normal-font-size\"><strong>Task for you<\/strong><\/p>\n<!-- \/wp:paragraph -->\n<p>var arr = [&#8217;10&#8217;, &#8217;10&#8217;, &#8217;10&#8217;];<\/p>\n<p>arr = arr.map(parseInt)<\/p>\n<p>console.log(arr)<\/p>\n<p>Write down in comment box \u2013 what will be the output of this. And let\u2019s discuss there.<\/p>\n<!-- wp:paragraph -->\n<p>\u00a0<\/p>\n<!-- \/wp:paragraph -->\n<p><strong>Video tutorial for same<\/strong><\/p>\n<!-- wp:embed {\"url\":\"https:\/\/www.youtube.com\/watch?v=tnhGfBSfRqQ\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\">\n<div class=\"wp-block-embed__wrapper\">https:\/\/www.youtube.com\/watch?v=tnhGfBSfRqQ<\/div>\n<\/figure>\n<!-- \/wp:embed -->\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lets see how javascript map method works using some examples, some real world problem, Interview question and lastly there is a task for you \ud83d\ude42 This is an array method which iterate over the array, map values and then return a new array. \u00a0 Let&#8217;s see the syntax of same Array.map(callbackFunction(currentValue, [index], [arr]); Let&#8217;s see&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[5,4],"_links":{"self":[{"href":"https:\/\/successrouter.com\/tech\/wp-json\/wp\/v2\/posts\/35"}],"collection":[{"href":"https:\/\/successrouter.com\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/successrouter.com\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/successrouter.com\/tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/successrouter.com\/tech\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":7,"href":"https:\/\/successrouter.com\/tech\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/successrouter.com\/tech\/wp-json\/wp\/v2\/posts\/35\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/successrouter.com\/tech\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/successrouter.com\/tech\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/successrouter.com\/tech\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}