{"id":368,"date":"2020-08-20T19:00:26","date_gmt":"2020-08-20T19:00:26","guid":{"rendered":"https:\/\/datatype.co.in\/blog\/?p=368"},"modified":"2020-09-04T19:19:47","modified_gmt":"2020-09-04T19:19:47","slug":"important-javascript-array-methods","status":"publish","type":"post","link":"https:\/\/datatype.co.in\/blog\/important-javascript-array-methods\/","title":{"rendered":"Important JavaScript Array Methods"},"content":{"rendered":"\n
\"Important<\/figure>\n\n\n\n

In this article I will discuss about some of the important inbuilt array methods in JavaScript. I will cover the following methods:<\/p>\n\n\n\n

length, concat, sort, reverse, split, join, push, pop, unshift, shift, Array.isArray, forEach, map, filter<\/code><\/p>\n\n\n\n

length:<\/strong><\/p>\n\n\n\n

The length()<\/code><\/strong> methods returns the length of an array.<\/p>\n\n\n\n

var fruits = [\"Orange\", \"Apple\", \"Banana\"];\nconsole.log(fruits.length) \/\/ Output: 3<\/code><\/pre>\n\n\n\n
While dealing with arrays in programming, often we come across a situation where we need to check if the given array is empty or not. The length method can be used for the same. If the length of the array is zero, then it is empty.<\/p>\n\n\n\n
var arr = [];\nconsole.log(arr.length) \/\/ Output: 0<\/code><\/pre>\n\n\n\n
concat:<\/strong><\/p>\n\n\n\n
The concat() method is used to merge two or more arrays into single array.  This method does not change the existing arrays, but instead returns a new array as you can see in the example below:<\/p>\n\n\n\n
var arr1 = [1,2,3];\nvar arr2 = [4,5];\nvar arr3 = arr1.concat(arr2);\nconsole.log(arr3); \/\/ Output: [1,2,3,4,5]\n<\/code><\/pre>\n\n\n\n
sort:<\/strong><\/p>\n\n\n\n
 The sort()<\/strong><\/code> method is used to sort an array elements in JavaScript. It returns sorted array.<\/p>\n\n\n\n
var fruits = [\"Orange\", \"Apple\", \"Banana\"];\nconsole.log(fruits.sort()); \/\/ Output: [\"Apple\",\"Banana\",\"Orange\"]<\/code><\/pre>\n\n\n\n
reverse:<\/strong><\/p>\n\n\n\n
 The reverse()<\/strong><\/code> method is used to sort an array elements in reverse order in JavaScript. It returns the array after the reversal. <\/p>\n\n\n\n
var fruits = [\"Orange\", \"Apple\", \"Banana\"];\nconsole.log(fruits.reverse()); \/\/ Output: [\"Orange\", \"Banana\", \"Apple\"]<\/code><\/pre>\n\n\n\n
split:<\/strong><\/p>\n\n\n\n
The split()<\/code><\/strong> method splits the string into an array by the given delimiter or separator. For example, you can split a sentence into words array based on space as separator or any comma separated string into array of words.<\/p>\n\n\n\n
var str1 = \"JavaScript is awesome!\"\nconsole.log(str1.split(\" \")); \/\/ Output: [\"JavaScript\", \"is\", \"awesome!\"]\n\nvar str2 = \"Jan, Feb, Mar, Apr\";\nconsole.log(str2.split(\", \")); \/\/ Output: [\"Jan\", \"Feb\", \"Mar\", \"Apr\"]<\/code><\/pre>\n\n\n\n
 The split<\/code> method has an optional second numeric argument \u2013 a limit on the array length. If it is provided, then the extra elements are ignored. In practice it is rarely used.<\/p>\n\n\n\n
var str2 = \"Jan, Feb, Mar, Apr\";\nconsole.log(str2.split(\", \", 2)); \/\/ Output: [\"Jan\", \"Feb\"]<\/code><\/pre>\n\n\n\n
join:<\/strong><\/p>\n\n\n\n
The join() <\/strong>method does opposite of split i.e. it creates string out of array glued by given separator (as argument). If no separator or argument is provided, it returns comma separated string.<\/p>\n\n\n\n
\/\/ Without separator\nvar months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\"];\nconsole.log(months.join()); \/\/ Output: Jan,Feb,Mar,Apr\n\n\/\/ With separator\nvar months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\"];\nconsole.log(months.join(\"-\")); \/\/ Output: Jan-Feb-Mar-Apr<\/code><\/pre>\n\n\n\n
push and pop:<\/strong><\/p>\n\n\n\n
The push()<\/code><\/strong> method is used to add one or more elements at the end <\/strong>of an array. The element is provided as an argument. It returns array with the pushed element.<\/p>\n\n\n\n
var months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\"];\n\/\/ add one element\nmonths.push(\"May\"); \nconsole.log(months); \/\/ Output: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\"]\n\n\/\/ add multiple elements\nmonths.push(\"Jun\",\"Jul\"); \nconsole.log(months); \/\/ Output: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\"]<\/code><\/pre>\n\n\n\n
The pop()<\/code><\/strong> deletes last <\/strong>element from an array and returns rest of the array.<\/p>\n\n\n\n
var months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\"];\nconsole.log(months.pop()); \/\/ Output: [\"Jan\", \"Feb\", \"Mar\"]<\/code><\/pre>\n\n\n\n
unshift and shift:<\/strong><\/p>\n\n\n\n
 The unshift()<\/strong><\/code> method adds one or more elements to the beginning<\/strong> of an array and returns the new length of the array. <\/p>\n\n\n\n
var months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\"];\nconsole.log(months.unshift(\"May\", \"Jun\")); \/\/ Output: 6\nconsole.log(months) \/\/ Output: [\"May\", \"Jun\", \"Jan\", \"Feb\", \"Mar\", \"Apr\"]<\/code><\/pre>\n\n\n\n
The shift()<\/strong><\/code> method removes the first<\/strong> element from an array and returns that removed element. This method reduces the length of the array by one. <\/p>\n\n\n\n
var months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\"];\nvar firstElement = months.shift();\nconsole.log(firstElement); \/\/ Output: Jan\nconsole.log(months) \/\/ Output: [\"Feb\", \"Mar\", \"Apr\"]<\/code><\/pre>\n\n\n\n
Array.isArray:<\/strong><\/p>\n\n\n\n
In the previous article – Data Types in JavaScript<\/a>, we have seen that data type of an Array<\/code><\/strong> in JavaScript is Object<\/code><\/strong>. The typeof <\/code><\/strong>operator does not help is differentiating array from object as it returns Object<\/code><\/strong> on both cases.<\/p>\n\n\n\n
var obj = {foo: \"bar\"}; \/\/ Object\nvar arr = [1, 2, 3]; \/\/ Array\n\nconsole.log(typeof obj); \/\/ Output: Object\nconsole.log(typeof arr); \/\/ Output: Object<\/code><\/pre>\n\n\n\n
 Then how do you check if a given value is array in JavaScript? The answer is: using Array.isArray()<\/code><\/strong> method. <\/p>\n\n\n\n
The Array.isArray()<\/strong><\/code> method determines whether the passed value is an Array<\/a><\/code> or not.  It accepts value as argument and returns  true<\/code><\/strong> if the value passed is an array, otherwise it returns false<\/code><\/strong>.<\/p>\n\n\n\n
Array.isArray([1, 2, 3]);  \/\/ Output: true\nArray.isArray({foo: \"bar\"}); \/\/ Output: false\nArray.isArray('Hello');   \/\/ Output: false\nArray.isArray(undefined);  \/\/ Output: false<\/code><\/pre>\n\n\n\n
forEach:<\/strong><\/p>\n\n\n\n
The forEach()<\/code><\/strong> method is used to loop through an array elements. The loop executes once for each array element.<\/p>\n\n\n\n
var months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\"];\nmonths.forEach(function(element){\n   console.log(element);\n})\n\/\/ The loop will iterate four times\n\/\/ Output: \n\"Jan\"\n\"Feb\"\n\"Mar\"\n\"Apr\"<\/code><\/pre>\n\n\n\n
Using JavaScript ES6 Arrow Function we can achieve the same with just single line of code.<\/p>\n\n\n\n
var months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\"];\nmonths.forEach(element => console.log(element));<\/code><\/pre>\n\n\n\n
map:<\/strong><\/p>\n\n\n\n
 The map()<\/strong><\/code>  method in JavaScript creates a new array with the results of calling a function for every array element. The provided function is called once for each array element. The map<\/strong><\/code> method does not alter the original array. Note that map method works on all modern browsers except IE.<\/p>\n\n\n\n
const arr1 = [1,2,3,4];\n\/\/ pass a function to map\nconst arr2 = arr1.map(x => x * 2);\nconsole.log(arr2); \/\/ output: Array [2, 4, 6, 8]\n\n\/\/ No change in the original array\nconsole.log(arr1); \/\/ output: Array [1,2,3,4]<\/code><\/pre>\n\n\n\n
As you can see, we have passed a multiplier function which multiplies each array elements by 2. <\/p>\n\n\n\n
filter:<\/strong><\/p>\n\n\n\n
The filter()<\/code><\/strong> method creates a new array with elements that fall under a given criteria from an existing array. <\/p>\n\n\n\n
var numbers = [1, 3, 6, 8, 11, 14];\nvar odd = numbers.filter(function(number) {\n  return number % 2 > 0 ; \/\/ Return odd numbers only\n});\nconsole.log(odd);\n\/\/ Output: [ 1, 3, 11 ]<\/code><\/pre>\n\n\n\n
In the above example, the filter callback function<\/a> checks if the number is odd using the modulas operator<\/strong> (%)<\/b><\/code>. Modulus<\/strong> operator returns the division remainder. The remainder >0 means the number is odd.<\/p>\n\n\n\n
You can try the above examples here<\/a>.<\/p>\n\n\n\n
You may also read: 
What is Callback in JavaScript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In this article I will discuss about some of the important inbuilt array methods in JavaScript. I will cover the following methods: length, concat, sort, reverse, split, join, push, pop, [ … ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[164,206,158,163,152,162,159,160,161,157,100,207],"class_list":["post-368","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-map-in-javascript","tag-filter-in-javascript","tag-javascript-array-length","tag-javascript-array-merge","tag-javascript-array-methods","tag-javascript-array-reverse","tag-javascript-array-shift","tag-javascript-array-sort","tag-javascript-array-unshift","tag-javascript-foreach-loop","tag-js-interview-question","tag-modulus-operator","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=368"}],"version-history":[{"count":51,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/368\/revisions"}],"predecessor-version":[{"id":844,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/368\/revisions\/844"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}