Map, Filter & Reduce in JavaScript | JavaScript Tutorial in Hindi #20
Map, Filter & Reduce in JavaScript | JavaScript Tutorial in Hindi #20
Link to the Repl - https://replit.com/@codewithharry/20m…
Join Replit - https://join.replit.com/CodeWithHarry
Download Notes - https://drive.google.com/drive/folder…
Ultimate JS Course Playlist: • JavaScript Tutorials for Beginners in…
►Checkout my English channel here: / @programmingwithharry
►Instagram: www.instagram.com/codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 by CodeWithHarry
►Learn in One Video[++]:
Python[15 Hr] - • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr] - • Python Programming Course in Hindi (A…
Python[1 Hr] - • Learn Python In Hindi In One Video - …
Python[2 Hr] - • Python Tutorial In Hindi 🔥
Python[15 Min] - • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr] - • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial For Beginners:…
php[1 Hr] - • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr] - • Php Tutorial for Beginners in Hindi w…
php[Project]- • Login And Registration Form Using Php…
HTML[30 Min] - • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr] - • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr] - • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr] - • How To Make a WordPress Website | Wor…
Angular[2 Hr] - • Angular Tutorial in Hindi
Java[2.3 Hr] - • Java tutorial in hindi 🔥
Web Scraping[1 Hr] - • Web Scraping Tutorial using Python an…
MongoDB[2 Hr] - • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr] - • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tutorial For Begi…
Linux[1 Hr] - • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr] - • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr] - • Git \u0026 GitHub Tutorial For Beginners I…
►Complete course [playlist]:
React - • React Js Tutorials in Hindi
Python- • Python Tutorials For Absolute Beginne…
OOP Python- • Object Oriented Programming Tutorials…
Java - • Java Tutorials For Beginners In Hindi
JavaScript- • JavaScript Tutorials In Hindi
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials In Hindi
C++- • C++ Tutorials In Hindi
Git \u0026 GitHub- • Git and GitHub Tutorials In Hindi
Android Dev- • Android Development Tutorials in Hindi
Python GUI- • Python GUI: Tkinter Tutorial In Hindi…
Web Development- • Web Development Tutorials For Beginne…
Python Django - • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript- • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo - • Data Structures and Algorithms Course…
Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular) - https://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
Twitter - https://twitter.com/CodeWithHarry
Comment “#HarryBhai” if you read this 😉😉
Content
0.092 -> If you people have heard about Map, Filter and Reduce
2.445 -> then these are higher order array methods.
4.926 -> If you guys use Map, Filter and Reduce
8.135 -> then you save a lot of time
9.655 -> In today's video I am going to tell you the same.
12.144 -> that how to save your time by using Map, Filter and Reduce
15.55 -> This is the methods of modern JavaScript
17.542 -> Let's go to the computer screen.
19.034 -> and see and understand these methods
27.489 -> So now we will learn about Map, Filter and Reduce
30.862 -> So what will I do quickly
32.46 -> I will create a 28th repl in my folder
35.097 -> containing this Ultimate JavaScript course inside replit.
38.431 -> So I'll open it and make a repl here too,
42.72 -> So here you guys can see
43.613 -> I've created a repl named Map, Filter and Reduce
46.424 -> I'll come back in notes again
48.187 -> And I will tell you one by one about map, filter and reduce
51.36 -> First of all we will know about map method.
53.784 -> Map method doesn't do anything, It's very simple thing
56.67 -> We saw about foreach in previous video
58.482 -> And we saw that foreach takes an argument which is a value
62.452 -> and we can print, do anything with that value
65.253 -> But actually foreach takes 3 arguments : Value, Index or Array
69.21 -> What is the value
70.318 -> The value is like (a = 1, 2, 3), so 1, 2, 3 will come one by one
73.785 -> What is the index? 0, 1, 2
75.326 -> and array? this is the entire array
77.849 -> Value, index and array are also arguments inside the map.
81.789 -> And at the same time
82.936 -> You can use whatever you have, anytime with foreach and map
87.596 -> And look one more thing
89.105 -> Does it need to be memorized, that it needs to be remembered
91.312 -> Absolutely not
91.993 -> Because you guys can use this as a reference
95.611 -> You can google this notes
98.292 -> You can make your own reference, Ok
100.147 -> So it is not like that you people need to memorize anything
102.813 -> With that said : we will come in our own repl
106.12 -> Let's make an array, and inside that array I will write
110.05 -> 45, 23, and 21
113.883 -> Now why did I write these numbers,
115.13 -> why not write anything else
115.793 -> it's a random number, Ok
117.332 -> If console.log do this too
119.983 -> then you will say why you are passing the time, Ok
122.571 -> So I will not do this console.log
124.4 -> Let me zoom a little bit so that you guys can understand
126.135 -> I just wanted to run this and see
128.173 -> that the repl is going well, it is not going well
130.464 -> It is running, it is fine.
131.503 -> So I wrote (arr =) something like this
133.433 -> Now I tell you people that if I write a map here (arr. map(()))
138.355 -> and I can run a function something like this
143.053 -> And here only one thing
144.951 -> Here also
146.546 -> I also do one thing, I write it's value in this way
149.244 -> because I have used the value in the notes too.
151.013 -> You can write the element
152.241 -> Well, you can write the value
153.991 -> Just make ensure
155.002 -> that whatever argument this function is taking
156.579 -> you will get the same thing here
158.175 -> If I do console.log(value) and run it then what will happen
162.405 -> It is a simple thing, also I remove it a bit.
164.587 -> I remove console.log(arr)
166.646 -> Its simple thing that these values will be printed one by one
169.811 -> But then what is the difference between map and foreach
172.853 -> Ok, what's the difference?
174.334 -> So what is map it makes a new array, Ok
177.951 -> By performing some operation on each array elements.
181.412 -> OK, creates a new array and returns it
183.828 -> So I can say something like this
185.694 -> let a =
187.826 -> or console.log(a)
190.491 -> And I can return something here
194.738 -> Like let's say I returned the value
196.704 -> Okay
197.515 -> So what will happen
198.429 -> that will become same array
199.752 -> But this doesn't make any sense
201.183 -> Because exactly I am creating an array.
202.442 -> that's why I will also write (value +1)
203.986 -> and you see that
204.996 -> A new array has been created by adding
206.441 -> all these elements one by one
208.183 -> So we use map when we have to create a new array
211.312 -> and foreach : when we have to do any operation
214.765 -> on the existence element of an array, Okay.
217.478 -> So you need to understand this thing a lot
219.882 -> Many people are confused that
221.728 -> what is the difference between foreach and map.
223.63 -> Here's the difference
224.207 -> The map creates a new array
225.793 -> and what the foreach loop does is a loop that iterates over and over
229.218 -> and does something for each array element, Ok
231.432 -> I hope you understand this thing
232.615 -> now listen to me carefully
233.956 -> Now the functions of foreach and map are arrays
235.924 -> They have some additional arguments that you can give
238.24 -> One is index, and one is array
239.953 -> If I can write index here
241.306 -> just put value and index here
243.346 -> and here i do console.log(value, index)
245.919 -> So what will happen
247.134 -> that first 45 comes then 0,
249.309 -> then 45, 23 comes, 1 comes
251.18 -> then I will get the value and index
253.057 -> and I can also give third argument
255.109 -> And I can give array here
257.105 -> Ok so let's print value, index, and array all three things
260.171 -> So you see, here
261.734 -> These three things will be printed
262.852 -> 45, 0, this
264.148 -> 23, 1 and the whole array,
265.563 -> 21, 2 and the whole array
267.183 -> and this is what console.log(a)
268.43 -> that created the new array got printed out, Ok
270.603 -> So what you guys can do here,
272.28 -> Take the values, take the index,
274.066 -> and take the array when you're using map,
277.046 -> Same thing you can do with foreach too, Ok
279.105 -> So you have a new array that'll get it, Ok
282.554 -> What will that new array be,
283.597 -> whatever is being returned will be made up of those elements
286.56 -> Like let's say (value + index) Okay
289.714 -> So 45 will add 0,
290.882 -> 23 will add 1, 21 will add 2
292.843 -> So we get 45, 24 and 23, Ok
296.771 -> So we get 45, 23, and 24, Ok
298.762 -> So we can use these values inside this functions, Okay
302.578 -> So you guys keep this thing in mind
303.817 -> So this is the map
305.082 -> That make a new array
306.484 -> and with which values make a new array
309.464 -> make a new array with these values
310.602 -> When will the first element of the array contain : (value + index)
313.738 -> What will be the index for the first iteration : 0
316.048 -> What will be the value : 45
317.597 -> Then what will happen after that
318.67 -> Index will be 1
319.985 -> What will be the value : 23
320.977 -> and what will be the index : 2,
322.129 -> what will be the value : 21
323.197 -> So in this way you guys can do
324.732 -> So i write here
327.265 -> Array map method, Okay
329.921 -> Now what I am going to tell you people
331.485 -> That is the filter method, Okay
333.591 -> And the filter method is very simple.
335.613 -> You have an array, Ok
337.59 -> let's say here arr1, arr2, arr3
340.513 -> Let's say, I put arr2 over here, Ok
343.482 -> arr2 = , Let's say I did this
346.257 -> and let's say I put 0, 3, and 5 in here, Okay
351.322 -> I want to get only those elements
354.01 -> which are less than 5 or say 10, Ok
358.222 -> So what will I write here
359.12 -> I will write : arr2.filter(())
361.314 -> And I'll give a function which will be the filter function, Okay
364.506 -> So I'll put the value here too, Okay
367.618 -> You can name it anything
368.575 -> you can keep its value,
369.669 -> you can put it (a)
371.392 -> and you can return here, a >, or else a < 10
376.698 -> Now the items for which (a < 10) will be
381.113 -> those items will be in our new array
383.151 -> So here a2 = do if, and then console.log(a2)
390.795 -> If I do console.log(a2) here
393.509 -> then you will see
395.366 -> that I will get only those elements which are less than 10
398.069 -> So what I did is
399 -> Give a filter function to the filter
400.907 -> for values for which the filter function is returning true
403.891 -> I got those values in my new array too
406.842 -> Okay
407.342 -> It is very simple
408.414 -> If you don't understand, listen again what I said
411.134 -> I wrote the name of the array
412.555 -> Wrote (.filter),
413.485 -> gave a function inside it
415.724 -> And the values for which the function is returning true
420.905 -> I will get those values in my (a2)
423.589 -> Like 45 is not less than 10,
425.271 -> 23 is not less than 10,
427.158 -> 21 is not less than 10.
429.156 -> 0, 3, and 5 are less than 10
431.13 -> So in this order it has arrived in the new array, Ok
434.133 -> 0, 3, and 5 output came
435.376 -> and this is the output you see, you see its output
437.893 -> This is what I wrote here
439.029 -> and this console.log is written
440.631 -> so it looks like, right
442.374 -> If I comment this out also for you guys,
444.005 -> then you will only see this our array of filter 0, 3, and 5
447.386 -> Okay
448.455 -> So I hope you have understood the filter
450.471 -> I have written the definition of the filter:
451.792 -> Filters an array with values that passes a test
455.41 -> Okay
455.974 -> What do you do?
456.656 -> You give a function,
457.725 -> the values for which the function is returning true,
459.669 -> you will see these values in your new array
462.533 -> And the ones for which true is not returning
464.939 -> You will not get to see in the new array
467.658 -> Do these functions modify our original array
472.712 -> The answer is NO
473.922 -> They don't do it
475.019 -> So if I just print (arrr) do it right here, Ok
478.083 -> I'll do it to him too.
479.417 -> just print (arr) over here
481.006 -> So my (arr) won't change, It will remain 45, 23, 21
485.027 -> and if i print (arr2) in the same way
489.099 -> If I say here, What is my arr2
491.423 -> Then even my original array will not change here, Okay?
495.938 -> arr2 will not change here too
497.842 -> It will remain 45, 23, 21, 0, 3, 5, Ok
501.54 -> So my original array will not change, remember it, Ok
505.478 -> Now let's talk about reduce method
507.318 -> and most people get confused in reduce, Okay
509.798 -> But that does not mean that reduce is difficult
511.622 -> I think it's very straight forward
513.951 -> Ok
514.552 -> Reduce method
516.095 -> So I do one thing, I comment out all the console logs
519.601 -> So that there is no problem, Ok
521.975 -> Now what does the reduce method do
523.537 -> For example, I have an arr3
525.301 -> Well, I am creating a new array here
526.555 -> So that the context is in front, you will come to understand
529.052 -> Okay
529.995 -> Now I want to keep some simple values in it
532.367 -> because whatever I want to tell you
535.41 -> Ok, and I can also put in the repeated values in the array
537.656 -> There is no rule that I cannot keep repeated values.
540.483 -> If i write here : arr3.reduce(())
544.074 -> And I can put here (a),
545.648 -> can put me (b), can put me (harry) too, It's my choice
548.43 -> Ok
549.416 -> The argument inside this function is my choice
551.812 -> with the same name, I will get the value inside the function
554.851 -> You guys understand this.
556.189 -> Like, suppose I have written (h) here
558.565 -> I will get it here
559.681 -> I can also do something like this (return h)
561.933 -> Okay
562.507 -> I do (h1, h2)
564.444 -> return h1 + h2
566.899 -> Okay
568.51 -> Now what if I can give arr3.reduce here and a function
573.894 -> So what will be the return
575.085 -> Suppose i make a new array as : newarr3
580.68 -> and do this : console.log(newarr3), Ok
587.792 -> Run this too
589.764 -> Then you guys will see the print : 14
592.194 -> Now where did this 14 come from, Ok
594.38 -> What does it do that looks at this function first of all,
596.793 -> Okay
597.331 -> Look at the function that is reducing
599.093 -> After seeing this function let's see what it is doing
601.138 -> This function is working very simple
602.805 -> Doing (h1 + h2)
604.097 -> First it will take 1 and 2
605.854 -> get it passed through this function
607.344 -> get it passed through this function
609.046 -> What came?
609.644 -> 3 came
610.62 -> Now it will take 3 and 3
612.511 -> then pass it to this function
613.861 -> What came!
614.361 -> (3 + 3 = 6) came
615.923 -> Then it will take 6 and 5
617.419 -> get passed to this function
619.87 -> What came!
621.811 -> 11 came
623.099 -> Then after that it would take 11 and 2
624.786 -> pass through this function
625.964 -> What came!
626.9 -> 13 came
627.555 -> Then it will take 13 and 1, pass through this function
630.128 -> What came!
631.226 -> 14 came, and 14 would be the result
633.107 -> So basically what it does
635.488 -> Will run this function taking the first value and the second value
639.552 -> Then after that the result which will come
641.065 -> It will run the same function with it.
643.302 -> Then the result that will come and run this function with this 5
646.55 -> Then the result that will come will run this function with and 2
649.769 -> to this function
651.478 -> Then the result that will come will run this function with and 1
655.406 -> Ok, so this is how this function takes this argument
658.03 -> After (.reduce) you have to give a function
660.952 -> Suppose I name it (reduce_func)
665.684 -> And make it something like this
667.369 -> Can I do this?
669.461 -> I can absolutely do it
670.727 -> There will be no problem
671.747 -> I can make it this way
673.433 -> I made this function separately, and gave this function inside it
676.405 -> Function can be made like a variable in JavaScript
679.256 -> You can see here
680.692 -> I have created a function first and then passed it
682.755 -> and I have written this in the notes.
684.687 -> Reduce an array to a single value, Ok
687.229 -> There is a function named : sum, named : add
689.251 -> which I have not defined in Notes.
691.7 -> But you guys see here
693.484 -> that (numbers.reduce) when a function is gives
696.398 -> which adds 2 numbers then 8 and 1 will be added
700.314 -> Then whatever result comes, 7 will be added to it
702.412 -> then whatever result comes, 11 will be added to it
703.924 -> And finally the sum will be a value.
705.984 -> So reduce returns a value
708.077 -> filter returns an array
709.825 -> and map also returns an array
711.335 -> You guys should remember this, right
713.97 -> i hope you guys enjoyed it
715.291 -> Map, Filter, Reduce was so simple
718.385 -> And
719.367 -> Yes it is simple
720.56 -> What should I do now, if it is simple, Okay
722.302 -> Map, Filter, Reduce is considered to be a very big concept
724.548 -> That is, Map, Filter, Reduce is a modern concept.
726.958 -> Brother, it's very simple, Ok
728.717 -> You must have understood the map,
729.851 -> the filter must have come,
730.599 -> the reduce must have come.
731.385 -> Now i hope you'll never have a problem
733.591 -> with Map, Filter and Reduce
734.778 -> Okay
735.408 -> With that said : You guys access the JavaScript playlist
738.385 -> In the coming video, I will give you some practice questions.
741.783 -> And then we'll take the JavaScript to higher altitudes
746.438 -> Thankyou so much guys for watching this video
748.574 -> And i will see you next time.
Source: https://www.youtube.com/watch?v=bAUMuuRH99o