Map, Filter & Reduce in JavaScript | JavaScript Tutorial in Hindi #20
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- Link to the Repl - replit.com/@co...
Join Replit - join.replit.co...
Download Notes - www.codewithha...
Ultimate JS Course Playlist: • JavaScript Tutorials f...
►Checkout my English channel here: / @programmingwithharry
►Instagram: codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python[15 Hr] - • Python Tutorial For Be...
Python Advance[3.5 Hr] - • Python Programming Cou...
Python[1 Hr] - • Learn Python In Hindi ...
Python[2 Hr] - • Python Tutorial In Hin...
Python[15 Min] - • 15 Minute Python Tutor...
JavaScript[1 Hr] - • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr] - • Learn Php In One Video...
php[2.3 Hr] - • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min] - • HTML 5 Tutorial For Be...
CSS[8.5 Hr] - • CSS Tutorial In Hindi ...
CSS[1.4 Hr] - • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr] - • How To Make a WordPres...
Angular[2 Hr] - • Angular Tutorial in Hindi
Java[2.3 Hr] - • Java tutorial in hindi 🔥
Web Scraping[1 Hr] - • Web Scraping Tutorial ...
MongoDB[2 Hr] - • MongoDb Tutorial For B...
Numpy[1 Hr] - • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr] - • Linux Tutorial For Beg...
JQuery[1.1 Hr] - • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr] - • Git & GitHub Tutorial ...
►Complete course [playlist]:
React - • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java - • Java Tutorials For Beg...
JavaScript- • JavaScript Tutorials I...
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials I...
C++- • C++ Tutorials In Hindi
Git & GitHub- • Git and GitHub Tutoria...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Web Development- • Web Development Tutori...
Python Django - • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo - • Data Structures and Al...
Follow Me On Social Media
►Website (created using Django Rest & Angular) - www.codewithha...
►Facebook - / codewithharry
►Instagram - / codewithharry
Twitter - / codewithharry
Comment "#HarryBhai" if you read this 😉😉
![เปิดใจ "อาจารย์เบียร์ คนตื่นธรรม" อดีตเคยสุดทุกทาง ถ้าใช้หนี้หมดไปบวชแน่ l [Nickynachat]](http://i.ytimg.com/vi/IxeE0xVhy08/mqdefault.jpg)
On your request, I have revamped the channel membership and added more levels.
Click the join button to check out more - th-cam.com/channels/eVMnSShP_Iviwkknt83cww.htmljoin
literally your comment has 0 likes 1st one is mine ignore man
C1 karle nay vale kaise ate
harry bhaiya mujhe pls ye baatiyen ki sifr front end developement ke liye kitna basic javascript padna chahiye?
@@shreyashreeguha1074 puri knowledge hona zaruri hai, i am a frontend developer too
@CodeWithHarry can you please suggest book for javascript
Congrats everyone on your 20th video of js keep learning!!👍👍😁😁
Chl thank you yr, pta to chla ki 20th video pr hain 🤓😅😂
@@atirrasheedhashmi lol🤣🤣👍👍
🤡🤡Mai bhi Hoon
Aapko follow karte karte idhar tak aa gya
I am also making video tutorials on programming but i dont have any support please support me guys so that i can continue teaching . I really need your support guys
Thank you so much in advance :)
i hope koi purana nhi bhulta huva a rha hai
Imagine you have a bunch of toys in a basket, and you want to do different things with them:
1. Map: Imagine you want to paint each toy in the basket with a bright color. To do this, you would take one toy at a time, paint it, and put it back in the basket. Map works similarly. It takes a function and applies it to each toy in the basket, creating a new basket with the transformed toys. So, map transforms each toy without changing their order or number.
2. Filter: Now, let's say you only want to keep the toys that are soft. You would go through each toy, feel its texture, and keep only the soft ones in the basket. Filter works in a similar way. It takes a function that checks a condition and applies it to each toy. It creates a new basket containing only the toys that satisfy the condition. So, filter helps you select and keep only specific toys based on a condition.
3. Reduce: Finally, imagine you want to find the total number of toys in the basket. You would count one toy at a time, adding the count to a running total. Reduce does something similar. It takes a function that combines two toys and reduces the collection to a single value. In our case, it would add the count of each toy to a running total until there are no more toys left. So, reduce helps you aggregate or combine values into a single result.
I hope this simplified explanation helps you understand the concepts of map, filter, and reduce!
bro, am telling u ...become a cs teacher
Amazing work
credit goes to artificial intelligence
hehehe thats nice to get help from chat GPT.
@@dhruvraj9548😂😂
Bhai mere pass laptop nhi h fir v
Python , html ,css , C sikha hoon haryy Bhai se phone se code krke online compilers and interpreters ke through.
Or avi replit se krte h coding iss JS course ko.
Thank you Harry bhai.🤟✨
kya karte ho life me abhi?
@@fightforfitness2256 zinda hai
Code Backup Repository: github.com/CodeWithHarry/ultimate-js-course-youtube
Excuse me sir ! Ye problem samaj main nehi aa raha 🙏🏻🥺..
7:6 yaha pe function name a ko kese pata ki a array ka values le raha hain ( array ka naam to alag hain na == arr
@@bhaskarartwork5762 Bcz 7:06 py a2 ko arr2(array) KY equal kiya aur usmy (a) likha tou ab wo as (a) use ho rhi hai "array"...isliya wo array ki values Lai Raha..
These series are extremely helpful. I have a small request for you. After finishing this tutorial please make a full tutorial on the integration of React app inside WordPress. Thank you so much.
perfect explanation Harry bhai....map ko main pahaaar smjh raha tha ....ap ny to aisy explain kr k
smjhaya jesy koi makhi urra di ho.....❤❤...Thank you so much brother
@codewithharry; bhai apki puri series nhi dekhi but jis jis topic me doubt hai vo dekha, sachme eakdum clear ho gya. The amount of hardware you put while creating this and explaining is commendable and should be appreciated. Thankyou!
hardware💀
🤣"hardware💀"🤣
3:28 we can perform operation in return like we perform operation in forEach loop. the difference is that here we create a new array right?
A little bit of Motivation from my side :
Got infected by Denguee , couldn't code for 2 months and now after 1 month practice , i am back where i left , i watched your html video did html project , watched your css video did the project and now i'm back where i left (Nov 19 to Dec 16) and now i will end this playlist as well
Done ! keep on practicing guys good luck
Thanks brother. You are just amazing. You can just start with any video without prior knowledge and still get your doubt clear. Again thanks man 👍💯
Sir we are beginner
So explain every small please 🙏
Bit I like your teaching skills ❤️
Hi Harry, I am Jawad Azeemi from Pakistan; just started learning from you instead of my instructor because he is worthy to teach but at the same time, you too worthy because you run with new values added day by day in JS. Thanks.
// let luther = [45, 87, 4, 65]
// luther.map((value)=>{ // value ke jagha kuch be likh sakte ho aap log
// console.log(value)// jo value ya kuch ooper likha ha , wahi idher be likhna ha
// })
let luther = [45, 87, 4, 65]
// ab ham thora change kerte han ooper walay ko
let flower =luther.map((value)=>{
return value + 2
// console.log(value)
})
console.log(flower)
/* now ma chahta hoo ke ye 2 sirf aur sirf add ho
index 2 ka sath jo ke array ma 4 ha*/
let luther1 = [45, 87, 4, 65];
let flower1 = luther1.map((value, index) => {
if (index === 2) {
return value + 2; // Adds 2 only to the element at index 2.
} else {
return value; // For other elements, keep the same value.
}
});
console.log(flower1); // Output: [45, 87, 6, 65]
In reduce we can paas initail summation ..like here i am passing -1 .
let num=[1,2,3]
let sum = num.reduce((prev, curr, index, array) => {
return prev + curr;
}, -1)
Guess the output.
Thank you harish sir you are such a great teacher love you sir ❤️❤️❤️❤️
I am watching your old video for learning I am BCA student of secend year starting
This course is very helpful 👍🏻 keep posting videos thank you
guys, do like share subscribe and everything you can do without been demanded by Harry himself. Doing such a great work !! He deserves this.
@CodeWithHarry
// Reduce() returns single value from array and used to perform operation on the elements of called array like here we are multiplying elements from the called array and returning the output.
// If we provide three argument to the reduce() then the 1st and 2nd arguments will be elements of the array and 3rd argument will be the index of 2nd element in the operation.
let arr3 = [1, 5, 6, 4, 3, 2];
let a3 = arr3.reduce((d1,d2)=> {
return d1*d2;
});
let a4 = arr3.reduce((d1,d2,d3)=>{
return d1*d2*d3;
})
console.log(a3);
console.log(a4);
the way you explain, you make everything so easy to understand.
Thank You Harry Bhai I searched map,filter,reduce but I couldn't understand I was just waiting for your next video.Higer Order Function, Really Helpful Course
Thanks Alot.
Love u bro 😂❤❤ whenever i see you i feel relaxed but kbhi kbhi apki speed ke barabar ane me time lag jata hai lekin kam mt krna yahi sahi hai speed revision ke liy best h
QUICK NOTE FROM VIDEO :
TIMESTAMP : 00:00
QUESTION : What is Higher Order Methods / function.
ANSWER : A “Higher Order Method / Function” is a function that accepts functions as parameters and/or returns a function.
That's Why Map, filter and reduce is called Higher Order Methods.
thank you!
@@futurexa Welcome.
Thanku 👍
thanks man
Filter function me agar humein practically dekhna hai k changes existing array me ho rahi hain to ap ye code run kar k dekh sakty hain. let k sath nhi ho sakta check.
var arr2 = [ 2,3,5,10,15,20]
var arr2 = arr2.filter((a)=>{
return a
bubu to bahi balak hai
let rating =[1,2,6,1]
let a=rating. reduce((r1,r2)=>{
return r1+r2
})
console.log(a);
10
11:13 simple sum function se bhi ho jayega
c programing playlist or 15hr c programing video which one should i prefer??
playlist is much helpful
Jo tmhe psnd h wo kro
12:10 bahut bada concept lugta tha map , filter , reduce ; bahut advance concept lugta tha in fact intimidating bhi lugta tha mujhey toh lekin such bataun harry bhai , aap ki video dekhne k baad samjh mei ayaa ki ye kya choti si cheez se durr ruha tha mei . Thank u so much complicated ko simple bananey k liye ! Happy Diwali !🪔
Knowledgeable👍👍👍 Thanks for making this JavaScript course🙏🙏🙏
Aisa samjhaya ki simple lagne laga . . . . shukriya
Harry bhaiya thanks🥺❤️😊
Hi Sir , This Aakash Thakur i saw all python video that very useful for me and others that tutorial is enough to face interview including their projects
00:02 Learn about Map, Filter, and Reduce
01:50 Exploring the differences between map and forEach in JavaScript
03:23 Map creates a new array and foreach iterates over and does something for each array element.
04:49 Use map method to create a new array with values from original array
06:21 The filter function in JavaScript filters an array based on a given condition.
07:53 The reduce method in JavaScript
09:26 The reduce function takes the first and second values and runs the same function with the result
11:05 Map, Filter, Reduce is a modern concept
Crafted by Merlin AI.
Koi nhi sirji...bahut shi bnayeho aap video
Lots of love from Pakistan #codewithharry according to mine you are one of the massive gem on this era♥️♥️♥️♥️
I am also making video tutorials on programming but i dont have any support please support me guys so that i can continue teaching . I really need your support guys
Thank you so much in advance :)
7:19 if you do the same operation with map it would return a boolean array.
harry sir gajab dha rahey hai....humarey liye aap coding daaata hai....kirpya aapke charan dikhaye.........
Thankyou harry bhai❤
Very helpful video Maja aa gya Bhai 🔥🔥🔥👍
Thank you for such as simple yet clear explanation
Aaj maine three chiz sikha map,filter,reduce very happy
Bro aur kitne videos baki hai JS ke? I love your vidoes and content
confusion clear...
nice explain
I get job on mnc by help of your video's but still here for learning more
really, how much did u take time nd u learned all the concepts
sir u are great and ur teaching method is unique
@CodeWithHarry let a2=arr2.filter(a=>a>5)
@CodeWithHarry Sir mai 12th class me hu science background se humko coding ke bare me kuch nhe pata hai kuch nhe ka matalab kuch nhe ek dum zero to kaise coding sikhna start kren please suggest me sir i am waiting for your reply ⏰⏰
10:47 sir basically the function adds all the elements of an array... correct me if I am wrong
yes
Can you tell the common difference between map,filter and reduce??
We can perform any operations on array without affecting their original value
Harry bhai thode jaldi jaldi video banao me nextjs ka course bhi follow kar rha hu... JavaScript strong chahiye
harry nhai this course is full for becoming a perfect developer???
Harry vai , I'm not getting clearity about how the parameter is working , how it recognizing whatever i need values or index or consicutive values?
Inshort Map and filter will give an array and reduce gives a single value array.
Thank you so much sir
6:53 kya yaha par ham while method ke through ek condition prepare kar sakte hai?
Harry bhi ugar ap ko "software enginer ,Data enginer or Etical hacking" ma sa ksi field ma jana hota to ap ks field ma jata?
or ma kon si choose kro? plzzz bta dana
I appreciate covering all functions in a single video, I love your videos too, But I think for reduce method you could have stated the arguments list.
10:04 -- reduce() is like the fibonacci series..
Sorry please elaborate more on reduce and the differences between map and foreach. I can't get enough with this tutorial.
Simple map function always return and for each does not return anything
@@ashutoshrai2717 Thank you now I understand how things work.
Hello sir
I have a question for you
Question:- Can we use flex box and CSS grid
If ans is yes
Then sir :- plz make one project using css grid and flex box using together
access web development playlist of CodeWtihHarry
reduce function ke arguments array ke he starting ke 2 elements hote hai kya
Best channel on youtube thanks
I love You bhai tum nahi hote to coding sikhne ka maja hi nahi ata. dil se sukriya
please zoom the notes then show so that it could be more visible
Harry brother please make videos on DSA with javascript parallely I know it will be very tough to make but I really want and it will also help others 🙏
Follow code step by step channel for dsa in js
go to code help channel for DSA and do code in JS...!
Hello Harry....mai aapne web development ke course se html css javascript kr rha hu udhar jo javascript hai vo kr liya toh ye vala javascript Krna nhi padega na udhar se bhi ho jayga aache se ????
Love Your content harry bhai op I love the way you explain really good
I am also making video tutorials on programming but i dont have any support please support me guys so that i can continue teaching . I really need your support guys
Thank you so much in advance :)
Thank you for explantion!
Bhai, same same methods python me bhi practice krk aa rhi hu...or ab abb mess ho gya he 😂
Reduce method is veryy usefull actually
Hey Harry, You did a great job. And "Thanks" is very small word for all of your efforts. I believe "God Bless You" will be more apprepreate for your cpntinous endless efforts.
Sahi he hai Harry bhai, pls cover all methods it help to learn and remember..
I am also making video tutorials on programming but i dont have any support please support me guys so that i can continue teaching . I really need your support guys
Thank you so much in advance :)
Thanks for notes ,
Harry bhai tusi Great Oo...
Harry bhai you are my codding inspiration
❣❣❣❣❣❣❣
Journey Till 20th Video was Fantastic! Need Mini Projects tho!
thanks
love your explanation.Thank you!
Please continue js course in Programmingwithharry channel
I am also making video tutorials on programming but i dont have any support please support me guys so that i can continue teaching . I really need your support guys
Thank you so much in advance :)
So well Explained Haider ali khan my 5th True love 😍😍
Harry bhai, what else can we do with reduce?
I somewhere read that "map does not mutate the array on which it is called", but in the following code map was able to mutate the array. Can you please tell Harry bhai that what is going on here , both forEach and map functions are doing the same thing here ?
const array = [1, 2, 3, 4, 5];
array.forEach((value, i, arr) => (arr[i] = value * 2));
console.log(array);
array.map((value, i, arr) => (arr[i] = value * 2));
console.log(array);
Map is used when we want to create a new array and for each is used to perform operation on the existing array and to make change in that array only
thank you sir this course is very helpfull
Thank you so much bhaiya for this beautiful course
Haris bhai P vs NP problems kya hai..?
Kya aap mujhe P vs NP problems ke baare mein kuchh bata sakte ho..?
Sir ek question hai, yeh sb arry k method smj a gy hai but real project use krny me problem ati h smj ni ati konsa aur kaisy use kron eska koi solution? 🤔
Sir mere pe Map loop me jo condition k baat apne return value +1 ki thi and array par value 1 increase ho gyi thi , but mere pe increase ni ho ri
Best tutorials ever of java script ❤️❤️❤️
sir this JS course are completely full course for placement or only basics for understanding.
I am also making video tutorials on programming but i dont have any support please support me guys so that i can continue teaching . I really need your support guys
Thank you so much in advance :)
Hii sir I want full information about red hat complete course so please make video on that topic 😊 please sir 😔.
Thanks bhai. Aap apki khudki company kab khul rahe ho? Usme mujhe ek job dilado. Main Bangladesh se hu aur Web Dev sikh rah hu in 30 years of age! Wish me luck.
Hey Harry! Please make a video on a career change from sales to tech
Teacher of the Year
Love From Pakistan
harry bhai aap hamare god ho bhai koi chakkar to nahi agar ham aap ki videos download krke smabhal ke rakh le
#Doubt regarding array.
1.How did this happen what does this mean? Can you please explain.
let arr = [1,2,3];
arr[-1] = 7;
console.log(arr);
console.log(arr[-1]);
Output :
[ 1, 2, 3, '-1': 7 ]
7
2. Can you please explain reduce function with some unsual possibilities? How did these Output came can you please explain.
a. How??
let arr = [1,2,3];
console.log(arr.reduce((h1)=>{
return h1+h1;
}))
Output:
4
b.How??
let arr = [1,2,3];
console.log(arr.reduce((h1,h2,h3)=>{
return h1+h2+h3;
}))
Output:
9
Doubt 1 - Since the array is also treated as an object in javascript and keeps array values on number indexes like { 0: 1, 1: 2, 2: 3} but when it shows the array, it shows values from index 0 to n only not on any random indexes and you can access value through keys in case its negative or any string key
Doubt2 - reduce starts iteration from second array element and pass arr[0] as accumulator value(h1) so on the first iteration new accumulator returned will be 1 + 1 = 2 and it moves to second iteration with h1 as 2 and return new accumulator value as 2 + 2 = 4
NICE PLAYLIST TILL NOW...
bro typescript pr bhi series bnado ek with angular.
Please upload node js complete course as well in that pléase teach how to create rest api and file upload and file download
HARRY bhai roj video dalo pls🙏
+1