Created
March 17, 2020 16:00
-
-
Save claraj/329663aa565431bb540add174d4f8d23 to your computer and use it in GitHub Desktop.
Map, filter, spread operator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let cats = ['Hello Kitty', 'Maru', 'Garfield', 'Soymilk', 'Miles', 'Meridith'] | |
// Mapping - creating a new array built from elements of an existing array | |
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map | |
let uppercaseCats = cats.map( function(cat) { | |
return cat.toUpperCase() | |
}) | |
// Arrow function, full version | |
let uppercaseCats2 = cats.map( (cat) => { | |
return cat.toUpperCase() | |
}) | |
// more concise - one line, one argument, can omit () and {}. Return statement is implied. | |
let uppercaseCats3 = cats.map( cat => cat.toUpperCase() ) | |
console.log(uppercaseCats) | |
console.log(uppercaseCats2) | |
console.log(uppercaseCats3) | |
let catNameLengths = cats.map( function(cat) { | |
return cat.length | |
}) | |
let catNameLengths2 = cats.map( (cat) => { | |
return cat.length | |
}) | |
let catNameLengths3 = cats.map( cat => cat.length ) | |
// Compare to the imperitive method... | |
let catNameLengths4 = [] | |
cats.forEach( function(cat) { | |
let length = cat.length | |
catNameLengths4.push(length) | |
}) | |
console.log(catNameLengths) | |
console.log(catNameLengths2) | |
console.log(catNameLengths3) | |
console.log(catNameLengths4) | |
let firstLetters = cats.map( cat => cat[0] ) | |
console.log(firstLetters) | |
// Exercise: can you use map to create a new array with the last letter of each cat's name? | |
let startsWithM = cats.map( cat => cat[0] === 'm' || cat[0] == 'M') | |
console.log(startsWithM) | |
// Exercise: can you use map to create a new array of boolean values; | |
// whether a cat's name is longer than 6 letters or not. | |
// For the example, the array will be [ true, false, true, true, false, true] | |
let quizScores = [90, 100, 79, 81, 100, 40, 92, 64] | |
let letterGrades = quizScores.map( score => { | |
if (score >= 90) { return 'A'} | |
if (score >= 80) { return 'B'} | |
if (score >= 70) { return 'C'} | |
if (score >= 60) { return 'D'} | |
return 'F' | |
}) | |
console.log(letterGrades) | |
let scoreAndLetterGrades = quizScores.map( score => { | |
if (score >= 90) { return {score: score, grade: 'A'} } | |
if (score >= 80) { return {score: score, grade: 'B'} } | |
if (score >= 70) { return {score: score, grade: 'C'} } | |
if (score >= 60) { return {score: score, grade: 'D'} } | |
return {score: score, grade: 'F'} | |
}) | |
let scoreAndLetterGrades2 = quizScores.map( score => { | |
if (score >= 90) { return {score: score, grade: 'A'} } | |
if (score >= 80) { return {score: score, grade: 'B'} } | |
if (score >= 70) { return {score: score, grade: 'C'} } | |
if (score >= 60) { return {score: score, grade: 'D'} } | |
return {score: score, grade: 'F'} | |
}) | |
// Note: shortcut assignment operator for objects. | |
let cat = 'Meridith' | |
let owner = 'Taylor Swift' | |
let catAndOwner = { cat, owner } // Variable names become the keys | |
console.log(catAndOwner) // { cat: 'Meridith', owner: 'Taylor Swift' } | |
// Using that here, | |
let scoreAndLetterGrades3 = quizScores.map( score => { | |
let grade | |
if (score >= 90) { grade = 'A' } | |
else if (score >= 80) { grade = 'B' } | |
else if (score >= 70) { grade = 'C' } | |
else if (score >= 60) { grade = 'D' } | |
else { grade = 'F' } | |
return {score, grade} | |
}) | |
// more useful array/object shortcuts: the spread operator | |
let dogs = ['Einstein', 'Marley', 'Fly', 'Max', 'Scooby', 'Zero'] | |
let pets = [ ...cats, ...dogs] | |
console.log(pets) | |
console.log(scoreAndLetterGrades) | |
console.log(scoreAndLetterGrades2) | |
console.log(scoreAndLetterGrades3) | |
// Filtering | |
/* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter | |
*/ | |
let shortCatNames = cats.filter( cat => cat.length < 6) | |
console.log(shortCatNames) | |
let namesStartingWithG = cats.filter( cat => cat[0] === 'g' || cat[0] === 'G') | |
console.log(namesStartingWithG) | |
// Works with arrays of objects too | |
let students = [ | |
{name: 'andy', starId: 'aaa', present: true}, | |
{name: 'brian', starId: 'bbb', present: false}, | |
{name: 'catherine', starId: 'ccc', present: true}, | |
{name: 'clara', starId: 'ccc2', present: false}, | |
{name: 'duncan', starId: 'ddd', present: true}, | |
{name: 'steve', starId: 'sss', present: false}, | |
] | |
// Filter = make new array from only elements of existing array that meet a condition | |
let presentStudents = students.filter( student => student.present ) | |
console.log('Who is here?', presentStudents) | |
// Exercise: can you use filter create an array of students who are NOT present? | |
// Filter - remove students meeting a condition | |
let everyoneButClara = students.filter( student => student.name != 'clara') | |
console.log(everyoneButClara) // bye! | |
// If we have an example student, | |
let brian = students[1] | |
// Can remove with filter | |
let everyoneButBrian = students.filter( student => student != brian ) | |
console.log(everyoneButBrian) | |
let everyoneButDuncan = students.filter( function(student) { | |
return student.name != 'duncan' | |
}) | |
console.log(everyoneButDuncan) | |
// QUESTION: when mapping and filtering, does the original array change? | |
let onlyLetterC = students.filter( student => student.name.startsWith('c')) | |
console.log(onlyLetterC) | |
// Combine map and filter - get names of present students | |
let presentStudentNames = students.filter( student => student.present ).map( student => student.name ) | |
console.log(presentStudentNames) // [ 'andy', 'catherine', 'duncan' ] | |
// Exercise: can you create an array of starIDs of students who are NOT present? | |
// Spread operator works with arrays and objects too. | |
// So if there's another class, | |
let moreStudents = [ | |
{name: 'justin', starId: 'jjj', present: true}, | |
{name: 'mary', starId: 'mmm', present: false}, | |
] | |
let everyone = [ ...students, ...moreStudents ] | |
console.log(everyone) | |
// And with an object, can be used to copy an object into a new object and add/edit properties, | |
let student = {name: 'daniel', starId: 'ddd', present: true} | |
let studentPlusEmail = { ...student, email: '[email protected]'} | |
console.log(studentPlusEmail) | |
let studentChangedStarId = { ...student, starId: 'eee'} // make sure any attributes you change are at the end | |
console.log(studentChangedStarId) | |
// Similar functions: find returns the first match | |
let steve = students.find( student => student.name === 'steve') | |
let beyonce = students.find( student => student.name === 'beyonce') | |
console.log('steve', steve) | |
console.log('beyonce', beyonce) | |
// includes returns true if there are any matches. So is anyone here? | |
let isAnyoneHere = students.includes( student => student.present ) | |
console.log('Is anyone here?', isAnyoneHere) | |
// Is duncan in the class? | |
let isDuncanInClass = students.includes( student => student.name === 'duncan') | |
console.log('Is duncan in class?', isDuncanInClass) | |
// every returns true if all of the items match a condition. Is everyone here? | |
let isEveryoneHere = students.every( student => student.present ) | |
console.log('Is everyone here? ' + isEveryoneHere) | |
// Let's use map to get everyone here! | |
let everyoneIsHere = students.map( student => { return { ...student, present: true}} ) | |
let isEveryoneHere2 = everyoneIsHere.every( student => student.present ) | |
console.log('Is everyone here? ' + isEveryoneHere2) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment