• Tuesday , 7 April 2020

JavaScript array filter method

Code Canyon



Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2014/12/javascript-array-filter-method.html

The filter() method creates a new array and populates that array with all the elements that meet the condition specified in a callback function.

Syntax : array.filter(callbackFunction[, thisArg])

Parameters
callbackFunction
Required. Function that gets called for each element of the array. If the function returns true, the element is kept otherwise filtered.

thisArg
Optional. An object to which the this keyword can refer in the callbackfn function.

The filter method calls the callbackfn function one time for each element in the array. If the callback function returns false for all elements of the array, the length of the new array that will be returned is 0.

Callback Function Syntax
function callbackFunction(value, index, array)

Callback Function Parameters
value
The value of the element in the array

index
The index position of the element in the array

array
The source array object that contains the element

Example 1 : Retrieve only even numbers from myArray

// Callback function
function IsEven(value, index, array)
{
if (value % 2 == 0)
{
return true;
}
else
{
return false;
}
}

// Source array
var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Pass the callback function as argument to the filter method
var result = myArray.filter(IsEven);

document.write(result);

Output : 2,4,6,8,10

Example 2 : In Example 1 we defined a callback function first and then passed it as an argument to the filter() method. In the example below, we created the callback function as an anonymous function directly in the filter method where it is required.

// Source array
var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// callback function created directly in the filter method as anonymous function
var result = myArray.filter(function (v, i, a) { return v % 2 == 0 });

document.write(result);

Output : 2,4,6,8,10

Example 3 : Remove duplicates from javascript array

var myArray = [“Sam”, “Mark”, “Tim”, “Sam”];

var uniqueItems = myArray.filter(function (v, i, a) { return a.indexOf(v) == i });

document.write(uniqueItems);

Output :
Sam,Mark,Tim

Original source

3d Ocean

Related Posts

25 Comments

  1. Ubaid Ullah
    July 21, 2019 at 14:28

    what is the limit of parameters in .filter()'s call back function?.

  2. axel tavormina
    July 21, 2019 at 14:28

    Dude, thank you ! After a few articles and tutorials (for the duplicates) i finally get it thanks to your clear explanation.

  3. Orangeman Cometh
    July 21, 2019 at 14:28

    6:44 "Let's look at another example." Thank you for covering the index and array parameters here. Most tutorials discuss only basic use with the value parameter and don't bother going beyond this. Very helpful!

  4. pastuh
    July 21, 2019 at 14:28

    Great tutorial !

  5. Nishtha Kapur
    July 21, 2019 at 14:28

    when will u upload wpf tutorials. i have nt found any good tutorial yet.

  6. Sukhveer
    July 21, 2019 at 14:28

    wowoowowow ..awesome class <3

  7. D M
    July 21, 2019 at 14:28

    This was a great tutorial, thank you for posting and keeping it basic with excellent use of example based teaching.

  8. Himashi Hettege Dona
    July 21, 2019 at 14:28

    So helpful! Thank you!

  9. Abhishek Tiwari
    July 21, 2019 at 14:28

    great sir

  10. kaushal parab
    July 21, 2019 at 14:28

    how will it work for lowercase strings i have tried doing that….. but it doesn't work

  11. ralph edgar
    July 21, 2019 at 14:28

    Hey man, you're a great teacher. I like how you gave one basic example, and then another one using all of the callback function parameters. This channel will be my new secret weapon.

  12. Sophea Soeng
    July 21, 2019 at 14:28

    Thank you so much. a very clear explanation you have in this video.

  13. Raj C
    July 21, 2019 at 14:28

    Nice one. But how can I calculate the length of the new Array after calling the filter method?

  14. bob2000and10
    July 21, 2019 at 14:28

    Best video so far, straight to the point and no fucking around like everyone else.

  15. Jason Welsh
    July 21, 2019 at 14:28

    Thanks a lot for the great video. You go through it at a perfect pace. I will check out more videos!

  16. Sam Duss
    July 21, 2019 at 14:28

    damn from the list that is the first video that confusing me.. lol I guess I miss some knowledge about callback and functions i will go back to it later 😉

  17. Tom B
    July 21, 2019 at 14:28

    I've been trying to understand this all day from many sources, but this finally made sense to me. Thank you!

  18. Isaac Anyimiah
    July 21, 2019 at 14:28

    I like the way you break things down to the tiniest digestible bit. Keep it up.

  19. Rory
    July 21, 2019 at 14:28

    great vid – wish i could add it to favorites but it seems to be disabled

  20. Abhijit Kulkarni
    July 21, 2019 at 14:28

    Thanks for making such content which is easy to digest. Just want to share code which I tried. In above video if you specify same string with different case like uppercase and lower case this won't work. Following code snippet can be helpful

    var country = ["India", "USA", "Germany", "india"];
    var convertLowerCase = country.join('|').toLowerCase().split('|');

    var removeDuplicate = convertLowerCase.filter(function (value, index, array) {

    return convertLowerCase.indexOf(value) == index;

    });

    console.log(removeDuplicate);

  21. Alex Shaikevich
    July 21, 2019 at 14:28

    Thank you very much for breaking down the concept the way you have.

    I've checked out 5 different filter videos, and yours is the only one that explains the Value, Index, and Array of the the CallBack function. The detail you provide in your tutorial makes the concept very digestible and clear…so, thanks for that.

  22. sagar rebel
    July 21, 2019 at 14:28

    sir i got understood the concept of filter method but really getting confused about call back function. want to under stand how call back function works

  23. annie khaliq
    July 21, 2019 at 14:28

    can you make a video for the reduce method??

  24. 7amada Elbaz
    July 21, 2019 at 14:28

    thanks for this lessons and i hope try to Simplify the explanation but i understand you and you are a good instructor

  25. Artur Domański
    July 21, 2019 at 14:28

    Great explaination. Helped me to solve one problem I had with this method.

Leave A Comment

You must be logged in to post a comment.