{"id":212,"date":"2021-02-10T06:11:24","date_gmt":"2021-02-10T06:11:24","guid":{"rendered":"http:\/\/santosh-shah.com\/?p=212"},"modified":"2021-02-10T06:11:24","modified_gmt":"2021-02-10T06:11:24","slug":"create-custom-filter-using-array-prototype","status":"publish","type":"post","link":"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/","title":{"rendered":"Create custom filter using Array Prototype"},"content":{"rendered":"\n<p>As a JavaScript developer most of us are pretty familiar with filter method of JavaScript. Like the code below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let num = &#91;1,2,3,4,5,6];\nnum.filter(x=> x>2 );\nconsole.log(num); \/\/ output is &#91;3,4,5,6]<\/code><\/pre>\n\n\n\n<p>In the above function we have simply inbuilt filter method which we make to filter out array <code>num<\/code>. Now what if we need a customizable filter function that accept a function just like the filter method. So lets start. Below code is the same method we would do using filter method but instead of filter method we are using <code>customFilter<\/code> which we are going to build.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let myResult = &#91;1,2,3,4,5,6].customFilter(function(element, index, arr) {\n  return element > 2;\n});<\/code><\/pre>\n\n\n\n<p>In order to build array method we need to make sure where it is derived from other wise it will throw an error saying <code>customFilter<\/code> is not a function. To create array method we need to derived from array prototype. If we had to create custom method for Date we would need to create <code>Date.prototype<\/code>. But we will be using <code>Array.prototype<\/code> for this example.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Array.prototype.customFilter = function(fn){\n  console.log(fn);  \/\/\n    \/\/ output:\n    \/\/  function (element, index, arr) {\n    \/\/    return element > 2;\n    \/\/  }\n\n  console.log(this); \/\/ return &#91;1,2,3,4,5,6]\n}<\/code><\/pre>\n\n\n\n<p>Now we have a <code>customFilter<\/code> method for an array which accept an argument as an function. Note when we console log <code>fn<\/code> it will return function expression because we must receive the function as parameter but when we console <code>this<\/code> keyword it will return array. Now lets start the actual filter process.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Array.prototype.customFilter = function(fn) {\n  let newFilter = &#91;];\n  for(let i=0; i&lt;this.length; i++) {\n     if(fn(this&#91;i], i, this)) {\n        newFilter.push(this&#91;i]);\n     }\n  }\n  return newFilter;\n}<\/code><\/pre>\n\n\n\n<p>I have pass 3 argument to <code>fn<\/code> function. The first one is each array item which is denoted by <code>this[i]<\/code>, the second one is array item index which is denoted by <code>i<\/code> and the third one is the entire array itself which id denoted by <code>this<\/code> keyword. So the the <code>fn<\/code> function return <code>true<\/code> we will push that value to <code>newFilter<\/code> array. After that loop is completed we will have updated value return over <code>customerFilter<\/code> method.<\/p>\n\n\n\n<p>The whole code in one place.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Array.prototype.customFilter = function(fn) {\n  let newFilter = &#91;];\n  for(let i=0; i&lt;this.length; i++) {\n     if(fn(this&#91;i], i, this)) {\n        newFilter.push(this&#91;i]);\n     }\n  }\n  return newFilter;\n}\n\nlet num = &#91;1,2,3,4,5,6];\nlet greaterNum = num.customFilter(function(arrayItem, arrayIndex, arrayData){\n   return arrayItem > 2\n})\nlet lastItem = num.customFilter((arrayItem, arrayIndex, arrayData)=>  arrayData&#91;arrayData.length-1]);\nlet lastItem = num.customFilter((arrayItem, arrayIndex, arrayData)=>  arrayData&#91;0]);\n\n\nconsole.log(greaterNum);  \/\/ &#91;3,4,5,6]\nconsole.log(lastItem); \/\/ &#91;6]\nconsole.log(firstItem); \/\/ &#91;1]\n\n\n<\/code><\/pre>\n\n\n\n<p>I hope the creating custom prototype is clear. If you have any question do share in comment. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a JavaScript developer most of us are pretty familiar with filter method of JavaScript. Like the code below. In the above function we have simply inbuilt filter method which we make to filter out array num. Now what if we need a customizable filter function that accept a function just like the filter method. [&hellip;]<\/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":[],"class_list":["post-212","post","type-post","status-publish","format-standard","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create custom filter using Array Prototype - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create custom filter using Array Prototype - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"As a JavaScript developer most of us are pretty familiar with filter method of JavaScript. Like the code below. In the above function we have simply inbuilt filter method which we make to filter out array num. Now what if we need a customizable filter function that accept a function just like the filter method. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-10T06:11:24+00:00\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/\",\"name\":\"Create custom filter using Array Prototype - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"datePublished\":\"2021-02-10T06:11:24+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create custom filter using Array Prototype\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create custom filter using Array Prototype - Santosh Kumar Shah","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/","og_locale":"en_US","og_type":"article","og_title":"Create custom filter using Array Prototype - Santosh Kumar Shah","og_description":"As a JavaScript developer most of us are pretty familiar with filter method of JavaScript. Like the code below. In the above function we have simply inbuilt filter method which we make to filter out array num. Now what if we need a customizable filter function that accept a function just like the filter method. [&hellip;]","og_url":"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2021-02-10T06:11:24+00:00","author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/","url":"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/","name":"Create custom filter using Array Prototype - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"datePublished":"2021-02-10T06:11:24+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/create-custom-filter-using-array-prototype\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create custom filter using Array Prototype"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=212"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/212\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}