|
| 1 | +# Map, Filter & Reduce & their Polyfills |
| 2 | + |
| 3 | +<p align="center"> |
| 4 | + <a href="https://youtu.be/NFvpyWQRMKQ"> |
| 5 | + <img src="https://img.youtube.com/vi/NFvpyWQRMKQ/0.jpg" alt="Map, Filter & Reduce & their Polyfills" /> |
| 6 | + </a> |
| 7 | +</p> |
| 8 | + |
| 9 | +Sure, here's the complete text converted into Markdown: |
| 10 | + |
| 11 | +## Map in JavaScript |
| 12 | + |
| 13 | +```javascript |
| 14 | +const employees = [ |
| 15 | + { name: 'John', age: 32 }, |
| 16 | + { name: 'Sarah', age: 28 }, |
| 17 | + { name: 'Michael', age: 40 }, |
| 18 | +]; |
| 19 | + |
| 20 | +const employeesName = employees.map(employee => employee.name); |
| 21 | + |
| 22 | +// Polyfill of map() |
| 23 | +if (!Array.prototype.myMap) { |
| 24 | + Array.prototype.myMap = function (callback) { |
| 25 | + const result = []; |
| 26 | + for (let i = 0; i < this.length; i++) { |
| 27 | + result.push(callback(this[i], i, this)); |
| 28 | + } |
| 29 | + return result; |
| 30 | + }; |
| 31 | +} |
| 32 | + |
| 33 | +const myEmployeesName = employees.myMap(employee => employee.name); |
| 34 | + |
| 35 | +console.log(myEmployeesName); // ["John", "Sarah", "Michael"] |
| 36 | +``` |
| 37 | + |
| 38 | +## Filter In JavaScript |
| 39 | + |
| 40 | +```javascript |
| 41 | +const products = [ |
| 42 | + { name: 'iPhone', price: 999, inStock: true }, |
| 43 | + { name: 'Samsung Galaxy', price: 899, inStock: false }, |
| 44 | + { name: 'Google Pixel', price: 799, inStock: true }, |
| 45 | +]; |
| 46 | + |
| 47 | +const availableProducts = products.filter(product => product.inStock); |
| 48 | + |
| 49 | +// Polyfill of filter() |
| 50 | +if (!Array.prototype.myFilter) { |
| 51 | + Array.prototype.myFilter = (callback) => { |
| 52 | + const result = []; |
| 53 | + for (let i = 0; i < this.length; i++) { |
| 54 | + if (callback(this[i], i, this)) { |
| 55 | + result.push(this[i]); |
| 56 | + } |
| 57 | + } |
| 58 | + return result; |
| 59 | + }; |
| 60 | +} |
| 61 | + |
| 62 | +const myAvailableProducts = products.myFilter(product => product.inStock); |
| 63 | + |
| 64 | +console.log(availableProducts); |
| 65 | +// [ |
| 66 | +// { name: 'iPhone', price: 999, inStock: true }, |
| 67 | +// { name: 'Google Pixel', price: 799, inStock: true }, |
| 68 | +// ] |
| 69 | +``` |
| 70 | + |
| 71 | +## Reduce in JavaScript |
| 72 | + |
| 73 | +```javascript |
| 74 | +const orders = [ |
| 75 | + { product: 'iPhone', price: 999, quantity: 2 }, |
| 76 | + { product: 'Samsung Galaxy', price: 899, quantity: 1 }, |
| 77 | + { product: 'Google Pixel', price: 799, quantity: 3 }, |
| 78 | +]; |
| 79 | + |
| 80 | +const totalAmount = orders.reduce(function (accumulator, order) { |
| 81 | + return accumulator + order.price * order.quantity; |
| 82 | +}, 0); |
| 83 | + |
| 84 | +// Polyfill of reduce() |
| 85 | +if (!Array.prototype.myFilter) { |
| 86 | + Array.prototype.myReduce = (callback, initialValue) => { |
| 87 | + let accumulator = initialValue === undefined ? this[0] : initialValue; |
| 88 | + for (let i = initialValue === undefined ? 1 : 0; i < this.length; i++) { |
| 89 | + accumulator = callback(accumulator, this[i], i, this); |
| 90 | + } |
| 91 | + return accumulator; |
| 92 | + }; |
| 93 | +} |
| 94 | + |
| 95 | +const myTotalAmount = orders.myReduce(function (accumulator, order) { |
| 96 | + return accumulator + order.price * order.quantity; |
| 97 | +}, 0); |
| 98 | + |
| 99 | +console.log(totalAmount); |
| 100 | +``` |
| 101 | + |
| 102 | +### Question 1: Find the longest word length |
| 103 | + |
| 104 | +```javascript |
| 105 | +const words = ['apple', 'banana', 'cherry', 'dragonfruit', 'elderberry']; |
| 106 | + |
| 107 | +const longestWordLength = words.reduce((maxLength, word) => { |
| 108 | + const currentLength = word.length; |
| 109 | + return currentLength > maxLength ? currentLength : maxLength; |
| 110 | +}, 0); |
| 111 | + |
| 112 | +console.log(longestWordLength); // Output: 12 |
| 113 | +``` |
| 114 | + |
| 115 | +### Question 2: Find the longest word |
| 116 | + |
| 117 | +```javascript |
| 118 | +const longestWord = words.reduce((longestWord, word) => { |
| 119 | + return word.length > longestWord.length ? word : longestWord; |
| 120 | +}, ""); |
| 121 | + |
| 122 | +console.log(longestWord); // Output: 'dragonfruit' |
| 123 | +``` |
| 124 | + |
| 125 | +### Question 3: Calculate the factorial of the largest number in the array |
| 126 | + |
| 127 | +```javascript |
| 128 | +const numbers = [5, 2, 8, 4, 3]; |
| 129 | + |
| 130 | +const largestFactorial = numbers.reduce((largest, num) => { |
| 131 | + const currentFactorial = Array |
| 132 | + .from({ length: num }) |
| 133 | + .map((_, i) => i + 1) |
| 134 | + .reduce((fact, val) => fact * val, 1); |
| 135 | + |
| 136 | + return currentFactorial > largest ? currentFactorial : largest; |
| 137 | +}, 1); |
| 138 | + |
| 139 | +console.log(largestFactorial); // Output: 40320 (8!) |
| 140 | +``` |
| 141 | + |
| 142 | +### Question 4: Calculate the average score of students who scored above 90 |
| 143 | + |
| 144 | +```javascript |
| 145 | +const students = [ |
| 146 | + { name: 'John', score: 85 }, |
| 147 | + { name: 'Sarah', score: 92 }, |
| 148 | + { name: 'Michael', score: 88 }, |
| 149 | + { name: 'Emma', score: 95 }, |
| 150 | + { name: 'Daniel', score: 90 }, |
| 151 | +]; |
| 152 | + |
| 153 | +const above90StudentsAverage = students |
| 154 | + .filter((student) => student.score > 90) |
| 155 | + .reduce((acc, student, i, arr) => acc + student.score / arr.length, 0); |
| 156 | + |
| 157 | +console.log(above90StudentsAverage); // Output: 93.5 (average of 95 and 92) |
| 158 | +``` |
| 159 | + |
| 160 | +## Practice Questions |
| 161 | + |
| 162 | +### Question 5: Filter out books published before the year 2000 and return their titles |
| 163 | + |
| 164 | +```javascript |
| 165 | +const books = [ |
| 166 | + { title: 'Book 1', year: 1998 }, |
| 167 | + { title: 'Book 2', year: 2003 }, |
| 168 | + { title: 'Book 3', year: 1995 }, |
| 169 | + { title: 'Book 4', year: 2001 }, |
| 170 | +]; |
| 171 | + |
| 172 | +// Expected Output: ['Book 2', 'Book 4'] |
| 173 | +``` |
| 174 | + |
| 175 | +### Question 6: Capitalize the first letter of each word in the array |
| 176 | + |
| 177 | +```javascript |
| 178 | +const strings = ['hello world', 'i am openai', 'welcome to javascript']; |
| 179 | + |
| 180 | +// Expected Output: ['Hello World', 'I Am Openai', 'Welcome To Javascript'] |
| 181 | +``` |
0 commit comments