{"id":197760,"date":"2021-03-09T17:00:17","date_gmt":"2021-03-09T14:00:17","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/"},"modified":"2021-03-09T17:00:17","modified_gmt":"2021-03-09T14:00:17","slug":"how-to-manipulate-javascript-arrays-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/","title":{"rendered":"#How to Manipulate JavaScript Arrays \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2645d5977d8\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2645d5977d8\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/#Declaring_an_Array\" >Declaring an Array<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/#Accessing_Array_Values\" >Accessing Array Values<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/#Adding_Items_to_Arrays\" >Adding Items to Arrays<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/#Removing_Items_from_Arrays\" >Removing Items from Arrays<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/#Iterating_over_Arrays\" >Iterating over Arrays<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/#Mapping_Arrays\" >Mapping Arrays<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/#Filtering_Arrays\" >Filtering Arrays<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/#Utility_Methods\" >Utility Methods<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-manipulate-javascript-arrays-cloudsavvy-it\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Manipulate Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> Arrays \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9816\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/38b865d8f78e872a08747837d13626ae\/p\/uploads\/2021\/02\/c123ee3a.jpg\" alt=\"Illustration showing the JavaScript logo\" width=\"1602\" height=\"902\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>JavaScript arrays are data structures which let you store multiple values under a single variable name. Arrays are a type of object. They come with several utility methods you can use to manipulate their data.<\/p>\n<p>Arrays in JavaScript have very relaxed restrictions around what you can place within them. They have neither a fixed length nor a specific type. They behave more like a list of values than the classical arrays of strongly typed languages.<\/p>\n<h2 id=\"declaring-an-array\"><span class=\"ez-toc-section\" id=\"Declaring_an_Array\"><\/span>Declaring an Array<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JavaScript arrays use squared brackets. You can initialize them empty, or add a <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/watch-movies-tv-seriess\/\" data-internallinksmanager029f6b8e52c=\"8\" title=\"Watch Movies &amp; TV Series\" target=\"_blank\" rel=\"noopener\">series<\/a> of default values. Values are separated by commas. You may use any valid JavaScript value, such as a string, an integer, an object, or another array.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\">let emptyArray <span class=\"sy0\">=<\/span> <span class=\"br0\">[<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n\u00a0\nlet filledArray <span class=\"sy0\">=<\/span> <span class=\"br0\">[<\/span><span class=\"st0\">\"hello\"<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">123<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">{<\/span>foo<span class=\"sy0\">:<\/span> <span class=\"st0\">\"bar\"<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">[<\/span><span class=\"st0\">\"x\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"y\"<\/span><span class=\"br0\">]<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"accessing-array-values\"><span class=\"ez-toc-section\" id=\"Accessing_Array_Values\"><\/span>Accessing Array Values<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You retrieve a value from an array by specifying the index that you want to access. Array indexes are numbered from <code>0<\/code>. Use the square bracket syntax to define the array index to retrieve.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\">let myArray <span class=\"sy0\">=<\/span> <span class=\"br0\">[<\/span><span class=\"st0\">\"foo\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"bar\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"example\"<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ logs \"bar\"<\/span>\nconsole.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>myArray<span class=\"br0\">[<\/span><span class=\"nu0\">1<\/span><span class=\"br0\">]<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Array indexes are always integers in JavaScript. You can\u2019t use strings as indexes\u2014use an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Working_with_Objects\">object<\/a> instead if you need to do that.<\/p>\n<p>You can change the value of an array index by setting it directly:<\/p>\n<p><code>myArray<\/code> shown above would now contain the values <code>foo, test, example<\/code>.<\/p>\n<h2 id=\"adding-items-to-arrays\"><span class=\"ez-toc-section\" id=\"Adding_Items_to_Arrays\"><\/span>Adding Items to Arrays<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You add new items to arrays using the <code>push()<\/code> method:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"br0\">[<\/span><span class=\"st0\">\"car\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"br0\">]<\/span>.<span class=\"me1\">push<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"bus\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ car, truck, bus<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This adds the item to the end of the array. If you\u2019d like the new element to be inserted at the <em>start<\/em> of the array, use the <code>unshift()<\/code> method instead.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"br0\">[<\/span><span class=\"st0\">\"car\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"br0\">]<\/span>.<span class=\"me1\">unshift<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"bus\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ bus, car, truck<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Sometimes you might need to insert an element mid-way through an array. You can use the <code>splice()<\/code> method to add an item at a specific index:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"br0\">[<\/span><span class=\"st0\">\"car\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"br0\">]<\/span>.<span class=\"me1\">splice<\/span><span class=\"br0\">(<\/span><span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"bus\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ car, bus, truck<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The first argument to <code>splice()<\/code> is the index to make the insertion at. Next comes the number of items to delete from the start of the array. When you\u2019re adding a new item, this should be <code>0<\/code> so that the existing elements are retained. The final argument is the item to add.<\/p>\n<h2 id=\"removing-items-from-arrays\"><span class=\"ez-toc-section\" id=\"Removing_Items_from_Arrays\"><\/span>Removing Items from Arrays<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To remove an array item, use the <code>pop()<\/code> method. It will \u201cpop\u201d the last item out of the array:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"br0\">[<\/span><span class=\"st0\">\"car\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"bus\"<\/span><span class=\"br0\">]<\/span>.<span class=\"me1\">pop<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ car, truck<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>To remove the <em>first<\/em> array element, use the <code>shift()<\/code> method instead:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"br0\">[<\/span><span class=\"st0\">\"car\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"bus\"<\/span><span class=\"br0\">]<\/span>.<span class=\"me1\">shift<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ truck, bus<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>If you want to remove a specific item, you\u2019ll need to use the <code>splice()<\/code> method again. You\u2019ll need to know the index you want to remove first. If you\u2019re working from one of the array\u2019s values, first call <code>indexOf()<\/code> to get its index. You can then pass this to <code>splice()<\/code>, setting the second argument to <code>1<\/code> to delete one item at the given index.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> arr <span class=\"sy0\">=<\/span> <span class=\"br0\">[<\/span><span class=\"st0\">\"car\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"bus\"<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\narr.<span class=\"me1\">splice<\/span><span class=\"br0\">(<\/span>arr.<span class=\"me1\">indexOf<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"truck\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ car, bus<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"iterating-over-arrays\"><span class=\"ez-toc-section\" id=\"Iterating_over_Arrays\"><\/span>Iterating over Arrays<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are several ways in which you can iterate over an array. The traditional approach is to use a <code>for<\/code> loop:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> arr <span class=\"sy0\">=<\/span> <span class=\"br0\">[<\/span><span class=\"st0\">\"car\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"bus\"<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">for<\/span> <span class=\"br0\">(<\/span>let i <span class=\"sy0\">=<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span> i <span class=\"sy0\">&lt;<\/span> arr.<span class=\"me1\">length<\/span><span class=\"sy0\">;<\/span> i<span class=\"sy0\">++<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>`Vehicle at position $<span class=\"br0\">{<\/span>i<span class=\"br0\">}<\/span> is $<span class=\"br0\">{<\/span>arr<span class=\"br0\">[<\/span>i<span class=\"br0\">]<\/span><span class=\"br0\">}<\/span>`<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>A shorter alternative is to use the array\u2019s <code>forEach()<\/code> method. This must be given a function. The function is called once for each item in the array. It receives each item\u2019s value and index as its parameters.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"br0\">[<\/span><span class=\"st0\">\"car\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"bus\"<\/span><span class=\"br0\">]<\/span>.<span class=\"me1\">forEach<\/span><span class=\"br0\">(<\/span><span class=\"br0\">(<\/span>vehicle<span class=\"sy0\">,<\/span> i<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>`Vehicle at position $<span class=\"br0\">{<\/span>i<span class=\"br0\">}<\/span> is $<span class=\"br0\">{<\/span>vehicle<span class=\"br0\">}<\/span>`<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><code>forEach()<\/code> is often easier to work with than a <code>for<\/code> loop. You should take care when returning values, though. Returning from the function passed to <code>forEach()<\/code> won\u2019t cancel the loop:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> arr <span class=\"sy0\">=<\/span> <span class=\"br0\">[<\/span><span class=\"st0\">\"car\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"bus\"<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ logs \"car\"<\/span>\n<span class=\"kw1\">for<\/span> <span class=\"br0\">(<\/span>let i <span class=\"sy0\">=<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span> i <span class=\"sy0\">&lt;<\/span> arr.<span class=\"me1\">length<\/span><span class=\"sy0\">;<\/span> i<span class=\"sy0\">++<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>arr<span class=\"br0\">[<\/span>i<span class=\"br0\">]<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">(<\/span>arr<span class=\"br0\">[<\/span>i<span class=\"br0\">]<\/span> <span class=\"sy0\">===<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"br0\">)<\/span> <span class=\"kw1\">return<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"co1\">\/\/ logs \"car\", \"truck\", \"bus\"<\/span>\narr.<span class=\"me1\">forEach<\/span><span class=\"br0\">(<\/span><span class=\"br0\">(<\/span>vehicle<span class=\"sy0\">,<\/span> i<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span>vehicle<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">(<\/span>vehicle <span class=\"sy0\">===<\/span> <span class=\"st0\">\"truck\"<\/span><span class=\"br0\">)<\/span> <span class=\"kw1\">return<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>With <code>forEach()<\/code>, the <code>return<\/code> statement returns from the anonymous function. The loop is created by the outer scope, so it continues to call the function anew for the remaining items in the array.<\/p>\n<h2 id=\"mapping-arrays\"><span class=\"ez-toc-section\" id=\"Mapping_Arrays\"><\/span>Mapping Arrays<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><code>map()<\/code> is one of JavaScript\u2019s most powerful array methods. It accepts a function that will be called for each item in the array. A new array containing the results of each function call is then returned.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> arr <span class=\"sy0\">=<\/span> <span class=\"br0\">[<\/span><span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">4<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">8<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">16<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">const<\/span> mapped <span class=\"sy0\">=<\/span> arr.<span class=\"me1\">map<\/span><span class=\"br0\">(<\/span>v <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>v <span class=\"sy0\">*<\/span> v<span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ mapped contains 4, 16, 64, 256<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Your callback function actually receives three arguments\u2014the value at the current position, the index of the current position, and the array that\u00a0<code>map()<\/code> is being called upon.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"br0\">[<\/span><span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">3<\/span><span class=\"br0\">]<\/span>.<span class=\"me1\">map<\/span><span class=\"br0\">(<\/span><span class=\"br0\">(<\/span>value<span class=\"sy0\">,<\/span> index<span class=\"sy0\">,<\/span> arr<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>value <span class=\"sy0\">*<\/span> value<span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Mapping is useful when you need to iterate over an array, access each value, and then derive some new value from that iteration. The technique is also useful when working with UI frameworks such as React, where you can map over data to transform it into a DOM node:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> MyComponent <span class=\"sy0\">=<\/span> users <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>\n    users.<span class=\"me1\">map<\/span><span class=\"br0\">(<\/span>user <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>\n        <span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;<\/span>\n            <span class=\"sy0\">&lt;<\/span>p<span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span>user.<span class=\"me1\">Name<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n            <span class=\"sy0\">&lt;<\/span>p<span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span>user.<span class=\"me1\">Email<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n        <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n    <span class=\"br0\">)<\/span><span class=\"br0\">)<\/span>\n<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Consider using <code>map()<\/code> whenever you need to perform some action on every element in an array, even if you\u2019re not interested in the return value of your callback.<\/p>\n<h2 id=\"filtering-arrays\"><span class=\"ez-toc-section\" id=\"Filtering_Arrays\"><\/span>Filtering Arrays<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Another common task is filtering an array to exclude certain elements. You might be inclined to create a new empty array and use a <code>for<\/code> loop to test elements in your original. A simpler approach would be to use JavaScript\u2019s built-in <code>filter()<\/code> method.<\/p>\n<p>Like <code>map()<\/code>, <code>filter()<\/code> takes a callback function that gets invoked on each iteration. The current value, index and array, are passed to the callback as parameters. The callback must return either <code>true<\/code> or <code>false<\/code> to indicate whether the current value should be included in the new filtered array.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> filtered <span class=\"sy0\">=<\/span> <span class=\"br0\">[<\/span><span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">3<\/span><span class=\"br0\">]<\/span>.<span class=\"me1\">filter<\/span><span class=\"br0\">(<\/span>v <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>v <span class=\"sy0\">%<\/span> <span class=\"nu0\">2<\/span> <span class=\"sy0\">===<\/span> <span class=\"nu0\">0<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ filtered is [2]<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Using <code>filter()<\/code> makes filtering quick and concise. You don\u2019t need to build a <code>for<\/code> loop and set up the new array yourself. The method always returns a new array and will not mutate the original.<\/p>\n<h2 id=\"utility-methods\"><span class=\"ez-toc-section\" id=\"Utility_Methods\"><\/span>Utility Methods<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here are a few other methods you may find useful.<\/p>\n<ul>\n<li><strong>Joining two arrays:\u00a0<\/strong>Use the <code>concat()<\/code> method to join two arrays together. It will return a <em>new<\/em> array, with its argument appended to the array it was called on. <code>[\"a, \"b\", \"c\"].concat([\"x\", \"y\", \"z\"])<\/code> returns <code>[\"a\", \"b\", \"c\", \"x\", \"y\", \"z\"]<\/code>.<\/li>\n<li><strong>Converting an array to a string:<\/strong>\u00a0Use the <code>join()<\/code> method to combine an array\u2019s values into a single string. You can specify the separator as the first parameter to the function. <code>[\"a\", \"b\", \"c\"].join(\" - \")<\/code> will return <code>a - b - c<\/code>.<\/li>\n<li><strong>Getting value indexes:<\/strong>\u00a0If you know that a value exists in an array, you can get its numerical index with <code>indexOf()<\/code>. If the value exists multiple times in the array, the index of the first occurrence is returned. You can get the index of the <em>last<\/em> occurrence using <code>lastIndexOf()<\/code>.<\/li>\n<li><strong>Determining whether a value exists in an array:<\/strong>\u00a0The <code>includes()<\/code> method accepts a value and lets you check whether it exists in an array. It returns a boolean indicating whether the value was found. <code>[\"a\", \"b\", \"c\"].includes(\"a\")<\/code> would return <code>true<\/code>.<\/li>\n<li><strong>Creating an empty array with a predetermined length:<\/strong>\u00a0You can use the <code>Array<\/code> constructor to initialize an empty array with a given length. <code>const myArr = new Array(10)<\/code> would create an array with 10 indexes (0-9), each with <code>undefined<\/code> as its value.<\/li>\n<li><strong>Testing whether all elements in an array match a condition:<\/strong>\u00a0Sometimes you might want to check whether every element in an array meets a condition. The <code>every()<\/code> method lets you do this. It accepts a callback that works similarly to the <code>filter()<\/code> method. The method will only return <code>true<\/code> if every invocation of the callback returns <code>true<\/code>. If you want to know whether only <em>some<\/em> of the array elements match, use the <code>some()<\/code> method instead.<\/li>\n<\/ul>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JavaScript arrays are a versatile data structure with useful built-in methods. Compared with other languages, working with arrays in JavaScript is simple and concise. You can quickly iterate, map, and filter values using inline arrow functions\u00a0that keep your code clean and readable.\n<\/p><\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/10037\/how-to-manipulate-javascript-arrays\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Manipulate JavaScript Arrays \u2013 CloudSavvy IT&#8221; JavaScript arrays are data structures which let you store multiple values under a single variable name. Arrays are a type of object. They come with several utility methods you can use to manipulate their data. Arrays in JavaScript have very relaxed restrictions around what you can place&#8230;<\/p>\n","protected":false},"author":1,"featured_media":197761,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/38b865d8f78e872a08747837d13626ae\/p\/uploads\/2021\/02\/c123ee3a.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-197760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/197760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=197760"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/197760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/197761"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=197760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=197760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=197760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}