{"id":20205,"date":"2022-09-30T04:52:17","date_gmt":"2022-09-30T11:52:17","guid":{"rendered":"https:\/\/coderpad.io\/?p=20205"},"modified":"2023-06-07T13:57:33","modified_gmt":"2023-06-07T20:57:33","slug":"javascript-array-methods","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/javascript-array-methods\/","title":{"rendered":"A Thorough Guide To JavaScript Array Methods with Examples"},"content":{"rendered":"\n<p>The array data type is one of JavaScript&#8217;s most important data types because it stores different elements (with different data types) in a single variable. For example, when dealing with large amounts of data such as the <a href=\"https:\/\/jsonplaceholder.typicode.com\/posts\" target=\"_blank\" rel=\"noreferrer noopener\">JSON fake posts API<\/a>, you frequently need to include a variety of data types such as objects, strings, integers, and many others. These values are typically stored in an array for manipulation and consumption in your application.<\/p>\n\n\n\n<p>Working with arrays can be challenging for a beginner, especially when you want to perform functions like adding and removing specific data, looping through all the data in an array, sorting the data, and so on.<\/p>\n\n\n\n<p>In this article, you will learn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What is an array in JavaScript<\/li>\n\n\n\n<li>How to create an array in JavaScript<\/li>\n\n\n\n<li>How to remove items from an array<\/li>\n\n\n\n<li>How to sort an array<\/li>\n\n\n\n<li>How to add items to an array<\/li>\n\n\n\n<li>How to iterate through an array<\/li>\n<\/ul>\n\n\n\n<p>You will also learn how to use many methods to work with arrays, alongside an example of how each method works. These methods are essential as they offer you more flexibility than building your own custom logic from scratch. Not to mention, they are much easier and faster.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705&nbsp;You can use the CoderPad sandbox&nbsp;<a href=\"#try-it-out\">at the bottom of this page<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/app.coderpad.io\/sandbox?question_id=229504\" target=\"_blank\" rel=\"noreferrer noopener\">as a new browser window<\/a>&nbsp;to run the code in this tutorial.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">What is an array in JavaScript?<\/h2>\n\n\n\n<p>An array is a JavaScript data type that you can use to store multiple values in a single variable. This can be preferable to giving each value its own variable, even if they are all the same type of data. For example, if you have a list of cars, it is preferable to use an array rather than assigning a variable to each car.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Using an array<\/span>\n<span class=\"hljs-keyword\">let<\/span> cars = &#91;<span class=\"hljs-string\">\"Toyota\"<\/span>, <span class=\"hljs-string\">\"Bugati\"<\/span>, <span class=\"hljs-string\">\"Benz\"<\/span>];\n\n<span class=\"hljs-comment\">\/\/ using individual variable<\/span>\n<span class=\"hljs-keyword\">let<\/span> car1 = <span class=\"hljs-string\">\"Toyota\"<\/span>;\n<span class=\"hljs-keyword\">let<\/span> car2 = <span class=\"hljs-string\">\"Bugati\"<\/span>;\n<span class=\"hljs-keyword\">let<\/span> car3 = <span class=\"hljs-string\">\"Benz\"<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Arrays make your code cleaner and more organized. You can use index numbers to retrieve array values. JavaScript&#8217;s arrays are zero-indexed, meaning the first element has an index of 0, the second has an index of 1, and so on, depending on how many elements are in the array.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_6335b4aa3ace4.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_6335b4aa3ace4.png\" alt=\"\"\/><\/a><figcaption class=\"wp-element-caption\">Given the array of cars mentioned above, &#8220;Toyota&#8221; has an &#8220;index&#8221; of 0, while &#8220;Benz&#8221; has an &#8220;index&#8221; of 2. The order the values are positioned in is&nbsp; called an &#8220;index&#8221; while the values themselves are called &#8220;elements&#8221;.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>An array can store data of various types such as strings, integers, objects, boolean, and many others.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> values = &#91;<span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-number\">12<\/span>, <span class=\"hljs-string\">\"John Doe\"<\/span>, {<span class=\"hljs-attr\">hobby<\/span>: <span class=\"hljs-string\">\"reading\"<\/span>}];<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">How to create an array in JavaScript<\/h2>\n\n\n\n<p>You can create an array in two ways: using the <code>Array<\/code> constructor or using array literal notation. In practice, developers rarely use the <code>Array<\/code> constructor, so instead let\u2019s focus on array literal notation, which uses square brackets <code>[]<\/code> to wrap a list of elements separated by commas.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Using Array constructor<\/span>\n<span class=\"hljs-keyword\">let<\/span> names = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Array<\/span>(<span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-string\">\"Ann Doe\"<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Using array literal notation<\/span>\n<span class=\"hljs-keyword\">let<\/span> names = &#91;<span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-string\">\"Ann Doe\"<\/span>];<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">What about empty elements?<\/h3>\n\n\n\n<p>The term &#8220;empty element&#8221; can have different meanings in different scenarios, but in this context, an empty element means \u201cno element\u201d. For example, if you declare an array of <code>name<\/code> and then fail to attach an element before a comma:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> name = &#91;<span class=\"hljs-string\">\"John\"<\/span>, , <span class=\"hljs-string\">\"Jane\"<\/span>, , <span class=\"hljs-string\">\"Ann\"<\/span>];<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In other situations, empty elements could refer to <code>null<\/code> and <code>undefined<\/code> values. However, the methods in this guide will not execute functions for elements that are empty (has no value). We\u2019ll remind you by noting \u201cThis method does not execute the function for empty elements\u201d with the applicable code snippets.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Now that you understand what an array is, how to make one, and how to access each element in an array, let&#8217;s look at how to manipulate them using the various built-in JavaScript array methods.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Destructive array methods<\/h2>\n\n\n\n<p>Destructive array methods alter the original arrays and return a modified array. Let&#8217;s look at the various methods for manipulating arrays that change the original array.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Methods to add to or remove from an array<\/h3>\n\n\n\n<p>It\u2019s a fairly common occurrence to need to add or remove an element from an array. For example, take this array of names:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> names = &#91;<span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-string\">\"Ann Doe\"<\/span>];<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can manipulate this array by using one of the below methods to add or remove either the first, last, or a specific element from the array.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">pop()<\/h4>\n\n\n\n<p>This method is used to <strong>remove the last element<\/strong> of the attached JavaScript array. It changes the original array and returns the removed element.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.pop()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Note:<\/strong> You don&#8217;t pass anything as a parameter into the <code>pop()<\/code> method.<\/p>\n\n\n\n<p>Here is an example showing how to use the <code>pop()<\/code> method:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> names = &#91;<span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-string\">\"Ann Doe\"<\/span>];\nnames.pop(); <span class=\"hljs-comment\">\/\/ \"Ann Doe\"<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(names); <span class=\"hljs-comment\">\/\/ &#91;'John Doe', 'Jane Doe']<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">push()<\/h4>\n\n\n\n<p>This method is used to <strong>add new element(s) to the end<\/strong> of the attached JavaScript array. It changes the original array and returns the new length of the array. This method accepts the elements you wish to add at the end of the array as parameters.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.push(element1, element2, ..., elementX)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Let&#8217;s now create a new array of scores and then add more scores to the array using the <code>push<\/code> method:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> scores = &#91;<span class=\"hljs-number\">12<\/span>, <span class=\"hljs-number\">55<\/span>, <span class=\"hljs-number\">78<\/span>, <span class=\"hljs-number\">95<\/span>, <span class=\"hljs-number\">33<\/span>];\nscores.push(<span class=\"hljs-number\">66<\/span>, <span class=\"hljs-number\">77<\/span>); <span class=\"hljs-comment\">\/\/ 7<\/span>\n\n<span class=\"hljs-built_in\">console<\/span>.log(scores); <span class=\"hljs-comment\">\/\/ &#91;12, 55, 78, 95, 33, 66, 77]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">shift()<\/h4>\n\n\n\n<p>The <code>shift()<\/code> method removes the <strong>first element<\/strong> of an array. It works similarly to the <code>pop()<\/code> method, but instead of removing from the end, it now removes from the beginning of the attached array. It returns the removed\/shifted element.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.shift()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Note:<\/strong> You don&#8217;t pass anything as a parameter into the <code>shift()<\/code> method.<\/p>\n\n\n\n<p>Let&#8217;s now create a new array of animal names and then learn how to use the shift method to remove the first name from the array:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> animalNames = &#91;<span class=\"hljs-string\">\"Lion\"<\/span>, <span class=\"hljs-string\">\"Dog\"<\/span>, <span class=\"hljs-string\">\"Snake\"<\/span>, <span class=\"hljs-string\">\"Tiger\"<\/span>];\nanimalNames.shift(); <span class=\"hljs-comment\">\/\/ \"Lion\"<\/span>\n\n<span class=\"hljs-built_in\">console<\/span>.log(animalNames); <span class=\"hljs-comment\">\/\/ &#91;'Dog', 'Snake', 'Tiger']<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">unshift()<\/h4>\n\n\n\n<p>The <code>unshift()<\/code> method works very similarly to the <code>push()<\/code> method as it is also used to add new elements to an array, but to <strong>the beginning<\/strong> of an array. This method takes in the element(s) you wish to add at the beginning of the array as parameters. It also returns the new length of the array.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.unshift(element1, element2, ..., elementX)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Let&#8217;s now create a new array of food names and then add more food names to the array using the <code>unshift()<\/code> method:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> foodNames = &#91;<span class=\"hljs-string\">\"Salad\"<\/span>, <span class=\"hljs-string\">\"Bread\"<\/span>, <span class=\"hljs-string\">\"Fish\"<\/span>, <span class=\"hljs-string\">\"Rice\"<\/span>];\nfoodNames.unshift(<span class=\"hljs-string\">\"Pizza\"<\/span>, <span class=\"hljs-string\">\"Cake\"<\/span>); <span class=\"hljs-comment\">\/\/ Returns 6 - the length of the newly changed array<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(foodNames); <span class=\"hljs-comment\">\/\/ &#91;'Pizza', 'Cake', 'Salad', 'Bread', 'Fish', 'Rice']<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">splice()<\/h4>\n\n\n\n<p>The <code>splice()<\/code> method adds or removes a specific element (or elements) from an array. When removing elements, it returns the removed element(s) in an array, and when you add elements, it returns an empty array.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.splice(index, howMany, element1, element2, ..., elementX)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the above syntax, <code>index<\/code> is a required parameter as it stands for the position where you want to add or remove elements. <code>howMany<\/code> is an optional parameter. It stands for the number of elements to be removed. Any other parameter is optional, and will be the new element(s) you want to add to the specified position.<\/p>\n\n\n\n<p>Suppose you have an array of fruits:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> fruits = &#91;<span class=\"hljs-string\">\"Mango\"<\/span>, <span class=\"hljs-string\">\"Strawberries\"<\/span>, <span class=\"hljs-string\">\"Lime\"<\/span>, <span class=\"hljs-string\">\"Oranges\"<\/span>, <span class=\"hljs-string\">\"Pomegranate\"<\/span>];<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can make use of the splice method to remove specific elements such as the third fruit, the first and second fruits, and lots more:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Remove third fruit<\/span>\nfruits.splice(<span class=\"hljs-number\">2<\/span>,<span class=\"hljs-number\">1<\/span>); <span class=\"hljs-comment\">\/\/ &#91;'Lime']<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(fruits); <span class=\"hljs-comment\">\/\/ &#91;\"Mango\", \"Strawberries\", \"Oranges\", \"Pomegranate\"]<\/span>\n\n<span class=\"hljs-comment\">\/\/ Remove the first and second fruits<\/span>\nfruits.splice(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">2<\/span>); <span class=\"hljs-comment\">\/\/ &#91;'Mango', 'Strawberries']<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(fruits); <span class=\"hljs-comment\">\/\/ &#91;\"Oranges\", \"Pomegranate\"]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 Remember, arrays start counting at <code>0<\/code>. This means that <code>arr[2]<\/code> is the <em>third<\/em> item in the array.<\/p>\n<\/blockquote>\n\n\n\n<p>You can also decide to add specific fruits to specific positions within your array using the splice method:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Add to the first position without removing any elements<\/span>\nfruits.splice(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-string\">\"Grape\"<\/span>); <span class=\"hljs-comment\">\/\/ &#91;]<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(fruits); <span class=\"hljs-comment\">\/\/ &#91;'Grape', 'Mango', 'Strawberries', 'Lime', 'Oranges', 'Pomegranate']<\/span>\n\n<span class=\"hljs-comment\">\/\/ Add to the fifth and sixth position by replacing them with new fruits<\/span>\nfruits.splice(<span class=\"hljs-number\">4<\/span>, <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-string\">\"Bananas\"<\/span>, <span class=\"hljs-string\">\"Avocado\"<\/span>); <span class=\"hljs-comment\">\/\/ &#91;'Oranges', 'Pomegranate']<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(fruits); <span class=\"hljs-comment\">\/\/ &#91;'Grape', 'Mango', 'Strawberries', 'Lime', 'Bananas', 'Avocado']<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The splice method is one of the most flexible tools for adding and removing elements from your arrays.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sort or Reverse an Array<\/h3>\n\n\n\n<p>The <code>sort()<\/code> and <code>reverse()<\/code> JavaScript array methods, as their names imply, change the order of elements in your data.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">sort()<\/h4>\n\n\n\n<p><a href=\"https:\/\/coderpad.io\/blog\/development\/guide-to-sorting-in-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">The sort method<\/a> is used to sort an array of elements alphabetically (from A-Z) and returns the sorted array.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.sort();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Suppose you have an array of fruits that you want to sort so that they are arranged alphabetically:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> fruits = &#91;<span class=\"hljs-string\">\"Mango\"<\/span>, <span class=\"hljs-string\">\"Strawberries\"<\/span>, <span class=\"hljs-string\">\"Lime\"<\/span>, <span class=\"hljs-string\">\"Oranges\"<\/span>];\nfruits.sort(); <span class=\"hljs-comment\">\/\/ &#91;'Lime', 'Mango', 'Oranges', 'Strawberries']<\/span>\n\n<span class=\"hljs-built_in\">console<\/span>.log(fruits); <span class=\"hljs-comment\">\/\/ &#91;'Lime', 'Mango', 'Oranges', 'Strawberries']<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>By default, uppercase letters are sorted before lowercase letters, meaning &#8220;Apple&#8221;, &#8220;Strawberries&#8221;, and &#8220;Lime&#8221; will come before &#8220;apple&#8221;:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> fruits = &#91;<span class=\"hljs-string\">\"Apple\"<\/span>, <span class=\"hljs-string\">\"Strawberries\"<\/span>, <span class=\"hljs-string\">\"apple\"<\/span>, <span class=\"hljs-string\">\"Lime\"<\/span>];\nfruits.sort(); <span class=\"hljs-comment\">\/\/ &#91;'Apple', 'Lime', 'Strawberries', 'apple']<\/span>\n\n<span class=\"hljs-built_in\">console<\/span>.log(fruits); <span class=\"hljs-comment\">\/\/ &#91;'Apple', 'Lime', 'Strawberries', 'apple']<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can also use this method to sort numbers by providing a <strong>comparison function<\/strong> in the sort method. By default, the <code>sort()<\/code> method sorts values as <strong>strings. <\/strong>If numbers are sorted as strings, &#8220;75&#8221; is bigger than &#8220;200&#8221; because &#8220;7&#8221; is bigger than &#8220;2&#8221;.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-21\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> numbers = &#91;<span class=\"hljs-number\">75<\/span>, <span class=\"hljs-number\">200<\/span>];\nnumbers.sort(); <span class=\"hljs-comment\">\/\/ &#91;200, 75]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-21\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can make use of a comparison function to help sort numeric values:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-22\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> numbers = &#91;<span class=\"hljs-number\">75<\/span>, <span class=\"hljs-number\">200<\/span>];\nnumbers.sort(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">a, b<\/span>)<\/span>{<span class=\"hljs-keyword\">return<\/span> a - b}); <span class=\"hljs-comment\">\/\/ &#91;75, 200]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-22\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">reverse()<\/h4>\n\n\n\n<p>The <code>reverse()<\/code> method changes the original array and returns an array of reversed elements. This method does not take in any parameters.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-23\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.reverse()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-23\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here, we use the reverse method to flip the arrangement of an array of letters.&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-24\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> letters = &#91;<span class=\"hljs-string\">'c'<\/span>, <span class=\"hljs-string\">'o'<\/span>, <span class=\"hljs-string\">'d'<\/span>, <span class=\"hljs-string\">'e'<\/span>, <span class=\"hljs-string\">'r'<\/span>, <span class=\"hljs-string\">'p'<\/span>, <span class=\"hljs-string\">'a'<\/span>, <span class=\"hljs-string\">'d'<\/span>];\nletters.reverse(); <span class=\"hljs-comment\">\/\/ &#91;'d', 'a', 'p', 'r', 'e', 'd', 'o', 'c']<\/span>\n\n<span class=\"hljs-built_in\">console<\/span>.log(letters); <span class=\"hljs-comment\">\/\/ &#91;'d', 'a', 'p', 'r', 'e', 'd', 'o', 'c']<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-24\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Non-Destructive Array methods<\/h2>\n\n\n\n<p>A non-destructive array method returns a new or non-modified array even after using an array method. If you want to preserve the original array while assigning the new output to a new array, you can use these non-destructive array methods.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Methods to add to or remove elements from an array<\/h3>\n\n\n\n<p>You know how to add or remove an element from an array with destructive methods\u2013now let\u2019s explore the non-destructive side.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">concat()<\/h4>\n\n\n\n<p>Suppose you have two or more arrays that you want to join together. You can use the <code>concat()<\/code> method. This method joins the arrays or adds an element to an array and then returns a new array containing the joined arrays or new element(s).<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-25\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray1.concat(myArray2, myArray3, ..., myArrayX)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-25\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Or<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-26\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">array1<\/span><span class=\"hljs-selector-class\">.concat<\/span>(<span class=\"hljs-selector-tag\">element1<\/span>, ..., <span class=\"hljs-selector-tag\">elementX<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-26\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Suppose you have two arrays of European and African country names:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-27\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> EuroCountries = &#91;<span class=\"hljs-string\">\"Germany\"<\/span>, <span class=\"hljs-string\">\"Poland\"<\/span>, <span class=\"hljs-string\">\"Sweden\"<\/span>];\n<span class=\"hljs-keyword\">let<\/span> AfricanCountries = &#91;<span class=\"hljs-string\">\"Ghana\"<\/span>, <span class=\"hljs-string\">\"Nigeria\"<\/span>];<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-27\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can then combine these arrays with the <code>concat()<\/code> method and assign the new array to a new variable, thereby leaving our original arrays still intact:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-28\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> countries = EuroCountries.concat(AfricanCountries);\n\n<span class=\"hljs-built_in\">console<\/span>.log(countries); <span class=\"hljs-comment\">\/\/ &#91;'Germany', 'Poland', 'Sweden', 'Ghana', 'Nigeria']<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-28\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can also add only elements, or you can add arrays and elements as seen below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-29\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> countries = EuroCountries.concat(<span class=\"hljs-string\">\"Togo\"<\/span>, <span class=\"hljs-string\">\"Rwanda\"<\/span>);\n<span class=\"hljs-built_in\">console<\/span>.log(countries); <span class=\"hljs-comment\">\/\/ &#91;'Germany', 'Poland', 'Sweden', 'Togo', 'Rwanda']<\/span>\n\n<span class=\"hljs-keyword\">let<\/span> countries = EuroCountries.concat(AfricanCountries, <span class=\"hljs-string\">\"South Africa\"<\/span>);\n<span class=\"hljs-built_in\">console<\/span>.log(countries); <span class=\"hljs-comment\">\/\/ &#91;'Germany', 'Poland', 'Sweden', 'Ghana', 'Nigeria', 'South Africa']<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-29\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">slice()<\/h4>\n\n\n\n<p>The <code>slice()<\/code> method takes the specified element(s) from one array into a new one without changing the original. This method takes two optional parameters: the <code>start<\/code> and <code>end<\/code> positions. By default, the start is 0, while the end is your array&#8217;s last element.&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-30\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.slice(start, end)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-30\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>start<\/code> position indicates the index position of the first element, while the <code>end<\/code> position is the last position that is <strong>not included<\/strong> among the copied elements.<\/p>\n\n\n\n<p>In this array of countries, we use the slice method to copy elements into new arrays:&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-31\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> countries = &#91;<span class=\"hljs-string\">'Germany'<\/span>, <span class=\"hljs-string\">'Poland'<\/span>, <span class=\"hljs-string\">'Sweden'<\/span>, <span class=\"hljs-string\">'Ghana'<\/span>, <span class=\"hljs-string\">'Nigeria'<\/span>, <span class=\"hljs-string\">'South Africa'<\/span>];\n\n<span class=\"hljs-keyword\">let<\/span> euroCountries = countries.slice(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">3<\/span>);\n<span class=\"hljs-built_in\">console<\/span>.log(euroCountries); <span class=\"hljs-comment\">\/\/ &#91;'Germany', 'Poland', 'Sweden']<\/span>\n\n<span class=\"hljs-keyword\">let<\/span> africanCountries = countries.slice(<span class=\"hljs-number\">3<\/span>);\n<span class=\"hljs-built_in\">console<\/span>.log(africanCountries); <span class=\"hljs-comment\">\/\/ &#91;'Ghana', 'Nigeria', 'South Africa']<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-31\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Join an Array<\/h3>\n\n\n\n<p>Let\u2019s say you need to join all the array elements to become a string. You can do this with the <code>join()<\/code> method without altering or changing the original array.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">join()<\/h4>\n\n\n\n<p>The <code>join()<\/code> method returns an array as a string. This method takes in your preferred separator as its parameter.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-32\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.join(separator)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-32\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The separator parameter is optional \u2013 if you don\u2019t put anything in, it will default to using a comma. But, as you can see in our example, it does accept other symbols and spaces to separate each element in your array when converting it to a string:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-33\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> names = &#91;<span class=\"hljs-string\">'John'<\/span>, <span class=\"hljs-string\">'Doe'<\/span>];\n<span class=\"hljs-keyword\">let<\/span> joinedNames1 = names.join(); <span class=\"hljs-comment\">\/\/ 'John,Doe'<\/span>\n<span class=\"hljs-keyword\">let<\/span> joinedNames2 = names.join(<span class=\"hljs-string\">' '<\/span>); <span class=\"hljs-comment\">\/\/ 'John Doe'<\/span>\n<span class=\"hljs-keyword\">let<\/span> joinedNames3 = names.join(<span class=\"hljs-string\">'-'<\/span>); <span class=\"hljs-comment\">\/\/ 'John-Doe'<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-33\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Iterating over array elements<\/h3>\n\n\n\n<p>Traditionally, you had to use loops to iterate through an array if you wanted to do any kind of data checks or processing on the individual elements.&nbsp;<\/p>\n\n\n\n<p>For example if you had an array of students where you wanted to display a particular student on a website, you\u2019d have to loop through the entire array and then create your own logic to filter them based on your filter criteria.<\/p>\n\n\n\n<p>Handling all this from scratch can be very complex, but JavaScript already has some built-in methods you can use to perform all these tasks efficiently. Here is an overview of the most common methods for iterating over your arrays.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">includes()<\/h4>\n\n\n\n<p>As the term suggests, the <code>includes()<\/code> method checks through an array to see if the array contains a specified value. If it contains that value, it returns <code>true<\/code> \u2013 if not, it will return <code>false<\/code>. The method accepts two parameters: the specific value, and the optional <code>start<\/code> position.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-34\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.includes(value, start)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-34\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<blockquote class=\"wp-block-quote\">\n<p><strong>\u2705 <\/strong>By default, the start is 0, meaning it searches through all the array elements. Also, this method is case-sensitive, meaning &#8220;Hello&#8221; is not the same as &#8220;hello&#8221;.<\/p>\n<\/blockquote>\n\n\n\n<p>Suppose you have an array of fruits. Let\u2019s check if the array includes &#8220;Apple&#8221;:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-35\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> fruits = &#91;<span class=\"hljs-string\">\"Apple\"<\/span>, <span class=\"hljs-string\">\"Strawberries\"<\/span>, <span class=\"hljs-string\">\"Mango\"<\/span>, <span class=\"hljs-string\">\"Lime\"<\/span>, <span class=\"hljs-string\">\"Oranges\"<\/span>];\n\n<span class=\"hljs-built_in\">console<\/span>.log(fruits.includes(<span class=\"hljs-string\">\"Apple\"<\/span>)); <span class=\"hljs-comment\">\/\/ true<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(fruits.includes(<span class=\"hljs-string\">\"Apple\"<\/span>, <span class=\"hljs-number\">3<\/span>)); <span class=\"hljs-comment\">\/\/ false<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-35\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">every()<\/h4>\n\n\n\n<p>The <code>every()<\/code> method executes a function for each element of an array in the form of an evaluation. It returns <code>true<\/code> if all the array elements pass the evaluation and returns <code>false<\/code> (and stops execution) if at least one element fails the evaluation. This method uses a callback function as an argument which is evaluated for each element.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-36\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.every(callbackFn)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-36\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the callback function, you have access to each element, the index, and the original array itself:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-37\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Normal function<\/span>\nmyArray.every(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">element, index, array<\/span>)<\/span>{ <span class=\"hljs-comment\">\/* ... *\/<\/span> })\n\n<span class=\"hljs-comment\">\/\/ Arrow function<\/span>\nmyArray.every(<span class=\"hljs-function\">(<span class=\"hljs-params\">element, index, array<\/span>) =&gt;<\/span> { <span class=\"hljs-comment\">\/* ... *\/<\/span> })<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-37\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Suppose you have an array of users\u2019 ages, and you want to check if all the users are below 50 years old:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-38\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> usersAge = &#91;<span class=\"hljs-number\">22<\/span>, <span class=\"hljs-number\">56<\/span>, <span class=\"hljs-number\">75<\/span>, <span class=\"hljs-number\">33<\/span>, <span class=\"hljs-number\">22<\/span>, <span class=\"hljs-number\">80<\/span>, <span class=\"hljs-number\">12<\/span>, <span class=\"hljs-number\">43<\/span>, <span class=\"hljs-number\">23<\/span>];\n\n<span class=\"hljs-built_in\">console<\/span>.log(usersAge.every(<span class=\"hljs-function\">(<span class=\"hljs-params\">age<\/span>) =&gt;<\/span> age &lt; <span class=\"hljs-number\">50<\/span>)); <span class=\"hljs-comment\">\/\/ false<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-38\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can also decide to create the function and then pass it in:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-39\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> usersAge = &#91;<span class=\"hljs-number\">22<\/span>, <span class=\"hljs-number\">56<\/span>, <span class=\"hljs-number\">75<\/span>, <span class=\"hljs-number\">33<\/span>, <span class=\"hljs-number\">22<\/span>, <span class=\"hljs-number\">80<\/span>, <span class=\"hljs-number\">12<\/span>, <span class=\"hljs-number\">43<\/span>, <span class=\"hljs-number\">23<\/span>];\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">checkAge<\/span>(<span class=\"hljs-params\">age<\/span>) <\/span>{\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> age &lt; <span class=\"hljs-number\">50<\/span>;\n}\n\n<span class=\"hljs-built_in\">console<\/span>.log(usersAge.every(checkAge)); <span class=\"hljs-comment\">\/\/ false<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-39\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Note:<\/strong><em> This method does not execute the function for empty elements.<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">some()<\/h4>\n\n\n\n<p>The <a href=\"https:\/\/coderpad.io\/blog\/development\/javascript-some-method\/\" target=\"_blank\" rel=\"noreferrer noopener\">.some() method<\/a> is very similar to the <code>every()<\/code> method, but this time returns <code>true<\/code> and stops execution if it passes the evaluation for one of the array elements. It will return false if all the elements fail the evaluation.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-40\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.some(callbackFn)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-40\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the callback function, you have access to each <code>element<\/code>, the <code>index<\/code>, and the original <code>array<\/code> itself:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-41\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Normal function<\/span>\nmyArray.some(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">element, index, array<\/span>)<\/span>{ <span class=\"hljs-comment\">\/* ... *\/<\/span> })\n\n<span class=\"hljs-comment\">\/\/ Arrow function<\/span>\nmyArray.some(<span class=\"hljs-function\">(<span class=\"hljs-params\">element, index, array<\/span>) =&gt;<\/span> { <span class=\"hljs-comment\">\/* ... *\/<\/span> })<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-41\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In our array of users\u2019 ages, suppose you want to check if at least one is above 50 years:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-42\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> usersAge = &#91;<span class=\"hljs-number\">22<\/span>, <span class=\"hljs-number\">56<\/span>, <span class=\"hljs-number\">75<\/span>, <span class=\"hljs-number\">33<\/span>, <span class=\"hljs-number\">22<\/span>, <span class=\"hljs-number\">80<\/span>, <span class=\"hljs-number\">12<\/span>, <span class=\"hljs-number\">43<\/span>, <span class=\"hljs-number\">23<\/span>];\n\n<span class=\"hljs-built_in\">console<\/span>.log(usersAge.some(<span class=\"hljs-function\">(<span class=\"hljs-params\">age<\/span>) =&gt;<\/span> age &gt; <span class=\"hljs-number\">50<\/span>)); <span class=\"hljs-comment\">\/\/ true<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-42\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Note:<\/strong><em> This method does not execute the function for empty elements.<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">find()<\/h4>\n\n\n\n<p>The find method is also similar to the <code>some()<\/code> method but doesn&#8217;t return a boolean\u2014it will instead return the first element that passes a test. Like the <code>some()<\/code> and <code>every()<\/code> method, it also executes the callback function for every element and will return <code>undefined<\/code> if no element passes the test. Its syntax is also similar to both methods.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-43\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.find(callbackFn)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-43\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the callback function, you have access to each <code>element<\/code>, the <code>index<\/code>, and the original <code>array<\/code> itself:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-44\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Normal function<\/span>\nmyArray.find(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">element, index, array<\/span>)<\/span>{ <span class=\"hljs-comment\">\/* ... *\/<\/span> })\n\n<span class=\"hljs-comment\">\/\/ Arrow function<\/span>\nmyArray.find(<span class=\"hljs-function\">(<span class=\"hljs-params\">element, index, array<\/span>) =&gt;<\/span> { <span class=\"hljs-comment\">\/* ... *\/<\/span> })<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-44\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Suppose you have an array of students, with each student having an object that contains their name and age. You can find a student with a particular name and output the student&#8217;s age:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-45\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> students = &#91;\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">22<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">33<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Karl Don\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">21<\/span> }\n];\n\n<span class=\"hljs-built_in\">console<\/span>.log(students.find(<span class=\"hljs-function\">(<span class=\"hljs-params\">student<\/span>) =&gt;<\/span> student.name === <span class=\"hljs-string\">\"John Doe\"<\/span>).age); <span class=\"hljs-comment\">\/\/ 22<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-45\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can decide to extract the function:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-46\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> students = &#91;\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">22<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">33<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Karl Don\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">21<\/span> }\n];\n\n<span class=\"hljs-keyword\">const<\/span> checkStudents = <span class=\"hljs-function\">(<span class=\"hljs-params\">student<\/span>) =&gt;<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (student.name === <span class=\"hljs-string\">\"John Doe\"<\/span>) {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> student;\n\u00a0 \u00a0 }\n};\n\n<span class=\"hljs-built_in\">console<\/span>.log(students.find(checkStudents).age); <span class=\"hljs-comment\">\/\/ 22<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-46\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Note:<\/strong><em> This method does not execute the function for empty elements.<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">findIndex()<\/h4>\n\n\n\n<p>This method is very similar to the <code>find()<\/code> method, but this time, instead of returning the element, it returns the <code>index<\/code> (position) of the first element in the array that passes the test function. It will return <code>-1<\/code> if nothing matches. Its syntax is similar to the <code>find()<\/code> method.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-47\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.findIndex(callbackFn)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-47\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the callback function, you have access to each <code>element<\/code>, the <code>index<\/code>, and the original <code>array<\/code> itself:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-48\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Normal function<\/span>\nmyArray.findIndex(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">element, index, array<\/span>)<\/span>{ <span class=\"hljs-comment\">\/* ... *\/<\/span> })\n\n<span class=\"hljs-comment\">\/\/ Arrow function<\/span>\nmyArray.findIndex(<span class=\"hljs-function\">(<span class=\"hljs-params\">element, index, array<\/span>) =&gt;<\/span> { <span class=\"hljs-comment\">\/* ... *\/<\/span> })<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-48\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Suppose you have an array of students, each with an object containing their name and age. You can find a student with a particular name and output the <code>index<\/code> of that student:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-49\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> students = &#91;\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">22<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">33<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Karl Don\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">21<\/span> }\n];\n\n<span class=\"hljs-keyword\">const<\/span> checkStudents = <span class=\"hljs-function\">(<span class=\"hljs-params\">student<\/span>) =&gt;<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (student.name === <span class=\"hljs-string\">\"Jane Doe\"<\/span>) {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> student\n\u00a0 \u00a0 }\n};\n\n<span class=\"hljs-built_in\">console<\/span>.log(students.findIndex(checkStudents)); <span class=\"hljs-comment\">\/\/ 1<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-49\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can also use one line with an arrow function:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-50\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> students = &#91;\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">22<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">33<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Karl Don\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">21<\/span> }\n];\n\n<span class=\"hljs-built_in\">console<\/span>.log(students.findIndex(<span class=\"hljs-function\">(<span class=\"hljs-params\">student<\/span>) =&gt;<\/span> student.name === <span class=\"hljs-string\">\"Jane Doe\"<\/span>)); <span class=\"hljs-comment\">\/\/ 1<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-50\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Note:<\/strong><em> This method does not execute the function for empty elements.<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">indexOf()<\/h4>\n\n\n\n<p>This method checks through each element and returns the index of the first element that matches the specified value. The search is done using strict equality <code>===<\/code> and will return <code>-1<\/code> if the specified value does not match any of the array&#8217;s element(s).&nbsp;<\/p>\n\n\n\n<p>The <code>findIndex()<\/code> method and this one are pretty similar, except the <code>findIndex()<\/code> method takes a callback function, while for <code>indexOf()<\/code>, you simultaneously pass the value you&#8217;re looking for directly.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-51\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.indexOf(item)\nmyArray.indexOf(item, start)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-51\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>start<\/code> parameter is optional, indicating the <code>index<\/code> (position) you want the search to begin. When you use a negative number, the search begins from the end of the array. By default, its value is 0.<\/p>\n\n\n\n<p>&nbsp;Here is an example to show how this method works:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-52\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> scores = &#91;<span class=\"hljs-number\">23<\/span>, <span class=\"hljs-number\">56<\/span>, <span class=\"hljs-number\">67<\/span>, <span class=\"hljs-number\">22<\/span>, <span class=\"hljs-number\">45<\/span>, <span class=\"hljs-number\">57<\/span>, <span class=\"hljs-number\">45<\/span>, <span class=\"hljs-number\">7<\/span>, <span class=\"hljs-number\">5<\/span>, <span class=\"hljs-number\">34<\/span>, <span class=\"hljs-number\">7<\/span>];\n\n<span class=\"hljs-built_in\">console<\/span>.log(scores.indexOf(<span class=\"hljs-number\">7<\/span>)); <span class=\"hljs-comment\">\/\/ 7<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(scores.indexOf(<span class=\"hljs-number\">7<\/span>, <span class=\"hljs-number\">-1<\/span>)); <span class=\"hljs-comment\">\/\/ 10<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-52\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">filter()<\/h4>\n\n\n\n<p>The <code>filter()<\/code> method goes over the entire array and looks for elements that meet a specified condition. It then returns all the elements that pass the condition in a new array.&nbsp;<\/p>\n\n\n\n<p>Suppose you have an array of users and want to filter them based on their age. When you use this method, it returns all elements that match the condition.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-53\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.filter(callbackFn)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-53\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the callback function, you have access to each element, the <code>index<\/code>, and the original array itself:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-54\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Normal function<\/span>\nmyArray.filter(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">element, index, array<\/span>)<\/span>{ <span class=\"hljs-comment\">\/* ... *\/<\/span> })\n\n<span class=\"hljs-comment\">\/\/ Arrow function<\/span>\nmyArray.filter(<span class=\"hljs-function\">(<span class=\"hljs-params\">element, index, array<\/span>) =&gt;<\/span> { <span class=\"hljs-comment\">\/* ... *\/<\/span> })<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-54\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Using the array of students, you can check for students whose age is less than 30 and return them:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-55\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> students = &#91;\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">22<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">33<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Karl Don\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">21<\/span> }\n];\n\n<span class=\"hljs-built_in\">console<\/span>.log(students.filter(<span class=\"hljs-function\">(<span class=\"hljs-params\">student<\/span>) =&gt;<\/span> student.age &lt; <span class=\"hljs-number\">30<\/span>));<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-55\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This will output:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-56\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">&#91;\n\u00a0 \u00a0 { <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-attr\">\"age\"<\/span>: <span class=\"hljs-number\">22<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Karl Don\"<\/span>, <span class=\"hljs-attr\">\"age\"<\/span>: <span class=\"hljs-number\">21<\/span> }\n]<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-56\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Note:<\/strong><em> This method does not execute the function for empty elements.<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">forEach()<\/h4>\n\n\n\n<p>The <code>forEach()<\/code> method is used to loop through all elements of an array and calls a function (callback function) for each element in the array. The callback function has access to the current <code>element<\/code>, <code>index<\/code>, and the entire <code>array<\/code> on every loop.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-57\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.<span class=\"hljs-keyword\">forEach<\/span>(callbackFn)\nmyArray.<span class=\"hljs-keyword\">forEach<\/span>(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(element, index, array)<\/span><\/span>{ <span class=\"hljs-comment\">\/* ... *\/<\/span> })<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-57\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Suppose you have an array of <code>staff<\/code> with their total salaries. You can add up all the salaries:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-58\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> staff = &#91;\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-attr\">salary<\/span>: <span class=\"hljs-number\">120<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-attr\">salary<\/span>: <span class=\"hljs-number\">350<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Karl Don\"<\/span>, <span class=\"hljs-attr\">salary<\/span>: <span class=\"hljs-number\">710<\/span> }\n];\n\n<span class=\"hljs-keyword\">let<\/span> totalSalary = <span class=\"hljs-number\">0<\/span>;\n\nstaff.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">staffPerson<\/span>) =&gt;<\/span> {\n\u00a0 \u00a0 totalSalary += staffPerson.salary;\n});\n\n<span class=\"hljs-built_in\">console<\/span>.log(totalSalary); <span class=\"hljs-comment\">\/\/ 1180<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-58\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can also use dot notation to access individual array objects as well as their values:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-59\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">staff.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">staffPerson<\/span>) =&gt;<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">let<\/span> sentence = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${staffPerson.name}<\/span> earns <span class=\"hljs-subst\">${staffPerson.salary}<\/span>`<\/span>;\n\u00a0 \u00a0 <span class=\"hljs-built_in\">console<\/span>.log(sentence);\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-59\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This will output:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-60\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\"><span class=\"hljs-string\">\"John Doe earns 120\"<\/span>\n<span class=\"hljs-string\">\"Jane Doe earns 350\"<\/span>\n<span class=\"hljs-string\">\"Karl Don earns 710\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-60\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Note:<\/strong><em> This method does not execute the function for empty elements.<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">map()<\/h4>\n\n\n\n<p>The <code>map()<\/code> method is used to iterate over an array and modify its elements using a callback function. This callback function will run on each array element and return a new array of modified elements.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-61\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.map(callbackFn)\nmyArray.map(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">element, index, array<\/span>)<\/span>{ <span class=\"hljs-comment\">\/* ... *\/<\/span> })<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-61\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Suppose you have an array of scores, and you want to add 5 points to each score and return a new array:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-62\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> scores = &#91;<span class=\"hljs-number\">45<\/span>, <span class=\"hljs-number\">71<\/span>, <span class=\"hljs-number\">65<\/span>, <span class=\"hljs-number\">80<\/span>, <span class=\"hljs-number\">47<\/span>];\n\n<span class=\"hljs-keyword\">let<\/span> newScores = scores.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">score<\/span>) =&gt;<\/span> score + <span class=\"hljs-number\">5<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(newScores); <span class=\"hljs-comment\">\/\/ &#91;50,76,70,85,52]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-62\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>map()<\/code> and <code>forEach()<\/code> methods appear to be somewhat similar, but <code>map()<\/code> allows us to <strong>return<\/strong> a value, while <code>forEach()<\/code> does not. This means you should utilize the map() method whenever you want to return a value for each item in an array.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">reduce()<\/h4>\n\n\n\n<p>This is one of the most powerful JavaScript array methods because it applies a reducer function to each element of your array and returns a <strong>single output<\/strong>. The reducer function iterates through all elements in your array from left to right (in order) and returns the result of the previous element&#8217;s calculation.&nbsp;<\/p>\n\n\n\n<p>Thus, the final result is a single value. This single value is the function&#8217;s accumulated result after executing a reducer function for every array element.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-63\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.reduce(callbackFn, initialValue)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-63\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This method takes two primary parameters, the callback function and an optional parameter of <code>initialValue<\/code> (a value to be passed to the function as the initial value). The callback function itself is quite different from other methods as it has an additional <code>total<\/code> parameter, which is either the <code>initalValue<\/code> or the last returned value of the function.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-64\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">myArray.reduce(<span class=\"hljs-function\">(<span class=\"hljs-params\">total, currentValue, currentIndex, arr<\/span>) =&gt;<\/span> { <span class=\"hljs-comment\">\/* ... *\/<\/span> }, initialValue)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-64\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here is an example to show how this method works:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-65\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> staff = &#91;\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John Doe\"<\/span>, <span class=\"hljs-attr\">salary<\/span>: <span class=\"hljs-number\">120<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Jane Doe\"<\/span>, <span class=\"hljs-attr\">salary<\/span>: <span class=\"hljs-number\">350<\/span> },\n\u00a0 \u00a0 { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Karl Don\"<\/span>, <span class=\"hljs-attr\">salary<\/span>: <span class=\"hljs-number\">710<\/span> }\n];\n\n<span class=\"hljs-keyword\">const<\/span> totalSalary = staff.reduce(<span class=\"hljs-function\">(<span class=\"hljs-params\">total, staffPerson<\/span>) =&gt;<\/span> {\n\u00a0 \u00a0 total += staffPerson.salary;\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> total;\n}, <span class=\"hljs-number\">0<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(totalSalary); <span class=\"hljs-comment\">\/\/ 1180<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-65\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2139\ufe0f <code>Reduce<\/code> is a complex array method. If you&#8217;d like to learn more about it, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noreferrer noopener\">MDN has a more in-depth look at the method.<\/a><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">flat()<\/h4>\n\n\n\n<p>The <code>flat()<\/code> method creates a new array with all sub-array elements concatenated into the new array based on a specified depth. This method accepts an optional parameter known as <code>depth<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-66\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.flat()\nmyArray.flat(depth)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-66\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here is an example of how this method works:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-67\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> numbers = &#91;<span class=\"hljs-number\">23<\/span>, <span class=\"hljs-number\">56<\/span>, <span class=\"hljs-number\">67<\/span>, &#91;<span class=\"hljs-number\">22<\/span>, <span class=\"hljs-number\">45<\/span>, <span class=\"hljs-number\">57<\/span>, &#91;<span class=\"hljs-number\">45<\/span>, <span class=\"hljs-number\">7<\/span>], <span class=\"hljs-number\">5<\/span>], &#91;<span class=\"hljs-number\">34<\/span>, <span class=\"hljs-number\">07<\/span>]];\n\n<span class=\"hljs-built_in\">console<\/span>.log(numbers.flat()); <span class=\"hljs-comment\">\/\/ &#91;23, 56, 67, 22, 45, 57, &#91;45, 7], 5, 34, 7]<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(numbers.flat(<span class=\"hljs-number\">2<\/span>)); <span class=\"hljs-comment\">\/\/ &#91;23, 56, 67, 22, 45, 57, 45, 7, 5, 34, 7]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-67\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">flatmap()<\/h4>\n\n\n\n<p>The <code>flatmap()<\/code> method is the result of combining the <code>map()<\/code> and <code>flat()<\/code> methods. It returns a new array created by applying a given callback function to each array element and then flattening the result by <strong>one level<\/strong>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-68\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Syntax<\/span>\nmyArray.<span class=\"hljs-keyword\">forEach<\/span>(callbackFn)\nmyArray.<span class=\"hljs-keyword\">forEach<\/span>(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(element, index, array)<\/span><\/span>{ <span class=\"hljs-comment\">\/* ... *\/<\/span> })<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-68\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here is an example to show how this method works:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-69\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> numbers = &#91;<span class=\"hljs-number\">23<\/span>, <span class=\"hljs-number\">56<\/span>, <span class=\"hljs-number\">67<\/span>, <span class=\"hljs-number\">22<\/span>, <span class=\"hljs-number\">45<\/span>, <span class=\"hljs-number\">57<\/span>, <span class=\"hljs-number\">45<\/span>, <span class=\"hljs-number\">7<\/span>, <span class=\"hljs-number\">5<\/span>];\n\n<span class=\"hljs-keyword\">let<\/span> doubleNumbers = numbers.flatMap(<span class=\"hljs-function\">(<span class=\"hljs-params\">number<\/span>) =&gt;<\/span> number * <span class=\"hljs-number\">2<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(doubleNumbers); <span class=\"hljs-comment\">\/\/ &#91;46, 112, 134, 44, 90, 114, 90, 14, 10]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-69\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"try-it-out\">Try it out!<\/h2>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=229504&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping up<\/h2>\n\n\n\n<p>This article has taught you all the built-in JavaScript methods, their functions, and how they work with examples. You can now explore these methods one by one to better understand how they work and in what situations you can use them. Try it out in the CoderPad sandbox.&nbsp;<\/p>\n\n\n\n<p><em>I\u2019m Joel Olawanle, a frontend developer and technical writer interested in making the web accessible to everyone by always looking for ways to give back to the tech community. Follow me and connect with me on <\/em><a href=\"https:\/\/twitter.com\/olawanle_joel\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Twitter<\/em><\/a><em>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The array is an important data structure with numerous use cases. This article walks you through an array and the methods for performing operations such as iteration, insertion, deletion, etc.<\/p>\n","protected":false},"author":12,"featured_media":20233,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[29],"blog-programming-language":[33],"keyword-cluster":[],"class_list":["post-20205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/20205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=20205"}],"version-history":[{"count":63,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/20205\/revisions"}],"predecessor-version":[{"id":34573,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/20205\/revisions\/34573"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/20233"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=20205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=20205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=20205"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=20205"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=20205"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=20205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}