Updated the Content of Polyfills Page of DSA in JS

ujjawalsh99 · Oct 3, 2023 · e0612cf · e0612cf
1 parent 243e6a1
commit e0612cf
Show file tree

Hide file tree

Showing 33 changed files with 277 additions and 42 deletions.
diff --git a/content/batch/build/interview/counter.mdx b/content/batch/build/interview/counter.mdx
@@ -5,7 +5,7 @@ description: Interview Question
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
+Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
 
 </Callout>
 

diff --git a/content/batch/build/interview/like.mdx b/content/batch/build/interview/like.mdx
@@ -5,7 +5,7 @@ description: Interview Question
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
+Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
 
 </Callout>
 

diff --git a/content/batch/build/interview/star-rating.mdx b/content/batch/build/interview/star-rating.mdx
@@ -5,7 +5,7 @@ description: Interview Question
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
+Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
 
 </Callout>
 

diff --git a/content/batch/build/interview/table.mdx b/content/batch/build/interview/table.mdx
@@ -5,7 +5,7 @@ description: Interview Question
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
+Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
 
 </Callout>
 

diff --git a/content/batch/build/interview/tabs.mdx b/content/batch/build/interview/tabs.mdx
@@ -5,7 +5,7 @@ description: Interview Question
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
+Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
 
 </Callout>
 

diff --git a/content/batch/build/interview/transfer-list.mdx b/content/batch/build/interview/transfer-list.mdx
@@ -5,7 +5,7 @@ description: Interview Question
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
+Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
 
 </Callout>
 

diff --git a/content/batch/build/react/fundamentals.mdx b/content/batch/build/react/fundamentals.mdx
@@ -5,7 +5,7 @@ description: Counter app using react
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
+Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
 
 </Callout>
 

diff --git a/content/batch/build/react/quiz.mdx b/content/batch/build/react/quiz.mdx
@@ -5,7 +5,7 @@ description: Learn ReactJS By building a Quiz app
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
+Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
 
 </Callout>
 

diff --git a/content/batch/build/react/todo.mdx b/content/batch/build/react/todo.mdx
@@ -5,7 +5,7 @@ description: Learn ReactJS By building a todo app
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
+Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
 
 </Callout>
 

diff --git a/content/batch/dsa/advance-sorting.mdx b/content/batch/dsa/advance-sorting.mdx
@@ -5,6 +5,6 @@ description: Learn  Advance Sorting in JavaScript
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
+Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
 
 </Callout>
diff --git a/content/batch/dsa/array.mdx b/content/batch/dsa/array.mdx
@@ -5,5 +5,5 @@ description: Learn Arrays in JavaScript
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
+Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
 </Callout>
diff --git a/content/batch/dsa/basic-sorting.mdx b/content/batch/dsa/basic-sorting.mdx
@@ -5,5 +5,5 @@ description: Learn Sorting in JavaScript
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
+Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
 </Callout>
diff --git a/content/batch/dsa/linked-list.mdx b/content/batch/dsa/linked-list.mdx
@@ -5,5 +5,5 @@ description: Learn Linked List in JavaScript
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
+Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
 </Callout>
diff --git a/content/batch/dsa/loops.mdx b/content/batch/dsa/loops.mdx
@@ -5,5 +5,5 @@ description: Learn Loops in JavaScript
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
+Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
 </Callout>
diff --git a/content/batch/dsa/objects.mdx b/content/batch/dsa/objects.mdx
@@ -5,5 +5,5 @@ description: Learn Objects in JavaScript
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
+Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
 </Callout>
diff --git a/content/batch/dsa/polyfills.mdx b/content/batch/dsa/polyfills.mdx
@@ -5,5 +5,246 @@ description: Learn Polyfills in JavaScript
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
-</Callout>
+Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website).
+
+</Callout>
+
+## What's on this page?
+
+- 🔍 Learn about Polyfills.
+- 💡 Explore Polyfills of different array methods.
+
+<Tabs defaultValue="learn">
+
+<TabsList>
+  <TabsTrigger value="learn">Learn</TabsTrigger>
+  <TabsTrigger value="assignment">Assignment</TabsTrigger>
+  <TabsTrigger value="interview">Interview Questions</TabsTrigger>
+  <TabsTrigger value="playground">Playground</TabsTrigger>  
+</TabsList>
+
+
+<TabsContent value="learn">
+
+ ## 📺 Watch Now
+
+<VideoPlayer src="https://www.youtube.com/watch?v=NFvpyWQRMKQ&ab_channel=VishalRajput"/>
+
+<Callout type="info">
+    We hope that you found the tutorial video helpful in understanding the concept of Polyfills, You can refer this notes 📝 for quick revision.
+</Callout>
+
+## Notes
+
+### Map in JavaScript
+
+```javascript
+const employees = [
+    { name: 'John', age: 32 },
+    { name: 'Sarah', age: 28 },
+    { name: 'Michael', age: 40 },
+];
+
+const employeesName = employees.map(employee => employee.name);
+console.log(myEmployeesName); // ["John", "Sarah", "Michael"]
+```
+
+### Polyfill of map()
+
+```javascript
+if (!Array.prototype.myMap) {
+    Array.prototype.myMap = function (callback) {
+        const result = [];
+        for (let i = 0; i < this.length; i++) {
+            result.push(callback(this[i], i, this));
+        }
+        return result;
+    };
+}
+
+const myEmployeesName = employees.myMap(employee => employee.name);
+
+console.log(myEmployeesName); // ["John", "Sarah", "Michael"]
+```
+
+### Filter In JavaScript
+
+```javascript
+const products = [
+    { name: 'iPhone', price: 999, inStock: true },
+    { name: 'Samsung Galaxy', price: 899, inStock: false },
+    { name: 'Google Pixel', price: 799, inStock: true },
+];
+
+const availableProducts = products.filter(product => product.inStock);
+// [
+//     { name: 'iPhone', price: 999, inStock: true },
+//     { name: 'Google Pixel', price: 799, inStock: true },
+// ]
+```
+
+### Polyfill of filter()
+
+```javascript
+if (!Array.prototype.myFilter) {
+    Array.prototype.myFilter = (callback) => {
+        const result = [];
+        for (let i = 0; i < this.length; i++) {
+            if (callback(this[i], i, this)) {
+                result.push(this[i]);
+            }
+        }
+        return result;
+    };
+}
+
+const myAvailableProducts = products.myFilter(product => product.inStock);
+
+console.log(availableProducts); 
+// [
+//     { name: 'iPhone', price: 999, inStock: true },
+//     { name: 'Google Pixel', price: 799, inStock: true },
+// ]
+```
+
+### Reduce in JavaScript
+
+```javascript
+const orders = [
+    { product: 'iPhone', price: 999, quantity: 2 },
+    { product: 'Samsung Galaxy', price: 899, quantity: 1 },
+    { product: 'Google Pixel', price: 799, quantity: 3 },
+];
+
+const totalAmount = orders.reduce(function (accumulator, order) {
+    return accumulator + order.price * order.quantity;
+}, 0);
+
+console.log(totalAmount); // 5294
+```
+
+### Polyfill of reduce()
+
+```javascript
+if (!Array.prototype.myFilter) {
+    Array.prototype.myReduce = (callback, initialValue) => {
+        let accumulator = initialValue === undefined ? this[0] : initialValue;
+        for (let i = initialValue === undefined ? 1 : 0; i < this.length; i++) {
+            accumulator = callback(accumulator, this[i], i, this);
+        }
+        return accumulator;
+    };
+}
+
+const myTotalAmount = orders.myReduce(function (accumulator, order) {
+    return accumulator + order.price * order.quantity;
+}, 0);
+
+console.log(totalAmount); // 5294
+```
+
+
+</TabsContent>
+
+<TabsContent value="assignment">
+
+    ### 📌🔨 Practice Questions
+
+### Question 1: Filter out books published before the year 2000 and return their titles
+
+```javascript
+const books = [
+    { title: 'Book 1', year: 1998 },
+    { title: 'Book 2', year: 2003 },
+    { title: 'Book 3', year: 1995 },
+    { title: 'Book 4', year: 2001 },
+];
+
+// Expected Output: ['Book 2', 'Book 4']
+```
+
+### Question 2: Capitalize the first letter of each word in the array
+
+```javascript
+const strings = ['hello world', 'i am openai', 'welcome to javascript'];
+
+// Expected Output: ['Hello World', 'I Am Openai', 'Welcome To Javascript']
+```
+
+
+    ### ❓Unclear with concepts? 📺 Watch This
+
+    <VideoPlayer src="https://www.youtube.com/watch?v=NFvpyWQRMKQ&ab_channel=VishalRajput"/>
+
+
+
+</TabsContent>
+
+<TabsContent value="interview">
+
+
+### Question 1: Find the longest word length
+
+```javascript
+const words = ['apple', 'banana', 'cherry', 'dragonfruit', 'elderberry'];
+
+const longestWordLength = words.reduce((maxLength, word) => {
+    const currentLength = word.length;
+    return currentLength > maxLength ? currentLength : maxLength;
+}, 0);
+
+console.log(longestWordLength); // Output: 12
+```
+
+### Question 2: Find the longest word
+
+```javascript
+const longestWord = words.reduce((longestWord, word) => {
+    return word.length > longestWord.length ? word : longestWord;
+}, "");
+
+console.log(longestWord); // Output: 'dragonfruit'
+```
+
+### Question 3: Calculate the factorial of the largest number in the array
+
+```javascript
+const numbers = [5, 2, 8, 4, 3];
+
+const largestFactorial = numbers.reduce((largest, num) => {
+    const currentFactorial = Array
+    .from({ length: num })
+    .map((_, i) => i + 1)
+    .reduce((fact, val) => fact * val, 1);
+
+    return currentFactorial > largest ? currentFactorial : largest;
+}, 1);
+
+console.log(largestFactorial); // Output: 40320 (8!)
+```
+
+### Question 4: Calculate the average score of students who scored above 90
+
+```javascript
+const students = [
+    { name: 'John', score: 85 },
+    { name: 'Sarah', score: 92 },
+    { name: 'Michael', score: 88 },
+    { name: 'Emma', score: 95 },
+    { name: 'Daniel', score: 90 },
+];
+
+const above90StudentsAverage = students
+    .filter((student) => student.score > 90)
+    .reduce((acc, student, i, arr) => acc + student.score / arr.length, 0);
+
+console.log(above90StudentsAverage); // Output: 93.5 (average of 95 and 92)
+```
+
+</TabsContent>
+
+<TabsContent value="playground">
+    Coming Soon
+</TabsContent>
+
+</Tabs>
diff --git a/content/batch/dsa/queue.mdx b/content/batch/dsa/queue.mdx
@@ -5,5 +5,5 @@ description: Learn Queue in JavaScript
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
+Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
 </Callout>
diff --git a/content/batch/dsa/recursion.mdx b/content/batch/dsa/recursion.mdx
@@ -5,5 +5,5 @@ description: Learn Recursion in JavaScript
 
 <Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
+Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
 </Callout>