Last active
March 22, 2022 14:59
-
-
Save m1k3yfoo/862a691fd26bbeac856114f3988a37da to your computer and use it in GitHub Desktop.
[JavaScript Array Methods: sort, map, reduce, some, every] Map calls the callback function 1 time for each element in the array. #JavaScript
This file contains 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
const inventors = [ | |
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, | |
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, | |
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, | |
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, | |
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, | |
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, | |
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, | |
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, | |
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, | |
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, | |
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, | |
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } | |
]; | |
const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; | |
// Array.prototype.filter() | |
// 1. Filter the list of inventors for those who were born in the 1500's | |
// const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600); also works | |
const fifteen = inventors.filter(function(inventor) { | |
if (inventor.year >= 1500 && inventor.year < 1600) { | |
return true; | |
} | |
}); | |
console.table(fifteen); | |
// Array.prototype.map(), map() returns a new array of the same length | |
// 2. Give us an array of the inventors' first and last names | |
const fullNames = inventors.map(inventor => { | |
return inventor.first + ' ' + inventor.last; | |
// or `${inventor.first} ${inventor.last}`; | |
}) | |
console.table(fullNames); | |
// Array.prototype.sort() | |
// 3. Sort the inventors by birthdate, oldest to youngest | |
const ordered = inventors.sort(function(a, b) { | |
if (a.year > b.year) { return 1; } | |
else { return -1; } | |
// Or use ternary operator | |
// return a.year > b.year ? 1: -1; | |
}); | |
console.table(ordered); | |
// Array.prototype.reduce() | |
// 4. How many years did all the inventors live? | |
const totalYears = inventors.reduce((total, inventor) => { | |
return total + (inventor.passed - inventor.year); | |
// the last parameter in reduce(), '0', is the initial value of total. If not provided, total will be undefined. | |
}, 0); | |
console.log(totalYears); | |
// 5. Sort the inventors by years lived | |
const oldest = inventors.sort((a, b) => { | |
const ageOfA = a.passed - a.year; | |
const ageOfB = b.passed - b.year; | |
return ageOfA > ageOfB ? 1 : -1; | |
}); | |
console.table(oldest); | |
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name | |
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris | |
const category = document.querySelector('.mw-category'); | |
// Select all the links inside the 'div' with the class 'mw-category'. Found using Chrome DevTools. querySelector() returns a node list, not an array, so we convert it to an array with Array.from() | |
// const links = Array.from(category.querySelectorAll('a')); | |
// console.log(links); | |
// This gives us just the text content inside that link | |
// const de = links.map(link => link.textContent).filter(streetName => streetName.includes('de')); | |
// Can be combined: | |
// const links = document.querySelector('.mw-category a'); | |
// 7. sort Exercise | |
// Sort the people alphabetically by last name | |
const sortedLastNames = people.sort(function(a, b) { | |
const [aLast, aFirst] = a.split(', '); | |
const [bLast, bFirst] = b.split(', '); | |
return aLast > bLast ? 1 : -1; | |
}); | |
console.table(sortedLastNames); | |
// 8. Reduce Exercise | |
// Sum up the instances of each of these | |
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; | |
const transportation = data.reduce((obj, item) => { | |
console.log(item); | |
if (!obj[item]) { obj[item] = 0; } | |
obj[item]++; | |
return obj; | |
// obj is initialized as an empty object | |
}, {}); | |
console.log(transportation); | |
const people = [ | |
{ name: 'Wes', year: 1988 }, | |
{ name: 'Kait', year: 1986 }, | |
{ name: 'Irv', year: 1970 }, | |
{ name: 'Lux', year: 2015 } | |
]; | |
const comments = [ | |
{ text: 'Love this!', id: 523423 }, | |
{ text: 'Super good', id: 823423 }, | |
{ text: 'You are the best', id: 2039842 }, | |
{ text: 'Ramen is my fav food ever', id: 123523 }, | |
{ text: 'Nice Nice Nice!', id: 542328 } | |
]; | |
// Some and Every Checks | |
// Array.prototype.some() // is at least one person 19 or older? | |
const isAdult = people.some((person) => { | |
const currentYear = (new Date()).getFullYear(); | |
return currentYear - person.year >= 19; | |
}); | |
// The above can be shortened to with arrow function and implicit return | |
const isAdult = people.some(person => | |
(new Date()).getFullYear() - person.year >= 19); | |
// Should return true | |
console.log(isAdult); | |
console.log({isAdult}); // Shows you the variable name AND the value | |
// Array.prototype.every() // is everyone 19 or older? | |
const allAdults = people.every(person => | |
(new Date()).getFullYear() - person.year >= 19); | |
console.log({allAdults}); // Should return false | |
// Array.prototype.find() | |
// Find is like filter, but instead returns just the one you are looking for | |
// find the comment with the ID of 823423 | |
const comment = comments.find(comment => comment.id === 82423); | |
console.log({comment}); | |
// Array.prototype.findIndex() | |
// Find the comment with this ID | |
// delete the comment with the ID of 823423 | |
const index = comments.findIndex(comment => comment.id === 82423); | |
console.log(index); // Returns 1 | |
comments.splice(index, 1); // Delete comment at index 1 | |
// Creating a new array is preferred by the React community. If you don't use the spread operator, your new array will contain 2 arrays | |
const newComments = [ | |
// Copies elements from 0 to index (exclusive) | |
...comments.slice(0, index), | |
// Copies elements from position index+1 to the end of the array | |
...comments.slice(index+1) | |
]; | |
console.table(newComments); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment