In this article, we will be taking a deep dive into Javascript arrays and the Array filter concept. We will delve further into how a filter function works in JavaScript to the arrays to get the desired output. <\/p>\n\n\n\n
Arrays are linear data structures used to store homogenous data, i.e. same type of data. An array can contain all integers, all characters, or all strings as the elements. An array can not be a combination of integers and characters, or integers or strings. Let us take a look at how to declare and use arrays in Javascript.<\/p>\n\n\n\n
\/\/declaring an integers array\nlet marks = [98, 75, 62, 82, 97, 53];\n\n\/\/declaring a characters array\nlet grades=['A', 'B', 'A', '0'];\n\n\/\/declaring a strings array\nlet favtutors=[\"John\", \"Joshua\", \"Alex\", \"Kate\"];\n\n\/\/declaring a boolean array\nlet present=[true, false, false, true];<\/code><\/pre>\n\n\n\nIn the code above, we have made integers array marks containing all integers, a characters array grade consisting of all elements as characters, a strings array ‘favtutors’ consisting of all strings, and a boolean present array consisting of all boolean values.<\/p>\n\n\n\n
What is meant by Filter?<\/strong><\/h3>\n\n\n\nNow we know what JavaScript Arrays are. Let\u2019s say we have an array of marks depicting the marks of students in a particular class. What if we want to store the marks of students scoring above 90? Basically, we want to filter out the marks that are above 90.<\/p>\n\n\n\n
One easy way would be to declare a new array, let\u2019s say marksabove90. Now, we traverse the initial marks array and check each value\/element if it is more than 90. If it is, we add it to the new array marksabove90, else, we don\u2019t. <\/p>\n\n\n\n
We get the final array marksabove90 containing the marks above 90, after traversing the whole array. So, we have separated the marks greater than 90. The code is given below:<\/p>\n\n\n\n
\/\/declaring an integers array\nlet marks = [98, 75, 62, 82, 97, 53];\n\n\/\/declaring an empty array to store marks that are above 90\nlet marksabove90=[];\n\n\/\/traversing the array to check if marks are greater than 90\nfor(let i=0;i<marks.length;i++){\n \/\/condition to check if marks[i] is greater than 90\n if(marks[i]>90){\n \/\/adding the marks[i]>90 in the marksabove90array\n marksabove90.push(marks[i]);\n }\n}\n\n\/\/printing the marksabove90array\nconsole.log(marksabove90);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n[ 98, 97 ]<\/code><\/pre>\n\n\n\nArrays<\/strong> filter() Function in Javascript<\/strong><\/h2>\n\n\n\nBefore we discuss this inbuilt function, one should know about the callback function. <\/p>\n\n\n\n
Have you ever used custom comparator functions in sorting an array in C++? It is one example of a callback function. A callback function is a boolean function that is passed as an argument to another function and is intended to be executed after the completion of that function. <\/p>\n\n\n\n
The filter() function is a powerful array method in JavaScript that allows one to create a new array containing elements that satisfy a specific condition.<\/strong> It iterates over each element of an array and applies a callback function to determine whether the element should be included in the filtered array. <\/p>\n\n\n\nThe callback function is a boolean function. If it returns true for an element, it is pushed into the new array. If it returns false, it is not added.<\/p>\n\n\n\n
The syntax of the filter() method is given below:<\/p>\n\n\n\n
array_name.filter(callback_function);<\/code><\/pre>\n\n\n\nThe syntax of the filter() method with optional elements that might prove useful in some cases.<\/p>\n\n\n\n
array_name.filter(callback_function(element, index, array_name), thisValue);<\/code><\/pre>\n\n\n\nParameters:<\/strong><\/p>\n\n\n\n\n- array:<\/strong> The array on which the filter() method is called.
<\/li>\n\n\n\n- callback:<\/strong> A function that is executed for each element of the array.
<\/li>\n\n\n\n- element:<\/strong> The current element being processed.
<\/li>\n\n\n\n- index (optional):<\/strong> The index of the current element.
<\/li>\n\n\n\n- array (optional):<\/strong> The array on which the filter() method is called.
<\/li>\n\n\n\n- thisValue (optional):<\/strong> The value to be used as this when executing the callback function.<\/li>\n<\/ul>\n\n\n\n
Note that the filter() method is a standard ECMAScript 5 (ES5) feature and is supported in all modern browsers. However, for older browsers, such as Internet Explorer 8 and below, this method is not supported.<\/p>\n\n\n\n
Example of Array filter() Method<\/strong><\/h3>\n\n\n\nNow, we know the syntax of the filter() method that uses a callback function inside it. So, let us take the previous example of creating a new array containing marks>90. <\/p>\n\n\n\n
\/\/declaring marks array\nlet marks = [98, 75, 62, 82, 97, 53];\n\n\/\/declaring marksabove90 and storing marks above 90 in it using the below method\nlet marksabove90= marks.filter(function(element) {\n return element >90;\n});\n\n\/\/printing marksabove90 array\nconsole.log(marksabove90);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n[ 98, 97 ]<\/code><\/pre>\n\n\n\nIn the above example, we have used the inbuilt filter() function which calls a function inside it. The function is a call-back function, which takes every argument of the original marks array and checks for each element if it is greater than 90 or not.<\/p>\n\n\n\n
It returns a boolean value true if the element is greater than 90 and hence adds it into the array. If it returns false, no action is taken, and that element is not added to the array <\/p>\n\n\n\n
Using the Arrow Function<\/strong><\/h3>\n\n\n\nWe can also use the arrow function in the above code. An arrow function is a concise way to write anonymous functions (functions that do not have a name) in JavaScript.<\/strong><\/p>\n\n\n\n\/\/declaring marks array\nlet marks = [98, 75, 62, 82, 97, 53];\n\n\/\/declaring marksabove90 array and storing marks above 90 in it using the below method\n\n\/\/using arrow function instead of the whole definition of the function\nlet marksabove90 = marks.filter((element) =>element >90);\n\n\/\/printing marksabove90 array\nconsole.log(marksabove90);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n[ 98, 97 ]<\/code><\/pre>\n\n\n\nIn this example, the callback function ((element) => element > 90) checks if each element in the array is greater than 90. If the condition is true, the number is included in the filtered array marksabove90.<\/p>\n\n\n\n
Filtering Objects in an Array<\/strong><\/h3>\n\n\n\nThe filter() method can also be used to filter objects in an array based on specific criteria. <\/p>\n\n\n\n
Let us take an example. We define an array of objects as \u201cstudent\u201d. The object has various properties like name and marks.<\/p>\n\n\n\n
\/\/declaring an array of "students" objects\nconst students = [\n { name: 'Josh', marks: 98 },\n { name: 'Alex', marks: 75 },\n { name: 'Kate', marks: 62 },\n { name: 'John', marks: 82 },\n { name: 'Cole', marks: 92 },\n { name: 'Drew', marks: 53 }\n];\n\n\/\/applying filter() function along with callback function\nlet marksabove90= students.filter((student) => student.marks > 90);\n\n\/\/printing modified array\nconsole.log(marksabove90);<\/pre><\/div>\n\n\n\nOutput<\/strong>:<\/p>\n\n\n\n[{name: 'Josh', marks: 98 }, {name: 'Cole', marks: 92 } ]<\/code><\/pre>\n\n\n\nThe filtered array contains the students whose marks are above 90.<\/p>\n\n\n\n
Important Points to Keep in Mind<\/strong><\/h3>\n\n\n\n\n- When the filter() function is applied to an empty array, it will always return an empty array. Therefore, there arises a need to check the filtered array before further processing.
<\/li>\n\n\n\n - Thid method never modifies the original array,<\/strong> instead, it returns a new array consisting of elements that return true in the callback function.
<\/li>\n\n\n\n- It’s important to note that the callback function is invoked for each element of the array. If the callback function is complex or performs expensive operations, it can impact the performance of your application. Consider optimizing the callback function if necessary.<\/li>\n<\/ul>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\nIn this blog, we have discussed all about the JavaScript Array filter() method to refine the elements according to some specific criteria. It is very important to keep the important points in mind to use this function effectively. <\/p>\n","protected":false},"excerpt":{"rendered":"
Understand the arrays and filter in JavaScript. Also learn in deep about the Array Filter() method in JavaScript with examples.<\/p>\n","protected":false},"author":9,"featured_media":235,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":null,"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[9],"tags":[11,13],"class_list":["post-231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-javascript","tag-javascript-array"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":9,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/231\/revisions"}],"predecessor-version":[{"id":287,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/231\/revisions\/287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/235"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}