{"id":1407,"date":"2018-06-09T11:50:38","date_gmt":"2018-06-09T11:50:38","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=1407"},"modified":"2018-06-09T11:50:38","modified_gmt":"2018-06-09T11:50:38","slug":"learning-javascript-array-methods","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/learning-javascript-array-methods\/","title":{"rendered":"Learning JavaScript Array Methods"},"content":{"rendered":"

Note<\/strong>: This post is work-in-progress learning-note and still in active development and updated regularly.<\/p>\n

In previous learning-note post,\u00a0Understanding JavaScript Arrays<\/a> some basic features of JavaScript arrays<\/a> : syntax, creating an array, accessing array elements, recognizing an array, looping through an array elements and basic adding\/deleting elements were discussed.<\/p>\n

From JS data type & structure perspective, JS Arrays<\/code> can be compared with ‘String<\/a>‘ as both consist of sequence of elements that can be accessed via index number. JS strings<\/code> are immutable<\/a> meaning original elements of a string can’t be modified once it is created (a sub-string can be created from the original). On the other hand, JS arrays<\/code> are mutable<\/a> meaning original arrays (not an array copy) can be modified using array method()<\/a>.<\/p>\n

In this learning-note post,\u00a0we will explore array manipulation using array method(). The real strength of JS arrays are in built-in methods<\/a> and properties<\/a> which we will discuss using simple examples. A more detail complete list of array properties & methods and their use cases is available on Array – MDN Documents<\/a>.<\/p>\n

Tip<\/strong>: In this post JS an array method is referred as method()<\/a>. Proper way to write an array is Array.prototype.method()<\/a>, where Array.prototype<\/a> refers to the Array object itself.<\/p>\n

Mutator Methods<\/h3>\n

These are methods that modify the original elements of an JS array. In this section we will look at methods that add,\u00a0 remove, reverse, replace, and modify elements in an array.<\/p>\n

Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/isArray" target="_blank" rel="noopener">isArray()<\/a><\/code><\/strong><\/h6>\n

Returns true<\/code> if a variable is an array, if not false<\/code>.<\/em><\/p>\n

In the previous learning-note Understanding JavaScript Arrays<\/a>, we discussed how to recognize an array<\/strong> from an object using isArray()<\/code> method. Lets revisiting the same example below:<\/p>\n

\/\/ initialize myCar array with four items \nlet myCar = [ "Toyota", "Corolla", 2018 ];\n\n\/\/ proof if myCar is an array\nArray.isArray(myCar); \/\/OUTPUT => true\n\n\/\/checking with typeof\ntypeof(myCar); \/\/OUTPUT => object<\/code><\/pre>\n
isArray()<\/code> is a Boolean<\/a> method which returns true<\/code> if the value of an object variable is an array and returns false<\/code> if the value of an object variable is not an array. In the example above, output of isArray(myCar)<\/code> is true<\/code> (line 5) confirming that myCar<\/code> is an array.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/pop" target="_blank" rel="noopener">pop()<\/a><\/code><\/strong><\/h6>\n
Removes the last element from an array and returns that element.<\/em><\/p>\n
Lets revisit cars<\/code> array that was used in the previous learning-note Understanding JavaScript Arrays<\/a> with four car brand names as array items.<\/p>\n
\/\/ basic syntax\narr.pop();\n\n\/\/initialize cars array with four items \nlet cars = [ "Toyota", "Ford", "Honda", "GM" ];\n\n\/\/ pop() removes last item from an Array\ncars.pop(); \/\/ OUTPUT => GM\n\/\/access cars Array\ncars; \/\/OUTPUT => (3) ["Toyota", "Ford", "Honda"]<\/code><\/pre>\n
In the example above, cars.pop()<\/code> method was applied (line 8) on the cars<\/code> array (line 5) to remove the last item "GM"<\/code> from the array. When cars<\/code> array was accessed (line 10), the output confirmed our modified cars<\/code> array has now only 3 items and "GM"<\/code> was removed.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/shift" target="_blank" rel="noopener">shift()<\/a><\/code><\/strong><\/h6>\n
Removes the first element from an array and returns that element.<\/em><\/p>\n
Revisiting cars<\/code> array example from previous section, lets remove the first element "Toyota"<\/code> from the array using shift()<\/code> method.<\/p>\n
\/\/initialize cars array with four items \nlet cars = [ "Toyota", "Ford", "Honda", "GM" ];\n\n\/\/shift() removes first item of an Array\ncars.shift(); \/\/ OUTPUT => Toyota\n\/\/access cars Array\ncars; \/\/OUTPUT => (3) ["Ford", "Honda", "GM"]<\/code><\/pre>\n
In the example above, Toyota<\/code> was removed from index 0<\/code> position and the remaining three items were shifted by one index number. One of the drawbacks of this method is it changes original index position of array items. If maintaining the original index number is important then pop()<\/code> method is to remove an item from an array.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/push" target="_blank" rel="noopener">push()<\/a><\/code><\/strong><\/h6>\n
Adds one or more elements to the end of an array and returns the new length of the array.<\/em><\/p>\n
Revisiting again cars<\/code> array from previous section, lets add an item with "BMW"<\/code> value using push()<\/code> method at the end cars<\/code> array. The push()<\/code> method takes new item(s) as parameter of the function.<\/p>\n
\/\/initialize cars array with four items \nlet cars = [ "Toyota", "Ford", "Honda", "GM" ];\n\n\/\/ push() adds item at the end of Array\ncars.push("BMW"); \/\/OUTPUT => 5\n\/\/access cars Array\ncars; \/\/OUTPUT => (5) ["Toyota", "Ford", "Honda", "GM", "BMW"]<\/code><\/pre>\n
In the example above, a new value of "BMW"<\/code> was added at the end of the array (index 4<\/code>) using cars.push("BMW")<\/code> and now its new length is 5<\/code> (line 5). To add multiple values, comma ( ,<\/code>)separated values should be passed as function parameter (eg. cars.push("Lexus", "GM")<\/code> to add at the index 5<\/code> & 6<\/code> position.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/shift" target="_blank" rel="noopener">unshift()<\/a><\/code><\/strong><\/h6>\n
Adds one or more elements to the front of an array and returns the new length of the array.<\/em><\/p>\n
In cars<\/code> array below, we will use unshift()<\/code> method to add "Lexus"<\/code> at the beginning of the array. The unshift()<\/code> method takes values as parameter(s) of the function.<\/p>\n
\/\/initialize cars array with four items \nlet cars = [ "Toyota", "Ford", "Honda", "GM" ];\n\n\/\/ unshift() adds item to beginning if an Array\ncars.unshift("Lexus"); \/\/ OUTPUT => 5\n\/\/access cars Array\ncars; \/\/OUTPUT => (5) ["Lexus", "Toyota", "Ford", "Honda", "GM"]<\/code><\/pre>\n
In the example above, "Lexus"<\/code> was added with cars.unshift("Lexus")<\/code> at index 0<\/code> position (line 7) which shifts the index position of the other items by one and increases the length of the new array. Multiple values can be added to the array passing comma-separated items as function parameters.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/splice" target="_blank" rel="noopener">splice()<\/a><\/code><\/strong><\/h6>\n
Changes the contents of an array by removing existing elements and\/or adding new elements.
\n<\/em><\/p>\n
The splice()<\/code> method is very useful method as it can add and\/or remove one or more items from an array. If number of added items do not match with the removed items in an array then\u00a0 the final array will have different length.<\/p>\n
Basic Syntax: <\/strong>Following is the basic syntax of splice()<\/code> method.<\/p>\n
\/\/ basic splice() syntax\narr.splice(index[, deleteCount, elem1, ..., elemN])\nsplice(1, 0, "new");<\/code><\/pre>\n
The splice()<\/code> method starts from the position index<\/code> (with origin 0<\/code>): removes deleteCount<\/code> elements and then inserts elem1, ..., elemN<\/code> at their place. Returns the array of removed elements. The splice(1, 0, "new")<\/code> method (line 3) removes 0<\/code> items from index 0<\/code> and inserts "new"<\/code> item.<\/p>\n
Revisiting cars<\/code> array, which has four values, lets use splice()<\/code> to add, remove or add & remove items from its array.<\/p>\n
\/\/initialize cars array with four items \nlet cars = [ "Toyota", "Ford", "Honda", "GM" ];\n\n\/\/ inserting an item with splice\ncars.splice(1, 0, "Lexus"); \n\/\/access cars\ncars;\/\/OUTPUT => (5) ["Toyota", "Lexus", "Ford", "Honda", "GM"]\n\n\/\/ remove one item from index 3\ncars.splice(3, 1); \/\/OUTPUT => (1) ["Honda"]\n\/\/access cars Array\ncars; \/\/OUTPUT => (4) ["Toyota", "Lexus", "Ford", "GM"]<\/code><\/pre>\n
In the example above, one item "Lexus"<\/code> was inserted<\/strong> at index 1<\/code> and zero<\/code> item was removed (line 8). The modified cars<\/code> array shows it has 5<\/code> arrays with "Lexus"<\/code> at index 1<\/code> (line 9). Now lets remove<\/strong> one item from index 3 (line 13) and the removed item was "Honda"<\/code> (line 13) and cars<\/code> array has 4 items (line 15)<\/p>\n
Using cars<\/code> array with five items from line 10 (above), lets remove and insert items<\/strong> from its array.<\/p>\n
\/\/cars array with five items \nlet cars = ["Toyota", "Lexus", "Ford", "Honda", "GM"];\n\n\/\/ remove two items at index 2 replace one\ncars.splice(2, 2, "BMW"); \/\/OUTPUT => (2) ["Ford", "Honda"]\n\/\/access cars array\ncars; \/\/OUTPUT => (4) ["Toyota", "Lexus", "BMW", "GM"]\n\n\/\/remove items after index 2\nlet remove = cars.splice(2);\n\/\/call remove array\nremove;\/\/ OUTPUT => (2)\u00a0["BMW", "GM"]\n\/\/access cars array\ncars; \/\/OUTPUT => (2)\u00a0["Toyota", "Lexus"]<\/code><\/pre>\n
In the example above, the cars<\/code> array has five items (line 17). Using splice()<\/code> two items were removed<\/strong> starting at index 2 and replaced<\/strong> with one item "BMW"<\/code> at index 2 (line 20). After the splicing()<\/code> action, the cars<\/code> array has only 4 items: Toyota<\/code>, Lexus<\/code>, BMW<\/code>, GM<\/code>.<\/p>\n
Lets use splice()<\/code> method to remove all items<\/strong> after a defined index position. Using the cars<\/code> array from line 22,\u00a0 items after index 2 were removed<\/strong> and the results were assigned to remove<\/code> variable as an array (line 25) and remove<\/code> array out showed that two items (BMW<\/code>, GM<\/code>) were removed from index 3-4<\/code>. The final cars<\/code> array has two items Toyota<\/code> and Lexus<\/code> at index 0<\/code> and 1<\/code>.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reverse" target="_blank" rel="noopener">reverse()<\/a><\/code><\/strong><\/h6>\n
Reverses the order of the elements of an array in place \u2014 the first becomes the last, and the last becomes the first.<\/em><\/p>\n
In our cars<\/code> array we will use reverse()<\/code> method to reverse the order of the items. The reverse()<\/code> method does not take parameters.<\/p>\n
\/\/initialize cars array with four items \nlet cars = [ "Toyota", "Ford", "Honda", "GM" ];\n\n\/\/ reverse items orders\ncars.reverse(); \/\/OUTPUT => (4) ["GM", "Honda", "Ford", "Toyota"]<\/code><\/pre>\n
In the example above, "Toyota"<\/code> is at index 0<\/code> and "GM"<\/code> at index 3<\/code> position (line 2). After reverse()<\/code> method (line 5) execution the positions of the items was reversed, "GM"<\/code> at index 0<\/code> and "Toyota"<\/code> at index 3<\/code> in the cars<\/code> array.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/fill" target="_blank" rel="noopener">fill()<\/a><\/code><\/strong><\/h6>\n
Fills all the elements of an array from a start index to an end index with a static value.<\/em><\/p>\n
Revisiting Cars<\/code> array example there are four items, with fill()<\/code> method all the items will be replaced by the value passed as function parameter.<\/p>\n
\/\/initialize cars array with four items \nlet cars = [ "Toyota", "Ford", "Honda", "GM" ];\n\n\/\/replaces all items\ncars.fill("Lexus"); \/\/ OUTPUT => (4) ["Lexus", "Lexus", "Lexus", "Lexus"]<\/code><\/pre>\n
In line 5, when cars.fill("Lexus")<\/code> was applied all the for values of the cars array were replaced with the same "Lexus"<\/code> value.<\/p>\n
The fill()<\/code> method takes optional arguments as the start<\/strong> and end<\/strong> of index position as shown in the example below:<\/p>\n
\/\/cars array from line 2(above)\nlet cars = [ "Toyota", "Ford", "Honda", "GM" ];\n\n\/\/fill selected items\ncars.fill("Lexus", 1); \/\/ OUTPUT => ["Toyota", "Lexus", "Lexus", "Lexus"]\ncars.fill("Lexus", 1, 3); \/\/ OUTPUT => ["Toyota", "Lexus", "Lexus", "GM"]<\/code><\/pre>\n
In line 10, when parameters to fill ("Lexus"<\/code>) and start<\/em> position 1<\/code> were supplied without end<\/em> position, all items starting index 1<\/code> were filled with supplied fill value ("Lexus"<\/code>). When end value was added (line 11) only items starting at index 1<\/code> and ending at index 3<\/code> were filled. Additional examples are available in the MDN Documentation<\/a>.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/sort" target="_blank" rel="noopener"><strong>sort()<\/strong><\/a><\/code><\/strong>:<\/h6>\n
Sorts the elements of an array in place and returns the array.<\/em><\/p>\n
Array sort()<\/code> method sorts array items as "string"<\/code> by default. All elements, irrespective of integer or strings, they are converted to strings and compared in lexicographic (alphabetical) order (for example, 2 being greater that 15).<\/p>\n
\/\/initialize cars array with four items \nlet cars = [ "Toyota", "Ford", "Honda", "GM" ];\n\/\/ default sort()\ncars.sort(); \/\/OUTPUT => ["Ford", "GM", "Honda", "Toyota"]\n\n\/\/lcars array with lowercase items \nlet lcars = [ "toyota", "ford", "honda", "gm" ];\n\/\/sort() lowercase string\nlcars.sort(); \/\/OUTPUT => ["ford", "gm", "honda", "toyota"]<\/code><\/pre>\n
By default, sort()<\/code> method applies sorting alphabetically that are either uppercas<\/em>e (line 4) or lowercase<\/em> (line 9).<\/p>\n
\/\/ re-initialize cars array (Honda starts with lowercase)\nlet cars = [ "Toyota", "Ford", "honda", "GM" ]; \n\n\/\/sort mixed first letter\ncars.sort();\/\/ OUTPUT => (4) ["Ford", "GM", "Toyota", "honda"]<\/code><\/pre>\n
In the example above, when array string items are mixed ("honda"<\/code> starts with lowercase), items with uppercase come before the lowercase item (line 14).<\/p>\n
\/\/ Initialize cars array to include number\nlet myCar = ["Toyota", "Corolla", 2018, "2 Engine"];\n\n\/\/sorting with number & strings\nmyCar.sort(); \/\/OUTPUT => (4) ["2 Engine", 2018, "Corolla", "Toyota"]<\/code><\/pre>\n
In the example above myCar<\/code> array is modified to include strings and number and sort()<\/code> output shows that number comes before upper and lowercases (line 19)<\/p>\n
Sorting of Numbers<\/strong>
\nThe JS sort(<\/code>) method by default sorts values as strings<\/code>. Sorting string values such as Toyota, Honda, Lexus in alphabetical order (Honda comes before Lexus) makes sense. However, when numbers are sorted as strings then “20” comes before “100” which returns incorrect results and practically its not helpful.<\/p>\n
\/\/initialize myNum array\nlet myNum = [ 1, 2, 15, 40, 8, 100 ];\n\/\/default sort()\nmyNum.sort();\/\/OUTPUT => [1, 100, 15, 2, 40, 8]<\/code><\/pre>\n
In the example above, 100 comes before 15 or 2 because the stings are order in lexicographic (alphabetic) order where 1 < 2 and 100 < 15 which does not make much sense. This type of numeric sorting problem could be fixed by using a compare function.<\/p>\n
The Compare Function<\/strong>
\nThe following function compares two numerical values , it sends the values to the compare function and sorts the values in ascending order (except NaN<\/code> & infinity<\/code>).<\/p>\n
\/\/basic syntax (ascending\/descending order)\nfunction name(a, b) {\n  return a - b; \/\/ ascending order\n \/\/ return b - a;  \/\/ descending order\n}<\/code><\/pre>\n
In the above syntax the compare function subtract b<\/code> from a<\/code> for ascending<\/em> order (line 3). Similarly, if a<\/code> is subtracted from b<\/code>, the compare function\u00a0 perform sort in descending<\/em> order.<\/p>\n
\/\/initialize myNum array\nlet myNum = [ 1, 2, 15, 40, 8, 100 ];\n\n\/\/sort ascending\nmyNum.sort(function name(a, b) {\n     return a - b; \/\/ ascending order\n});\n\/\/access myNum\nmyNum; \/\/OUTPUT => [1, 2, 8, 15, 40, 100]\n\n\/\/sort descending order\nmyNum.sort(function name(a, b) {\n     return b - a; \/\/ descending\n});\n\/\/access myNum\nmyNum; \/\/OUTPUT =>[100, 40, 15, 8, 2, 1]<\/code><\/pre>\n
In the example above, myNum<\/code> array is initialized with six numerical items in the array (line 2). To sort the values of myNum<\/code> array in ascending order the compare function created previously has to passed as argument to sort()<\/code> function. When applied as shown (line 4-7), the myNum<\/code> array values were sorted by size or in ascending order (line 9). An example to sort in descending number is shown in lines 11-15.<\/p>\n
Alternately, a comparison function can be created first and the function is passed as argument to sort numerical values of an array variable. A re-write of above ascending order sort()<\/code> function (line 4-7) as a comparison arrow function is shown below:<\/p>\n
\/\/initialize myNum array\nlet myNum = [ 1, 2, 15, 40, 8, 100 ];\n\n\/\/initialize sort number (ascending)\nconst numAscend = (a, b) => {\n     return a - b;\n}\n\/\/sort myNum\nmyNum.sort(numAscend); \/\/OUTPUT => [1, 2, 8, 15, 40, 100]<\/code><\/pre>\n
A comparison arrow function to sort numbers by size (ascending order) was initialized and assigned to numAscend<\/code> const<\/code> (lines 5-7). When the numAscend<\/code> function was passed as argument of myNum.sort()<\/code>, we got the same output (line 9). This method is much shorter and easy to read as well.<\/p>\n
Additional use case examples of array.sort()<\/code> are available in the MDN Documentation<\/a>.<\/p>\n
Accessor Methods<\/h3>\n
Unlike the mutator methods, the accessor methods do not modify the original elements of an array but return a copy or representation instance. In this section, we will examine some of these methods to concatenate arrays, convert arrays to strings, copy portions of an array to a new array and find the indices of arrays.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/concat" target="_blank" rel="noopener">concat()<\/a><\/code><\/strong> :<\/h6>\n
Returns a new array comprised of this array joined with other array(s) and\/or value(s).<\/em><\/p>\n
The concat()<\/code> method merges two or more arrays together into a new array. It accepts any number of arguments – either arrays or values (line 2).<\/p>\n
\/\/basic concat syntax\narr.concat(arg1, arg2...)\n\n\/\/ initialize cars, models & year arrays\nlet cars = [ "Toyota", "Honda", "Ford"];\nlet models = [ "Camry", "Civic", "Fusion" ];\nlet year = [2018];\n\n\/\/ concatinate into myCars array (2 arrays)\nlet myCars = cars.concat(models);\n\/\/access myCars array\nmyCars;\/\/OUTPUT =>(6) ["Toyota", "Honda", "Ford", "Camry", "Civic", "Fusion"]\n\n\/\/concat 3 arrays into myNewCars\nlet myNewCars = cars.concat(models, year);\n\/\/access myNewCars array\nmyNewCars; \n\/\/OUTPUT\n(7)\u00a0["Toyota", "Honda", "Ford", "Camry", "Civic", "Fusion", 2018]<\/code><\/pre>\n
In the example above, three arrays cars<\/code>, models<\/code> and year<\/code> are initialized (Lines 5-7). In line 10, myCar<\/code> array is concatenated with models<\/code> array and the merged array is assigned to myCars<\/code> array. The new myCar<\/code> array outputs combination of two arrays. Similarly, in line 15, two arrays models<\/code> and year<\/code> are merged with cars<\/code> array and assigned the output to myNewCars<\/code> array (lines 15). The myNewCars<\/code> array merges all three arrays into one single array. Using concat()<\/code> method, multiple arrays can be merged into a single new array.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/join" target="_blank" rel="noopener">join()<\/a><\/code><\/strong> :<\/h6>\n
Joins all elements of an array into a string and returns a new string.<\/em><\/p>\n
The join()<\/code> method joins one or more arrays into a new string. The elements are separated, by default, by a comma ( ,<\/code> )\u00a0 without any character between them.<\/p>\n
\/\/ basic syntax\narr.join([separator])\n\n\/\/ initialize cars array\nlet cars = [ "Toyota", "Honda", "Ford"];\n\n\/\/join the items into a string\nlet carString = cars.join();\n\/\/access carString array\ncarString; \/\/ OUTPUT => "Toyota,Honda,Ford"<\/code><\/pre>\n
In the example above, cars<\/code> array items were join with join()<\/code> method without any arguments (default), and values were assigned to a new carString<\/code> array (line 8) and its output was comma-separated string (line 10).<\/p>\n
\/\/join array items into a string with parameter \nlet carString = cars.join(', ');\nlet carString1 = cars.join(' + ');\nlet carString2 = cars.join('');\n\n\/\/access carString, carString1 & carString2\ncarString; \/\/ OUTPUT => "Toyota, Honda, Ford"\ncarString1; \/\/ OUTPUT => "Toyota + Honda + Ford"\ncarString2; \/\/ OUTPUT => "ToyotaHondaFord"<\/code><\/pre>\n
In the example above, using the same cars<\/code> array (line 5) the elements were joined with comma and a space (line 12), then plus and a space (line 13) and with a empty string (line 14). With added parameters (lines 17-18) the joined elements can be formatted into more readable string. An empty string argument eliminates comma completely (line 19).<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/slice" target="_blank" rel="noopener">slice()<\/a><\/code><\/strong> :<\/h6>\n
The slice() method returns copy of a portion of an array into a new array object selected from begin<\/code> to end<\/code> (end<\/code> not included). The original array will not be modified..<\/em><\/p>\n
The slice()<\/code> method syntax begins<\/strong> with zero-based index at which to begin extraction. If unspecified slice begins<\/strong> from index 0<\/code>. For the end<\/strong> point of slice extraction it extracts up to but NOT including end.<\/p>\n
\/\/ basic syntax\narr.slice([begin[, end]])\n\n\/\/initialize cars array with four items\nlet cars = [ "Toyota", "Ford", "Honda", "GM", "BMW" ];\n\n\/\/ slice cars array 2 to 5\nlet myCars = cars.slice(2, 4);\n\/\/ access myCars;\nmyCars; \/\/ OUTPUT => (2) ["Honda", "GM"]\n\n\/\/slice a new array from 2 to end of Array\nlet myCars = cars.slice(2);\n\/\/access myCars new Array\nmyCars; \/\/OUTPUT => (3) ["Honda", "GM", "BMW"]<\/code><\/pre>\n
In the example above, slice()<\/code> creates a new array myCars<\/code> from cars<\/code> (line 8) from the elements beginning at index 2<\/code> through the fifth<\/code> element but not including 5<\/code> (indexing from 2<\/code> to 4<\/code>) as shown in myCars<\/code> output (line 10). If end to extract is omitted (line 13) slice extracts through the end of array (line 15) indexing three elements beginning at index 2<\/code>.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/indexOf" target="_blank" rel="noopener">indexOf()<\/a><\/code><\/strong> :<\/h6>\n
Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.<\/em><\/p>\n
The indexOf()<\/code> method is used to locate the value of selected element(s) in an array. It compares<\/a> searchElement<\/code> to elements of the array using strict equality<\/a> (the same method used by the ===<\/code>\u00a0or triple-equals\u00a0operator). The fromIndex<\/code> in the syntax refers to the index to start the search at (default is 0<\/code> & entire array is searched).<\/p>\n
\/\/ basic syntax\narr.indexOf(searchElement[, fromIndex])\n\n\/\/initialize cars array with four items\nlet cars = [ "Toyota", "Ford", "Honda", "GM", "BMW" ];\n\n\/\/find 2 index of an array item\ncars.indexOf("Honda"); \/\/OUTPUT => 2\n\n\/\/indexing non-existing item\ncars.indexOf("Lexus"); \/\/OUTPUT => -1<\/code><\/pre>\n
In the example above, indexOf()<\/code> method is used to search the index value in Cars<\/code> array (line 5). Using indexOf()<\/code> in cars<\/code> array index value of Honda<\/code> was determined as 2 (line 8). If an non-existing item\u00a0 (eg. Lexus<\/code>) is searched, index value of -1<\/code> (refers not found) is returned (line 11).<\/p>\n
One of the drawbacks of the indexOf()<\/code> method is that value of NaN<\/code> can’t be found with index of in an array.<\/p>\n
To quote from 2ality<\/a> ” It\u2019s a well-known limitation of Array.prototype.indexOf()<\/code> that it can\u2019t find NaN<\/code>, because it searches for elements via === [1]<\/code><\/em>. Below we will look few examples to overcome this problem.<\/p>\n
\/\/initialize carsN array with NaN element\nlet carsN = ["Toyota", "Ford", NaN, "GM"];\n\n\/\/access with indexOf\ncarsN.indexOf(NaN); \/\/OUTPUT => -1\n\/\/ access using includes()\ncarsN.includes(NaN); \/\/OUTPUT => true<\/code><\/pre>\n
In the example above, the indexOf()<\/code> method, a value of -1<\/code> is returned (line 5) which refers to – not found<\/em>. But this is wrong value because NaN<\/code> is index at 2<\/code> (line 2) as ===<\/code> equality doesn’t work for NaN<\/code>.\u00a0 Array includes()<\/code> method<\/a>, check inclusion of element in array (line 7) but only returns true<\/code> ( if found) and false<\/code> (if not found).<\/p>\n
In 2ality<\/a> blog post, Dr. Axel Rauschmayer<\/a> suggest creating a general elemIs()<\/code> function to overcome this problem as shown below:<\/p>\n
\/\/initialize carsN array with NaN element\nlet carsN = ["Toyota", "Ford", NaN, "GM"];\n\n\/\/initialize a general function\nfunction elemIs(x) {\n  return Object.is.bind(null, x);\n}\n\/\/access using elemIs() function\ncarsN.findIndex(elemIs(NaN));\/\/OUTPUT => 2<\/code><\/pre>\n
In the example above, a simple function elemIs()<\/code> was created (lines 5-7). Using <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/findIndex" target="_blank" rel="noopener">array.findIndex()<\/a><\/code> method with elemIs()<\/code> function as its parameter, position of NaN<\/code> element can be correctly located (line 16).<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/lastIndexOf" target="_blank" rel="noopener">lastIndexOf()<\/a><\/code><\/strong> :<\/h6>\n
Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. The array is searched backwards, starting at fromIndex<\/code>.<\/em><\/p>\n
Basic syntax of the lastIndexOf()<\/code> method is shown below (line 2) where searchElement<\/code> refers to element to locate in the array, and fromIndex<\/code> is optional.<\/p>\n
Just like in indexOf()<\/code> method, the lastIndexOf<\/code> compares searchElement<\/code> to elements of the array using strict equality<\/a> (the same method used by the ===, or triple-equals, operator).<\/p>\n
\/\/ basic syntax\narr.lastIndexOf(searchElement, fromIndex)\n\n\/\/initialize cars array with four items\nlet cars = [ "Toyota", "BMW", "Honda", "GM", "BMW" ];\n\n\/\/ find last instance of an array item\ncars.lastIndexOf("BMW"); \/\/OUTPUT => 4<\/code><\/pre>\n
In the example above,\u00a0 when the lastIndexOf()<\/code> method was applied (line 8) to check whether "BMW"<\/code> was the last index of cars<\/code> array (line 5) and its output showed that it was indeed the last index (i.e. 4<\/code>).<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/toString" target="_blank" rel="noopener">toString()<\/a><\/code><\/strong> :<\/h6>\n
Returns a string representing the array and its elements.<\/em><\/p>\n
The toString()<\/code> method converts an array into comma-separated array values.<\/p>\n
\/initialize cars array with four items\nlet myCar = [ "Toyota", "Camry", 2018 ];\n\n\/\/ convert array to string\nmyCar.toString(); \/\/OUTPUT => "Toyota,Camry,2018"<\/code><\/pre>\n
Iteration Methods<\/h3>\n
The Iteration method make use of JS loop & iteration<\/a> and operate on every item in an array, once at a time. These methods allow to perform actions such as filtering out the desired results of an array, reduce array items down to a single value, and search through arrays to find values or indices.<\/p>\n
Arrow Function – Revisit<\/h5>\n
To quote the MDN Documentation<\/a>: An arrow function expression<\/strong> has a shorter syntax than a function expression<\/a> and does not have its own <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/this">this<\/a><\/code>, arguments<\/a>, super<\/a>, or new.target<\/a>. These function expressions are best suited for non-method functions, and they cannot be used as constructors.<\/em> They are written as equals sign ( =<\/code> ) followed by a greater than ( ><\/code> ) sign : =><\/code> .<\/p>\n
\/\/function syntax\nlet functionName = function() {\n  \/\/ code block\n}\n\/\/invoke function\nfunctionName();\n\n\/\/arrow function syntax\nlet functionName = () => {\n\/\/ code block\n}\n\/\/ function with one parameter\nlet functionName = parameter1 => {\n  \/\/code blocks\n}\n\/\/invoke function\nfunctionName();<\/code><\/pre>\n
A JS function<\/a> can be defined as a block of reusable (procedure) codes that can be executed to perform a task or calculate value. A typical function syntax<\/a> and invoking a function is shown above (lines 2-6).<\/p>\n
The arrow function<\/a> is represented with much shorter syntax<\/a> and written as shown above (line 8-17). Parameters can be included in the parentheses in function (line 2-6) and arrow function (line 9). In arrow function, the parentheses (line 9) can be ommited if there is only one parameter (line 13).<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/forEach" target="_blank" rel="noopener">forEach()<\/a><\/code><\/strong> :<\/h6>\n
The <strong>forEach()<\/strong><\/code> method executes a provided function once for each array element.<\/em><\/p>\n
A basic syntax of forEach()<\/code> method is shown below (lines 2-4).<\/p>\n
\/\/ basic syntax\narr.forEach(function(item, index, array) {\n  \/\/ ... do something with item\n});\n\n\/\/initialize cars array\nlet cars = ["Toyota", "Ford", "Honda", "GM"]; \/\/\n\n\/\/ Print out each item in the array\ncars.forEach(Car => { \/\/from cars to individual car\n    console.log(Car);\n})\n\/\/OUTPUT\nToyota\nFord\nHonda\nGM<\/code><\/pre>\n
In the example above, cars<\/code> array is initialize with four car names (line 7). Using forEach()<\/code> method (lines 10-12), each item in the cars<\/code> array can be as shown in the output (lines 14-17).<\/p>\n
An alternative method to achieve the same results is by using the <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/for" target="_blank" rel="noopener">for<\/a><\/code> loop keyword. In this method for<\/code> keyword loops through the length<\/code> property of the array\u00a0 as shown below (lines 19-21).<\/p>\n
\/\/ Loop through the length of the array\nfor (let i = 0; i < car.length; i++) {\n    console.log(car[i]);\n}\n\/\/OUTPUT\nToyota\nFord\nHonda\nGM<\/code><\/pre>\n
In the case of an array, forEach()<\/code> is more concise and simpler iteration method.<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map" target="_blank" rel="noopener">map()<\/a><\/code><\/strong> :<\/h6>\n
Creates a new array with the results of calling a provided function on every element in this array.<\/em><\/p>\n
The array.map()<\/code> method transforms one array into a new array after performing some operation on each item of the array. The original array is not modified and the function returns a new array value. The map()<\/code> method must be assigned to a new variable.<\/p>\n
Lets revisit cars<\/code> array and use map()<\/code> to print each item, add extra character to each items and determine the length of character of each items in the array.<\/p>\n
\/\/ basic syntax\nlet mapName = arr.map(function(item, index, array) {\n  \/\/ returns the new value instead of item\n})\n\n\/\/initialize cars array\nlet cars = ["Toyota", "Ford", "Honda", "GM"];\n\n\/\/ Print out each item in the array\nlet printCars = cars.map(car => { \/\/ individual car\n    console.log(car);\n});\n\/\/OUTPUT\nToyota\nFord\nHonda\nGM<\/code><\/pre>\n
In the example above, map()<\/code> method iterates each item in cars array (line 7) and returns each iteration of the loop to the console (lines 14-17) one at a time until all the elements are printed. The map()<\/code> method is assigned to the printCars<\/code> variable.<\/p>\n
\/\/add extra character X in cars array\nlet carX = cars.map(car => {\n    return `${car}X`;\n});\n\/\/access carX array\ncarX; \/\/OUTPUT => ["ToyotaX", "FordX", "HondaX", "GMX"]\n\n\/\/counting length of each element\nlet cars = ["Toyota", "Ford", "Honda", "GM"];\n\/\/map element length\nlet carLength = cars.map(item => item.length)\nconsole.log(carLength);\/\/ OUTPUT => 6, 5, 4, 2<\/code><\/pre>\n
In the example above, map()<\/code> is used to add an extra character (X<\/code>) to each elements in the cars array (lines 19-21) and carX<\/code> outputs all the elements with extra X<\/code>\u00a0 (lines 23). Similarly, using map()<\/code> method and array.length<\/code> property, length of each elements of the cars<\/code> array (line 26) could be counted and output list was assigned to carLength<\/code> array (lines 28-29).<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter" target="_blank" rel="noopener">filter()<\/a><\/code> <\/strong>:<\/h6>\n
Creates a new array with all of the elements of this array for which the provided filtering function returns true.<\/em><\/p>\n
The array.filter()<\/code> method calls a filtering function once for each elements in an array and returns all the elements that match the condition into a new array. If no elements in the array pass the criteria then an empty array will be return. The filter()<\/code> method does not mutate (change) the original array.<\/p>\n
The basic syntax array.filter()<\/code> method shown below (line 2-4).<\/p>\n
\/\/ basic syntax\nlet newArray = arr.filter(function(item, index, array) {\n  \/\/ should return true if the item passes the filter\n});\n\n\/\/initialize cars array\nlet cars = ["Toyota", "Ford", "Honda", "Hyundai", "BMW"];\n\n\/\/ filter cars that start with "H" into a new list\nlet newCars = cars.filter(car => {\n  return car[0] === "H";\n});\n\/\/access newCars\nnewCars; \/\/ OUTPUT => ["Honda", "Hyundai"]<\/code><\/pre>\n
In the example above, array.filter()<\/code> method is applied to search each elements of cars<\/code> array (line 7) and filter out the list of elements with "H"<\/code> at the index 0<\/code> and assign the list to newCars<\/code> (lines 10-12).\u00a0 The newCars<\/code>, outputs two elements "Honda"<\/code> and "Hyundai"<\/code> that start with "H"<\/code> (line 14).<\/p>\n
Method <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce" target="_blank" rel="noopener">reduce()<\/a><\/code><\/strong> :<\/h6>\n
The <strong>reduce()<\/strong><\/code> method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.<\/em><\/p>\n
The array.reduce()<\/code> method performs the callback function once for each elements in the array returns a single value. Its basic syntax is shown below (lines 2-4). The callback function parameters include:<\/p>\n