TO say thank you will not do justice with your teaching. I have never learnt coding easily before watching your videos. You are a great mentor. Keep it up.
Good tutorial. What would be great is if you explained not only what Maps and WeakMaps are, but when and why you would use them over a traditional object.
Hi bro, last 3 days I watching ur interview solve question in js and ur all video. It's really helpful, yesterday I attend the interview in CTS, it very helpful for me , keep going bro...
WeakMaps will not retain entry because it only saves the reference where as Map actually saves a copy of the key object and so it retains even after GC. Please correct if am wrong.
This might look like it's the same as setting props on an Object but what ends up happening is you get a hash conflict. toString is used to create the key which will result in two entries with the same key ( [object Object] ). Then when you retrieve it has to iterate over all entries with this key and find the proper entry by strict equality. What this is means is that in a way of saying map.get(obj) is now an O(n) operation compared to O(1) in the case of accessing an object unless V8 internally sets the address of the object as key which would make sense. Also the reason you don't get a key in there is because the object gets garbage collected so the reference is gone. If you declare the object with var, global will keep a reference to it.
Its still in memory, because JS engine not taken the key in garbage collection array. Restart the browser create a new cycle of garbage collection. Please correct me if I'm wrong :)
You could use a Map to count frequencies of objects in an array possibly. Also good for a graph data structure. Any time you're using an object literal as a map, use Map instead.
Hello @techsith.. I have read in a Medium article that keys are always coerced to strings in javascript So the object is converted into [object Object]. Even when we declare another object as a key it converts this into [object Object] and confuses to override the old one.
The one thing that I like about you is the detail of your tutorials. I cannot figure out how you learn these things with such details. Can you tell what resources you use to learn these things. Thanks for the video SIR
Lot of my knowledge comes from Mozilla developers network . Which is usually complex to understand . I do go through lots of other resource to simplify things.
Another great video as always! Thank you for taking the time to make this and share it with all of us! Near the end of the video, you had a small homework assignment, I want to take a guess as to why the value remained... I suspect when it was initially created using var the value got attached to the global space, additionally I think when creating the map or the weak map using const or let will keep the value contained inside the function scope. Please let us know if you post an answer to the question you raised. As always thumbs up and I am subscribed with notifications turned on, I don't want to miss any videos from your channel!
I have a question: I see that it's interesting that maps allow us to pair an object to any other value. That is cool and all, but why would I do that if I can simply assign the value as a property of the object I want to pair it with? The only reason I can think of is to free the object of the value in question in case I ever want to iterate through it with a for in loop or something. Also you mentioned you would like your videos translated to other languages. I'm about to resume classes at college right now, but I might try to give you translated transcripts in Portuguese (Brazilian) of a few videos every now and then, with the only problem being syncing everything (I have no experience in this). Would unsynced transcripts be of any help?
I have said many time - Thank you and God bless you. What I would criticize here is that in practice you would have a simple (primitive usually) key and perhaps object value. Your examples were the other way around and that gave me a vertical head spin :) . Also I came to learn what those WeakMaps are and why I would need them and yet I got nothing except that they do not hold garbage collected keys in weird example.
@@Techsithtube thanks for creating such good videos, my many js concepts clear from your channel, i am remembering you created one video regrading js clousers , that is best video ever in my life.
I would love to understand how Javascript uses 'Garbage collection' and how to write more efficient code / debug garbage collection. Thank you for your well explained videos!
Great video! Thank you! Just curious on your question in the end, I am assuming that the Array memory space created during map does not exist when you change to weakmap, so it shows the updated entries. But when you start with weakmap on a new browser, it does not allocate memory space for something that does not exist, and so you don't see entries. Just a guess. Please correct me if this is wrong, would be great to know the correct answer.
@Roshini Yes, you are somewhat right on that. The culprit is jsfiddle, its holds the environment as a closure. So you have to be bit careful when you use jsfiddle for few cases.
Good video to learn on map and weakMap. Regarding the question at the end, I think Map creates the copy of the object passed in key. So even when we update the value of the key object same is not getting reflected inside map key. Whereas WeakMap stores the key with referencing the object passed as key, so if its scope of object is not present it also clears the entries associated with it. But not sure why its retaining the value even after refreshing the browser. Can you please guide on this.
{let y1 = {a:[1,2]}; var x1 = new WeakMap(); x1.set(y1,'a')}console.log(x1) I am still getting same output as in map. not working as mentioned in example.
Answer to your question at the end: WeakMap() the lexical scope of JavaScript plays a part in browser cache. once the IIFE is executed, the key and the value of that key are removed from memory because the key is taken out of scope.
what if? set same object as a key multiple times var map = new Map(); map.set( { name : 'Eswar' } , '100'); console.log(map.has( { name : 'Eswar' } )); //false Ideally it should be TRUE, may be i am checking with different objects but both objects contain same content. How can i solve this, In java we can handle with heshcode() & equels()
Lets say you are tracking all the api responses and how many times each different response comes back you do that by adding it to a map as a key and value can be a number that you increment
@@Techsithtube is this a way of comparing technically different objects , but when they are keys? So it will see each separate object that matches {first: "John"} response as "equal" to all other {first: "John"} API responses, and match that object key, thus allowing an incremental count?
var a = {} var b = { num: 1 } testMap.set(a,'a').set(b,'b').set(a,'c') for(var [key, value] of testMap.entries()){ console.log(key, value) } now it works! Might be some GC issues, i saw values were adding up, instead of being replaced. cleared map, gc'ed values. That fixed it up.
@@Techsithtube Moreso from scratch. I love you vids you're pretty much my javascript sensei. :D Thats why i'd like to see you tackle making a game engine with javascript. i think it would be pretty epic. Have a wonderful day and thank you for uploading so many helpful videos.
Thank you so much for the information. I have one question if you could please answer You said, "for-in" loop is bad. Would you please tell us why it is bad?
Everything in js is a object(prototypal inheritance), when you use for of loop, it does index based loop, where accessing is faster, but for in loop considers array as an object, so accessing is a little slower..
good but ... if you use value of a to alfa , the tutorial would be more interesting... i am a newbie so its so hard to distinguish which a is your var and which a is your object and which a is your key.....LOL...(lot of love)sir
TO say thank you will not do justice with your teaching. I have never learnt coding easily before watching your videos. You are a great mentor. Keep it up.
Wow, thank you Rahel! Thanks for watching!
Good tutorial. What would be great is if you explained not only what Maps and WeakMaps are, but when and why you would use them over a traditional object.
one reason: you can not loop over an Object
@@paymankhayree8552 No, You can loop over an object.
The main reason is that you can only store keys as strings in javascript object. But in maps we can store the keys of any data types.
0:50 every time i watch your video when you say *"techsith tutorials"*
it feels me like that you are saying *"Taxi Tutorials"* and then i smile :)
lol . google translation translate to texi tutorials. :)
@@Techsithtube sexy tutorial
2:44 JavaScript Object not support any Object as key. It parse an Object toString(), and treat '[object Object]' as key
Man you just explain things really simply.. loved you're videos ❤
You are a Genius , there is so many materials out there but just make it easy...Thank you
Hi bro, last 3 days I watching ur interview solve question in js and ur all video. It's really helpful, yesterday I attend the interview in CTS, it very helpful for me , keep going bro...
Answer to you question: x was not garbage collected , it will stays there until console refreshed or you forcefully delete it from map
WeakMaps will not retain entry because it only saves the reference where as Map actually saves a copy of the key object and so it retains even after GC. Please correct if am wrong.
you explain in very simple way which make easy to understand.Thanks a lot
Thanks for watching laxmi!
Very nice and simple example at the end about the difference between a map and a weakmap. This helped me tremendously to understand. Thank you
10:10 to prevent this. CAn't we just use LET instead of VAR?
This might look like it's the same as setting props on an Object but what ends up happening is you get a hash conflict. toString is used to create the key which will result in two entries with the same key ( [object Object] ). Then when you retrieve it has to iterate over all entries with this key and find the proper entry by strict equality.
What this is means is that in a way of saying map.get(obj) is now an O(n) operation compared to O(1) in the case of accessing an object unless V8 internally sets the address of the object as key which would make sense.
Also the reason you don't get a key in there is because the object gets garbage collected so the reference is gone. If you declare the object with var, global will keep a reference to it.
Its still in memory, because JS engine not taken the key in garbage collection array. Restart the browser create a new cycle of garbage collection. Please correct me if I'm wrong :)
That is correct.
if it is still in the memory then why it is not visible in the entries while doing console.log ?
its nice that we can make object a key but my question is why would anyone ever wanna do that ?
Genuine efforts. Thanks
Can you please give a real world scenario where Maps are useful?
You could use a Map to count frequencies of objects in an array possibly. Also good for a graph data structure. Any time you're using an object literal as a map, use Map instead.
Hello @techsith.. I have read in a Medium article that keys are always coerced to strings in javascript
So the object is converted into [object Object].
Even when we declare another object as a key it converts this into [object Object] and confuses to override the old one.
The one thing that I like about you is the detail of your tutorials. I cannot figure out how you learn these things with such details. Can you tell what resources you use to learn these things. Thanks for the video SIR
Lot of my knowledge comes from Mozilla developers network . Which is usually complex to understand . I do go through lots of other resource to simplify things.
Another great video as always! Thank you for taking the time to make this and share it with all of us! Near the end of the video, you had a small homework assignment, I want to take a guess as to why the value remained... I suspect when it was initially created using var the value got attached to the global space, additionally I think when creating the map or the weak map using const or let will keep the value contained inside the function scope. Please let us know if you post an answer to the question you raised. As always thumbs up and I am subscribed with notifications turned on, I don't want to miss any videos from your channel!
Thanks for subscibing to my channel . I will try to make good videos. :)
thanks, please make a video related to how dispatch works in react-redux
Where we use this. Plz answer
for of is available with regular object as well , but we will have ti iterate through Object.entries(obj)
It helps me a lot to learn js concept thanks for this amazing videos.
I have a question: I see that it's interesting that maps allow us to pair an object to any other value. That is cool and all, but why would I do that if I can simply assign the value as a property of the object I want to pair it with?
The only reason I can think of is to free the object of the value in question in case I ever want to iterate through it with a for in loop or something.
Also you mentioned you would like your videos translated to other languages. I'm about to resume classes at college right now, but I might try to give you translated transcripts in Portuguese (Brazilian) of a few videos every now and then, with the only problem being syncing everything (I have no experience in this). Would unsynced transcripts be of any help?
I have said many time - Thank you and God bless you.
What I would criticize here is that in practice you would have a simple (primitive usually) key and perhaps object value. Your examples were the other way around and that gave me a vertical head spin :) . Also I came to learn what those WeakMaps are and why I would need them and yet I got nothing except that they do not hold garbage collected keys in weird example.
I tried with this example but I am still getting the entries when I console log weakmap ut of block
awesome explanation sir.
Thanks for watching Sumit.
@@Techsithtube thanks for creating such good videos, my many js concepts clear from your channel, i am remembering you created one video regrading js clousers , that is best video ever in my life.
Hello, interesting video, but I guess I am still missing a concrete example of when would need to store an object or an array as a key?
Still not understand... why we use 'Object' as a key in Map.
I would love to understand how Javascript uses 'Garbage collection' and how to write more efficient code / debug garbage collection. Thank you for your well explained videos!
BTW, I've looked all over youtube for a good video on this and haven't found any useful videos
Great video! Thank you! Just curious on your question in the end, I am assuming that the Array memory space created during map does not exist when you change to weakmap, so it shows the updated entries. But when you start with weakmap on a new browser, it does not allocate memory space for something that does not exist, and so you don't see entries. Just a guess. Please correct me if this is wrong, would be great to know the correct answer.
@Roshini Yes, you are somewhat right on that. The culprit is jsfiddle, its holds the environment as a closure. So you have to be bit careful when you use jsfiddle for few cases.
Good video to learn on map and weakMap.
Regarding the question at the end, I think Map creates the copy of the object passed in key. So even when we update the value of the key object same is not getting reflected inside map key.
Whereas WeakMap stores the key with referencing the object passed as key, so if its scope of object is not present it also clears the entries associated with it.
But not sure why its retaining the value even after refreshing the browser. Can you please guide on this.
If you fefresh the browser it will run the code again . that is why you are seeing it.
What is the difference between for in loop and for of loop ??
awesome tutorial again..you are a genius.
I'm very late to your channel but the answer to the last part is that the previous entry will still be in memory when we run it.
{let y1 = {a:[1,2]}; var x1 = new WeakMap(); x1.set(y1,'a')}console.log(x1)
I am still getting same output as in map. not working as mentioned in example.
Try closing the browser and open it again
Answer to your question at the end: WeakMap() the lexical scope of JavaScript plays a part in browser cache. once the IIFE is executed, the key and the
value of that key are removed from memory because the key is taken out of scope.
what if? set same object as a key multiple times
var map = new Map();
map.set( { name : 'Eswar' } , '100');
console.log(map.has( { name : 'Eswar' } )); //false
Ideally it should be TRUE, may be i am checking with different objects but both objects contain same content.
How can i solve this, In java we can handle with heshcode() & equels()
Its object reference issue. Each object has its own reference so reference of two different objects are never going to be Same
How JS Maps differentiate between key objects? Will it use hash method like in java?
Yes I believe it does use the hash method.
I guess the answer is because the variable x in used by or have a reference to Map so WeakMap not working ... is that right ? :)
Yes correct.
A suggestion, please make real world projects using js it would be really helpful to follow along for newbie dev.
Thanks..:)
Yes , thanks for the suggestion . that would be very useful.
I think you started with a very twisted example for key. You could start with simple numbers as keys and then extend in more twisted directions.
Hi, Thanks for the explanation, I have a question what is the use of having an object as a key?
Lets say you are tracking all the api responses and how many times each different response comes back you do that by adding it to a map as a key and value can be a number that you increment
@@Techsithtube is this a way of comparing technically different objects , but when they are keys? So it will see each separate object that matches {first: "John"} response as "equal" to all other {first: "John"} API responses, and match that object key, thus allowing an incremental count?
what IDE are you using ? is it JSbin ?
its JS fiddle
You can use console.table for array.
Yes good point.
Why am i not able to run the for..of and array spread example on chrome console ?
Can you send me the exact code that you are trying to run in chrome console.
var a = {}
var b = {
num: 1
}
testMap.set(a,'a').set(b,'b').set(a,'c')
for(var [key, value] of testMap.entries()){
console.log(key, value)
}
now it works!
Might be some GC issues, i saw values were adding up, instead of being replaced.
cleared map, gc'ed values. That fixed it up.
oh ok . cool.
thx, very good explanation
Would you ever consider doing a tutorial for making a 2d game engine?
never thought about it. Like unity engine?
@@Techsithtube Moreso from scratch. I love you vids you're pretty much my javascript sensei. :D Thats why i'd like to see you tackle making a game engine with javascript. i think it would be pretty epic. Have a wonderful day and thank you for uploading so many helpful videos.
It's nice, I have one topic, symbol() can you please explain it.
Good explanation.
Maybe it's cached?
Yes, It is somehow cached. I think its more to do with jsfiddle's internals.
Dont think so. JS engines needs some time to garbage collect those vales. If you use new browser, there is nothing to clean up..
soo good, please carry on ..
Thank you so much for the information. I have one question if you could please answer
You said, "for-in" loop is bad. Would you please tell us why it is bad?
Everything in js is a object(prototypal inheritance), when you use for of loop, it does index based loop, where accessing is faster, but for in loop considers array as an object, so accessing is a little slower..
Please do video for JavaScript data structures
I will sure to make tutorials on JavaScript data structures.
@@Techsithtube much awaiting for this ...
Good tutorial
this guy rocks!
I couldn't find an answer to the HM question :\
good but ... if you use value of a to alfa , the tutorial would be more interesting... i am a newbie so its so hard to distinguish which a is your var and which a is your object and which a is your key.....LOL...(lot of love)sir
Again a masterpiece !!!!
Thanks buddy
Thanks for watching Rupendra :)
Sets and WeakSets please!
To me, it looked like key and value were switched in the Map() example
Great vids. Could you please make regex as well? ;)
Sure I would make it. :) Maybe in a week or two .
This is good :)
liked as always before watching :-)
Thank you
Yes, react-redux please...
Sure I will focus on React Redux next. :)
Thanks
React redux would be awesome...
Sure I will focus on React Redux next. :)