Simple Guide to the Filter Method in JavaScript Arrays

The filter() method in JavaScript is a powerful tool to create a new array containing only the elements that pass a specific test, defined by a provided function. It doesn't modify the original array, making it perfect for selecting specific items based on conditions.
In this blog, I'll explain the filter() method with a simple syntax breakdown and provide 50 straightforward examples using South Indian themes (like food, names, and cities). These examples avoid complex math and focus on easy-to-understand filtering tasks.

Syntax

Here’s the basic syntax for filter():

const newArray = array.filter(function(element, index, array) {
  // Return true to keep the element, false to exclude it
});

element: The current item in the array (required).
index: The position of the item (optional, used in some examples).
array: The original array (rarely used, but available).

The filter() method returns a new array with only the elements that return true for the provided function.

50 Simple Programming Examples

Example 1: Filter dishes starting with 'D'

const dishes = ['idli', 'dosa', 'vada'];
const dDishes = dishes.filter(dish => dish.startsWith('d'));
console.log(dDishes);

Output: ["dosa"]

Example 2: Filter names longer than 4 characters

const names = ['Raj', 'Priya', 'Surya'];
const longNames = names.filter(name => name.length > 4);
console.log(longNames);

Output: ["Priya", "Surya"]

Example 3: Filter cities with 'ai' in name

const cities = ['Chennai', 'Bangalore', 'Madurai'];
const aiCities = cities.filter(city => city.includes('ai'));
console.log(aiCities);

Output: ["Chennai", "Madurai"]

Example 4: Filter numbers greater than 10

const numbers = [5, 15, 20];
const bigNumbers = numbers.filter(num => num > 10);
console.log(bigNumbers);

Output: [15, 20]

Example 5: Filter foods with 4 letters

const foods = ['idli', 'dosa', 'vada'];
const fourLetterFoods = foods.filter(food => food.length === 4);
console.log(fourLetterFoods);

Output: ["idli", "dosa", "vada"]

Example 6: Filter even numbers

const nums = [1, 2, 3, 4];
const evens = nums.filter(num => num % 2 === 0);
console.log(evens);

Output: [2, 4]

Example 7: Filter names starting with 'S'

const names = ['Surya', 'Arjun', 'Sita'];
const sNames = names.filter(name => name.startsWith('S'));
console.log(sNames);

Output: ["Surya", "Sita"]

Example 8: Filter ages 18 or older

const ages = [16, 18, 20];
const adults = ages.filter(age => age >= 18);
console.log(adults);

Output: [18, 20]

Example 9: Filter languages ending with 'u'

const langs = ['Tamil', 'Telugu', 'Kannada'];
const uLangs = langs.filter(lang => lang.endsWith('u'));
console.log(uLangs);

Output: ["Telugu"]

Example 10: Filter positive numbers

const nums = [-1, 0, 5, 10];
const positives = nums.filter(num => num > 0);
console.log(positives);

Output: [5, 10]

Example 11: Filter dishes containing 'a'

const dishes = ['sambar', 'rasam', 'idli'];
const aDishes = dishes.filter(dish => dish.includes('a'));
console.log(aDishes);

Output: ["sambar", "rasam"]

Example 12: Filter cities longer than 6 letters

const cities = ['Chennai', 'Kochi', 'Bangalore'];
const longCities = cities.filter(city => city.length > 6);
console.log(longCities);

Output: ["Bangalore"]

Example 13: Filter true booleans

const bools = [true, false, true];
const trues = bools.filter(b => b === true);
console.log(trues);

Output: [true, true]

Example 14: Filter festivals starting with 'P'

const festivals = ['Pongal', 'Onam', 'Diwali'];
const pFestivals = festivals.filter(fest => fest.startsWith('P'));
console.log(pFestivals);

Output: ["Pongal"]

Example 15: Filter numbers less than 50

const scores = [45, 60, 30];
const lowScores = scores.filter(score => score < 50);
console.log(lowScores);

Output: [45, 30]

Example 16: Filter names ending with 'a'

const names = ['Anita', 'Vijay', 'Lakshmi'];
const aNames = names.filter(name => name.endsWith('a'));
console.log(aNames);

Output: ["Anita", "Lakshmi"]

Example 17: Filter non-empty strings

const strings = ['idli', '', 'dosa'];
const nonEmpty = strings.filter(str => str.length > 0);
console.log(nonEmpty);

Output: ["idli", "dosa"]

Example 18: Filter objects with age > 25

const people = [{name: 'Raj', age: 30}, {name: 'Meena', age: 22}];
const older = people.filter(p => p.age > 25);
console.log(older);

Output: [{name: "Raj", age: 30}]

Example 19: Filter cities starting with 'C'

const cities = ['Chennai', 'Madurai', 'Coimbatore'];
const cCities = cities.filter(city => city.startsWith('C'));
console.log(cCities);

Output: ["Chennai", "Coimbatore"]

Example 20: Filter odd numbers

const nums = [1, 2, 3, 4];
const odds = nums.filter(num => num % 2 !== 0);
console.log(odds);

Output: [1, 3]

Example 21: Filter dishes longer than 4 letters

const dishes = ['idli', 'sambar', 'rasam'];
const longDishes = dishes.filter(dish => dish.length > 4);
console.log(longDishes);

Output: ["sambar", "rasam"]

Example 22: Filter names with 'i'

const names = ['Arjun', 'Priya', 'Surya'];
const iNames = names.filter(name => name.includes('i'));
console.log(iNames);

Output: ["Arjun", "Priya"]

Example 23: Filter numbers equal to 0

const nums = [0, 1, 0, 2];
const zeros = nums.filter(num => num === 0);
console.log(zeros);

Output: [0, 0]

Example 24: Filter states starting with 'K'

const states = ['Kerala', 'Tamilnadu', 'Karnataka'];
const kStates = states.filter(state => state.startsWith('K'));
console.log(kStates);

Output: ["Kerala", "Karnataka"]

Example 25: Filter scores above 75

const scores = [70, 80, 90];
const highScores = scores.filter(score => score > 75);
console.log(highScores);

Output: [80, 90]

Example 26: Filter snacks ending with 'u'

const snacks = ['murukku', 'vada', 'bonda'];
const uSnacks = snacks.filter(snack => snack.endsWith('u'));
console.log(uSnacks);

Output: ["murukku"]

Example 27: Filter even-indexed items

const items = ['rice', 'dal', 'curry', 'idli'];
const evenIndexed = items.filter((item, i) => i % 2 === 0);
console.log(evenIndexed);

Output: ["rice", "curry"]

Example 28: Filter objects with name starting with 'A'

const people = [{name: 'Anu', age: 22}, {name: 'Vikram', age: 28}];
const aPeople = people.filter(p => p.name.startsWith('A'));
console.log(aPeople);

Output: [{name: "Anu", age: 22}]

Example 29: Filter places with 'm'

const places = ['Madurai', 'Ooty', 'Mysore'];
const mPlaces = places.filter(place => place.includes('m'));
console.log(mPlaces);

Output: ["Madurai", "Mysore"]

Example 30: Filter negative numbers

const nums = [-5, 10, -2, 15];
const negatives = nums.filter(num => num < 0);
console.log(negatives);

Output: [-5, -2]

Example 31: Filter sweets starting with 'L'

const sweets = ['laddu', 'jalebi', 'mysorepak'];
const lSweets = sweets.filter(sweet => sweet.startsWith('l'));
console.log(lSweets);

Output: ["laddu"]

Example 32: Filter strings shorter than 5 letters

const words = ['idli', 'sambar', 'vada'];
const shortWords = words.filter(word => word.length < 5);
console.log(shortWords);

Output: ["idli", "vada"]

Example 33: Filter temples ending with 'i'

const temples = ['Madurai', 'Tirupati', 'Chennai'];
const iTemples = temples.filter(temple => temple.endsWith('i'));
console.log(iTemples);

Output: ["Madurai", "Tirupati"]

Example 34: Filter numbers divisible by 3

const nums = [3, 4, 6, 7];
const divBy3 = nums.filter(num => num % 3 === 0);
console.log(divBy3);

Output: [3, 6]

Example 35: Filter dances with 'a'

const dances = ['Bharatanatyam', 'Kuchipudi', 'Odissi'];
const aDances = dances.filter(dance => dance.includes('a'));
console.log(aDances);

Output: ["Bharatanatyam"]

Example 36: Filter ages less than 30

const ages = [25, 35, 28];
const young = ages.filter(age => age < 30);
console.log(young);

Output: [25, 28]

Example 37: Filter words starting with 'T'

const words = ['Tamil', 'Nadu', 'Telugu'];
const tWords = words.filter(word => word.startsWith('T'));
console.log(tWords);

Output: ["Tamil", "Telugu"]

Example 38: Filter objects with age exactly 20

const people = [{name: 'Karthik', age: 20}, {name: 'Sowmya', age: 22}];
const age20 = people.filter(p => p.age === 20);
console.log(age20);

Output: [{name: "Karthik", age: 20}]

Example 39: Filter fruits with 'a'

const fruits = ['mango', 'banana', 'coconut'];
const aFruits = fruits.filter(fruit => fruit.includes('a'));
console.log(aFruits);

Output: ["mango", "banana"]

Example 40: Filter numbers not equal to 5

const nums = [5, 10, 15, 5];
const notFive = nums.filter(num => num !== 5);
console.log(notFive);

Output: [10, 15]

Example 41: Filter curries starting with 'S'

const curries = ['sambar', 'rasam', 'kootu'];
const sCurries = curries.filter(curry => curry.startsWith('s'));
console.log(sCurries);

Output: ["sambar"]

Example 42: Filter strings with length 5

const words = ['sambar', 'idli', 'rasam'];
const fiveLetter = words.filter(word => word.length === 5);
console.log(fiveLetter);

Output: ["sambar", "rasam"]

Example 43: Filter odd-indexed items

const items = ['rice', 'dal', 'curry', 'idli'];
const oddIndexed = items.filter((item, i) => i % 2 !== 0);
console.log(oddIndexed);

Output: ["dal", "idli"]

Example 44: Filter names ending with 'm'

const names = ['Ram', 'Sita', 'Vikram'];
const mNames = names.filter(name => name.endsWith('m'));
console.log(mNames);

Output: ["Ram", "Vikram"]

Example 45: Filter scores below 100

const scores = [90, 100, 80];
const below100 = scores.filter(score => score < 100);
console.log(below100);

Output: [90, 80]

Example 46: Filter places ending with 'e'

const places = ['Ooty', 'Mysore', 'Chennai'];
const ePlaces = places.filter(place => place.endsWith('e'));
console.log(ePlaces);

Output: ["Mysore"]

Example 47: Filter sweets with 'i'

const sweets = ['laddu', 'jalebi', 'mysorepak'];
const iSweets = sweets.filter(sweet => sweet.includes('i'));
console.log(iSweets);

Output: ["jalebi"]

Example 48: Filter ages not equal to 25

const ages = [25, 30, 20];
const not25 = ages.filter(age => age !== 25);
console.log(not25);

Output: [30, 20]

Example 49: Filter dances longer than 7 letters

const dances = ['Bharatanatyam', 'Kuchipudi', 'Odissi'];
const longDances = dances.filter(dance => dance.length > 7);
console.log(longDances);

Output: ["Bharatanatyam", "Kuchipudi"]

Example 50: Filter items at index less than 2

const items = ['rice', 'dal', 'curry'];
const firstTwo = items.filter((item, i) => i < 2);
console.log(firstTwo);

Output: ["rice", "dal"]