Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

jason chan
jason chan
31,009 Points
Posted by jason chan
jason chan
31,009 Points

Explain this filter for javascript

var searchTerm = "mackerel";
var stations = [
 "Baker Street",
 "Charing Cross",
 "Edgware Road (Bakerloo)",
 "Elephant and Castle",
 "Embankment",
 "Harlesden",
 "Harrow and Wealdstone",
 "Kensal Green",
 "Kenton",
 "Kilburn Park",
 "Lambeth North",
 "Maida Vale",
 "Marylebone",
 "North Wembley",
 "Oxford Circus",
 "Paddington",
 "Piccadilly Circus",
 "Queen's Park",
 "Regent's Park",
 "South Kenton",
 "Stonebridge Park",
 "Warwick Avenue",
 "Waterloo",
 "Wembley Central",
 "Willesden Junction",
 "Bank",
 "Barkingside",
 "Bethnal Green",
 "Bond Street",
 "Buckhurst Hill",
 "Chancery Lane",
 "Chigwell",
 "Debden",
 "Ealing Broadway",
 "East Acton",
 "Epping",
 "Fairlop",
 "Gants Hill",
 "Grange Hill",
 "Greenford",
 "Hainault",
 "Hanger Lane",
 "Holborn",
 "Holland Park",
 "Lancaster Gate",
 "Leyton",
 "Leytonstone",
 "Liverpool Street",
 "Loughton",
 "Marble Arch",
 "Mile End",
 "Newbury Park",
 "North Acton",
 "Northolt",
 "Notting Hill Gate",
 "Perivale",
 "Queensway",
 "Redbridge",
 "Roding Valley",
 "Ruislip Gardens",
 "Shepherd's Bush",
 "Snaresbrook",
 "South Ruislip",
 "South Woodford",
 "St Paul's",
 "Stratford",
 "Theydon Bois",
 "Tottenham Court Road",
 "Wanstead",
 "West Acton",
 "West Ruislip",
 "White City",
 "Woodford",
 "Acton Town",
 "Aldgate East",
 "Barking",
 "Barons Court",
 "Becontree",
 "Blackfriars",
 "Bow Road",
 "Bromley-by-Bow",
 "Cannon Street",
 "Chiswick Park",
 "Dagenham East",
 "Dagenham Heathway",
 "Ealing Common",
 "Earl's Court",
 "East Ham",
 "East Putney",
 "Edgware Road (H & C)",
 "Elm Park",
 "Fulham Broadway",
 "Gloucester Road",
 "Gunnersbury",
 "Hammersmith (District and Picc)",
 "High Street Kensington",
 "Hornchurch",
 "Kensington (Olympia)",
 "Kew Gardens",
 "Mansion House",
 "Monument",
 "Parsons Green",
 "Plaistow",
 "Putney Bridge",
 "Ravenscourt Park",
 "Richmond",
 "Sloane Square",
 "South Kensington",
 "Southfields",
 "St. James's Park",
 "Stamford Brook",
 "Stepney Green",
 "Temple",
 "Tower Hill",
 "Turnham Green",
 "Upminster",
 "Upminster Bridge",
 "Upney",
 "Upton Park",
 "Victoria",
 "West Brompton",
 "West Ham",
 "West Kensington",
 "Westminster",
 "Whitechapel",
 "Wimbledon",
 "Wimbledon Park",
 "Aldgate",
 "Barbican",
 "Euston Square",
 "Farringdon",
 "Great Portland Street",
 "Hammersmith",
 "King's Cross St Pancras",
 "Moorgate",
 "Bermondsey",
 "Canada Water",
 "Canary Wharf",
 "Canning Town",
 "Canons Park",
 "Dollis Hill",
 "Finchley Road",
 "Green Park",
 "Kilburn",
 "Kingsbury",
 "London Bridge",
 "Neasden",
 "North Greenwich",
 "Queensbury",
 "Southwark",
 "St John's Wood",
 "Stanmore",
 "Swiss Cottage",
 "Wembley Park",
 "West Hampstead",
 "Willesden Green",
 "Amersham",
 "Chalfont and Latimer",
 "Chorleywood",
 "Colliers Wood",
 "Croxley",
 "Eastcote",
 "Harrow on the Hill",
 "Hillingdon",
 "Ickenham",
 "Moor Park",
 "North Harrow",
 "Northwick Park",
 "Northwood",
 "Northwood Hills",
 "Pinner",
 "Rayners Lane",
 "Rickmansworth",
 "Ruislip",
 "Ruislip Manor",
 "Uxbridge",
 "Watford",
 "West Harrow",
 "Angel",
 "Archway",
 "Balham",
 "Belsize Park",
 "Borough",
 "Brent Cross",
 "Burnt Oak",
 "Camden Town",
 "Chalk Farm",
 "Clapham Common",
 "Clapham North",
 "Clapham South",
 "Colindale",
 "East Finchley",
 "Edgware",
 "Euston",
 "Finchley Central",
 "Golders Green",
 "Goodge Street",
 "Hampstead",
 "Hendon Central",
 "High Barnet",
 "Highgate",
 "Kennington",
 "Kentish Town",
 "Leicester Square",
 "Mill Hill East",
 "Morden",
 "Mornington Crescent",
 "Old Street",
 "Oval",
 "South Wimbledon",
 "Stockwell",
 "Tooting Bec",
 "Tooting Broadway",
 "Totteridge and Whetstone",
 "Tufnell Park",
 "Warren Street",
 "West Finchley",
 "Woodside Park",
 "Alperton",
 "Arnos Grove",
 "Arsenal",
 "Boston Manor",
 "Bounds Green",
 "Caledonian Road",
 "Cockfosters",
 "Covent Garden",
 "Finsbury Park",
 "Hatton Cross",
 "Heathrow Terminal 4",
 "Heathrow Terminal 5",
 "Heathrow Terminals 123",
 "Holloway Road",
 "Hounslow Central",
 "Hounslow East",
 "Hounslow West",
 "Hyde Park Corner",
 "Knightsbridge",
 "Manor House",
 "North Ealing",
 "Northfields",
 "Oakwood",
 "Osterley",
 "Park Royal",
 "Russell Square",
 "South Ealing",
 "South Harrow",
 "Southgate",
 "Sudbury Hill",
 "Sudbury Town",
 "Turnpike Lane",
 "Wood Green",
 "Blackhorse Road",
 "Brixton",
 "Highbury and Islington",
 "Pimlico",
 "Seven Sisters",
 "Tottenham Hale",
 "Vauxhall",
 "Walthamstow Central"
];
// EXPLAIN CODE BELOW
// create costant called fish free
const fishFree = stations.filter((station)=> {
  const matcher = new RegExp([...searchTerm].join('|'), 'gi')
  return station.match(matcher)
})
.map(station => `<p>${station}</p>`)

// plop everything on body
document.body.innerHTML = fishFree

what does this part mean?

const fishFree = stations.filter((station)=> {

1 Answer

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Hey Jason,

This code is written in the new ECMAScript 6 and what you are looking at if you don't already know is the filter function written in the form of an "Arrow Function". Arrow functions are just the new way to write functions in javascript according to the new ECMAScript 6, you can read about that HERE.

The Filter function in Javascript is what is known as a "Higher Order Function" meaning a function that accepts another function as an argument just like callbacks in node if you're familiar with that. Filter is a method directly from the Array Object so you can use it on any array.

Ok so the code you are confused about is this in ECMAScript 6:

const fishFree = stations.filter((station)=> {

Now the same thing in ECMAScript 5:

var fishFree = stations.filter(function(station){

  • The const is a new ECMAScript6 keyword that allows you to make the value of the variable immutable (not changeable)

  • The station in the argument of the function within filter method is all the values returned from the array stations

So the goal of the filter function is to trim down an array with the desired values and the way that is done is by returning the desired station in the function that matches a condition. So I am going to write this in ECMAScript 5 just to avoid any confusion.

My Example of a Filter Function: (feel free to play around with it)

var people = [
  {name: "Jack", age: "30", occupation: "Programmer"},
  {name: "Bill", age: "22", occupation: "Policeman"},
  {name: "Jeff", age: "31", occupation: "Fireman"},
  {name: "Brenda", age: "26", occupation: "Mailman"},
  {name: "Ron", age: "25", occupation: "Basketball Player"},
  {name: "Jessica", age: "36", occupation: "Cashier"}
];

var newPeople = people.filter(function(person){
    return person.age >= 26;
});

//This will log out our new Array with every person that is 26 years and older
console.log(newPeople);

Hope all of this helps you have a better understanding. As for the ECMAScript 6 arrow function I would suggest you read the docs on that as well. All in all this is not to complicated or anything like that just play around with it for an hour or so and you will get it down.