EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript filter
Secondary Sidebar
TypeScript Tutorial
  • TypeScript Basic and Advanced
    • What is TypeScript?
    • Typescript Examples
    • TypeScript Versions
    • TypeScript Operators
    • JavaScript dump object
    • JavaScript get Method
    • Webpack ReactJS
    • Code Generator JavaScript
    • JavaScript Projects
    • Call Stack JavaScript
    • JavaScript Projects GitHub
    • JavaScript Filter Function
    • JavaScript nan
    • JavaScripttimestamp
    • TypeScript loop
    • CoffeeScript
    • TypeScript Webpack
    • setTimeout TypeScript
    • DHTMLX
    • CoffeeScript for loop
    • TypeScript number
    • JavaScript export module
    • TypeScript string contains
    • TypeScript Inheritance
    • TypeScript get
    • TypeScript undefined
    • TypeScript Global Variable
    • TypeScript Dictionary
    • TypeScript Generic
    • TypeScript Cast Object
    • TypeScript Optional Parameters
    • TypeScript? switch
    • TypeScript promise
    • TypeScript tuple
    • TypeScript Hashmap
    • TypeScript let
    • TypeScript Getter
    • TypeScript Pattern Matching
    • TypeScript number to string
    • TypeScript substring
    • TypeScript?lambda
    • TypeScript UUID
    • TypeScript JSDoc
    • TypeScript Decorators
    • Typescript for loop
    • TypeScript HTTP Request
    • TypeScript Abstract Class
    • TypeScript Question Mark
    • TypeScript Nullable
    • TypeScript reduce
    • TypeScript Mixins
    • TypeScript keyof
    • TypeScript string to number
    • TypeScript JSON parse
    • TypeScript const
    • TypeScript declare module
    • TypeScript String
    • TypeScript filter
    • TypeScript Multiple Constructors
    • TypeScript? Set
    • TypeScript string interpolation
    • TypeScript instanceof
    • TypeScript JSON
    • TypeScript Arrow Function
    • TypeScript generator
    • TypeScript namespace
    • TypeScript default parameter
    • TypeScript cast
    • TypeScript babel
    • Typescript Key-Value Pair
    • TypeScript if
    • TypeScript keyof Enum
    • TypeScript wait
    • TypeScript Optional Chaining
    • TypeScript JSX
    • TypeScript Version Check
    • TypeScript Unit Testing
    • TypeScript Handbook
    • TypeScript module
    • TypeScript Extend Interface
    • TypeScript npm
    • TypeScript pick
    • TypeScript Interface Default Value
    • JavaScript import module
    • Obfuscate Javascript
    • TypeScript basics
    • setInterval TypeScript
  • Type of Union
    • TypeScript Object Type
    • TypeScript type check
    • TypeScript promise type
    • TypeScript JSON type
    • TypeScript Union Types
    • TypeScript typeof
    • TypeScript Types
  • TypeScript Array
    • TypeScript Array of Objects
    • Methods TypeScript Array
    • TypeScript remove item from array
    • TypeScript add to array
    • TypeScript Array Contains
  • Function Of Array
    • TypeScript Function Interface
    • TypeScript Functions
    • TypeScript Export Function
    • TypeScript function return type

TypeScript filter

TypeScript filter

Introduction to Typescript Filter

In Typescript, Filter() is a built-in array method which is defined as a method for creating a new array or set of elements that contains a subset of the given array elements by returning the array of all the values of the elements in the newly created sub-array over the given array. In general, the filter() method is an array method for extracting only a few elements from the given array that pass a test, and this method does not support any function execution of the array elements which has no values to these elements in the given array without altering the original array.

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

var arr1 = array.filter(callback[, thisObject])
{
Return subset of given array arr1
}

In the above syntax, the filter() method is applied on the array to which we need to extract the given array elements, and this subset of the array is returned, which takes two parameters.

Parameters:

Callback: this parameter consists of a function that is used for testing each element in the array.

thisObject: this parameter is used when the above parameter is executed, which is an object.

This array method returns the new array, which consists of the part of array elements that are filtered using this method on the given array, and the elements in the sub-array will be returned only if it passes the test given in the callback parameter; else, it will return an empty array if it is false.

Sometimes in the above syntax, the parameter callback has 3 more parameters such as current value, which holds the present element value of the given array, the second parameter is an index which indicates the index of the element in the given array, which is optional and the third parameter is an array which is used for calling this filter function.

How does the filter() method work in Typescript with examples?

In typescript, the filter() method is an in-built array function to filter the given set of elements in an array to get a subset of elements of the given array, and the filter() method works as follows:

Firstly, this method is applied to the array that is defined or declared to which the set of elements needs to be extracted from the given array. This function takes a callback argument which is invoked for each element in the array, and then it creates the new array that has the elements returned by the callback function; if true, else it returns an empty array. This callback function further invokes the value of each element, the index of each element, and the array object that is being selected for traversing through the array where all these are optional except the value of each element as it is used for filtering the certain elements in the array.

Then secondly, the filter() function accepts another argument that is optional but takes the “this” value of the callback function; else, it will take “undefined” as the value. And the filter() function traverse the entire array where a range of elements in the array is already processed before the filter() function is applied to the array, but if the original array is appended later and this function is applied after the append, then the filter() function will not traverse to those new elements as callback function will not be invoked.

Now let us see the demonstration of this filter() function with few examples:

Example:

console.log(" Demonstration of filter() function in Typescript ")
function smallval(ele_val)
{
return ele_val <= 40
}
let arr1 = [56, 29, 30, 11, 48, 99]
console.log(" The given array to filter is as follows: ")
console.log(arr1)
let a = arr1.filter(smallval)
console.log(" The filtered array after applying the filter() function is as follows:")
console.log(a)

Output:

TypeScript filter output 1

In the above program, we can see we are declaring an array “arr1”, which consists of 6 elements in it. Then we can see we have defined a function “smallval”, and to this function, we are passing the element values of the array, and this function will return the elements having a value less than or equal to 40. Then we are using the filter() function to filter the elements having a value less than or equal to 40 because we are passing function “smallval” as argument (callback) to the filter() function where then we are printing only those filtered elements of the given array. In the above-given array “arr1”, there are only 3 elements with a value less than 40 and hence the new array that is created consists of only 3 elements. The output can be seen in the above screenshot.

Now let us see another example that uses a filter function for searching in an array using any part of the string, which can be used in arranging or finding strings in huge data.

Example:

console.log(" Demonstration of filter() function for searching particular string ")
let a = ['Python', 'Javascript', 'Java', 'Ruby', 'Perl', 'Fortan']
console.log(" The given array is as follows: ")
console.log(a)
function func_str(arr1, b) {
return arr1.filter(function(ele_val) {
return ele_val.toLowerCase().indexOf(b.toLowerCase()) !== -1
})
}
console.log(" The filtered array from the above given array is as follows: ")
console.log(func_str(a, 'Java'))
console.log(func_str(a, 'ab'))

Output:

TypeScript filter output 2

In the above program, we can see we have declared an array that contains 6 values with values as programming languages, and this array is printed first, then we have created a function in which we are finding the string containing “Java” as part of the string in each element of the given string. Then we are passing this function as an argument to the filter() function with only the element values where we can see we are returning only those elements having “Java” as part of the string, which prints only two elements. We are then trying to print the elements with the string “ab” as part of the string in the given array element value, but it returns an empty string as there is no such string in the given array.

Conclusion

This article concludes that the filter() function is an in-built function to filter the given array. In this article, we saw how to declare and use the filter function in different examples. The filter() function in Typescript is only supported in the Typescript version above 2 and is also compatible rate is different when used in different browsers.

Recommended Articles

We hope that this EDUCBA information on “TypeScript filter” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

  1. TypeScript Dictionary
  2. TypeScript Generic
  3. TypeScript let
  4. How to Install Typescript
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more