More forEach and filter
Lesson Intro
Derek has a lot of very interesting stuff on his desk. Let’s talk about it!
Also: Because this is JavaScript (and everything is secretly an object) – an array is no different – and it has many very cool array functions (methods).
Ivy says
Will ya set a timer and tell us how long it takes to watch this video and do the follow-along parts? Thanks!
We find ourselves using these ones the most:
array.from()
, array.isArray()
, array.length
array.push()
, array.shift()
array.join()
, array.reverse()
, array.find()
, array.filter()
, array.forEach()
, array.map()
, array.reduce()
Now, we – are showing you these – in order – on purpose. So, we don’t want to hear about all of the “other things” that you tried. Just stick with these. Today is all about these.
We expect map and reduce to be pretty tricky! We’ll be talking about those in detail later — but try and try them all out.
If you can’t think of how to do that, (try) – then here’s a little challenge to try them all (and we have more challenges when you’re ready).
Exercises
-
Watch the video and follow along
Make sure to take a break – and make sure your data is unique to you.
-
Try out all of the array properties and methods
Get with a buddy and go over them one by one. Try and find a real-world use case for each / based on the projects you are building.
Newly introduced language features
-
JavaScript
Array filter
// array.filter(conditionFunction); // returns a new array of items that match the condition var numbers = [5, 10, 35, 12, 45]; var higherNumbers = numbers.filter( function(item, index, array) { if (item > 30) { return true; // explicitly return true to include item in the result } else { return false; // explicitly return false to exclude item } }); console.log( higherNumbers ); // [35, 45] function isHighNumber(number) { return number > 30; // directly return the condition result (true/false) } var higherNumbers = numbers.filter(isHighNumber); console.log( higherNumbers ); // [35, 45] // var shorter = numbers.filter( (item)=> item > 30 );
Note:
find
-
JavaScript
Arrow functions
const apes = ['Orangutans', 'Gorilla', 'Chimpanzees', 'Humans']; // classic foreach method with anonymous function apes.forEach( function(ape) { return console.log('1', ape); }); // a regular function function printApe(ape) { return console.log('2', ape); } // array.forEach method with named function passed in apes.forEach( printApe ); // does this feel mysterious? // an "arrow" function as an "anonymous" callback function apes.forEach( (ape) => console.log('3', ape) ); // implicit return // (starting to be the default in MDN documentation) // you can leave out the (arg) if there's only one apes.forEach( ape => printApe(ape) ); // if there is no argument you need empty parenthesis apes.forEach( () => console.log('4') ); // if you open up a codeblock, you need to explicitly return again apes.forEach( (ape)=> { return console.log('5', ape); }); // What ^ is happening here exactly? apes.forEach( function(ape) { return console.log('6', ape); }); // what is different about the syntax?
The 2015 edition of the ECMAScript specification (ES6) added arrow function expressions to the JavaScript language. Arrow functions are a new way to write anonymous function expressions
Sidenote for later:
- ES1: June 1997
- ES2: June 1998
- ES3: Dec. 1999
- ES4: Abandoned
- ES5: December 2009
- ES6: June 2015
But let’s not call these things ES-whatevers and instead call them by their year. It seemed like they were trying to get people hyped on “ES6” like how they did with HTML5 and CSS3, but there’s not going to be an HTML6 or ES7. We’ll just keep adding to it in pieces (or so they say). This way you can see exactly what features are in what spec and which of them are getting implemented into the browsers (when they eventually do).
The history is fun, but the only thing you really need to concern yourself with is ES2015 and onward.
ES2015 is when they added arrow functions and it’s not like they just worked on the first day of June. It took many more years after the specification was released for all the browsers to implement it. You can consider it the standard at this point. Anything ES2015 is available for you to use without any transpilation.
Sandbox