JavaScript Map and Set Explained

hi and welcome to JavaScript mastery today we are going to explore topics of JavaScript map and set objects their differences advantages over using normal arrays or objects and real use case scenarios so let's begin first we are going to create an array containing numbers from 1 to 5 and then we are going to turn that array into a JavaScript set so let's begin ok our array from numbers from 1 to 5 is ready and what we need to do next is set up a set and we are setting it up by typing new set and then simply passing our array into it ok and now if the console dot log both our array and our set will see the difference ok so let's run it by typing node index a a yes and we can see here that we get an array and a set of numbers from 1 to 5 the set object lets you store unique values of any type whether primitive values or object references so what is set used for first really use case scenario is using set to remove all duplicate values from an array we only need to create a new set like we already did and pass an array as a parameter as we already did here ok so there are no duplicates values right now but if we add another 5 s and 1 and 2 and run our function again we are going to see that our array still consists of all the elements whether duplicate or not and our set only has 5 numbers as we had at the beginning so that's really easy another great thing to know is that we can easily turn that set back to an array that now contains only unique values using the spread operator so let's create it let's call it a unique array and it will be equal to a spread off my set okay we are going to plug it okay and remove these cons of that locks and now if we clear our console and run node indexed as a yes we can see that we get a normal array containing only numbers from one to five easy as that now that we know what set is used for we can explore different methods that allow us to manipulate data inside of it easily we can now delete all of this and start exploring different methods so the only thing we are going to leave is our initial array and it being transferred to a set okay first on the list of set methods is add we can simply use add to add any element into our set as a previously mentioned that can be a primitive value like a string or a number or that can be an array or an object so let's simply type mice at dot add and we insert the value let's turn a number 6 okay afterwards we are going to console that log our set okay and we are going to run our node.js okay we can see that the number six is added to our set now let's try some different values let's try a string of six okay we can simply see that it accepts a string we can try an object let's say channel name will be equal to JavaScript mastery okay and if we run our index address again we can see here that it includes an object okay and nevertheless we can add an array with few now also and run it again as you can see here it accepts a raise as well I can method on the list is delete using delete we can simply delete desired element from a set ok so let's first delete this and then call my set that delete and let's say we want to delete number 3 ok and afterwards we are going to cancel that log my set ok we're going to clear the console and call index Egeus again and as we can see we get 1 2 4 & 5 easy as that we can now get to our third method which is clear clear is pretty straightforward also it accepts no parameters and it simply clears all the set so all the elements of the set will call my my set that clear and we are going to run index Egeus and we get back an empty set the last two methods on the list are haz and size has is similar to array that includes we can simply check whether the set has the desired value ok so let's delete this clear and call my set that has and we'll try with 5 it returns a boolean value okay so let's run index a s and we get true if we type in 6 and run it again we get false easy as that and the last one is size you simply type my set that size and its returns a number of elements in a set 5 ok now we can talk about some differences between arrays and set they may seem similar but there are some major differences an array is an ordered list of objects you can access the elements of an array by referencing its integer position in the list so if we consulate log my array and we want to retrieve the 4th element it is under the integer number so we type that and run it and we expect to get the fourth element back and it is number four now a set is an unordered pool of unique elements since it's unordered there is no integer index you can use to access a specific element of a set so if we try to run my set and get the fourth element and run it again we get undefined so those are some differences so when is it better to use a set over an array firstly set is different from an array it is not meant to replace array entirely but to provide additional support type to complete what array is missing since set only contains distinct elements it makes life much easier if we know in advance we want to avoid saving duplicate data to our structure as we seen before it can easily remove duplicates okay now we can move on to JavaScript map the map object holds key value pairs and remembers the original insertion order of the keys any value both objects and primitive values may be used as either a key or a value map is a data structure that exists in other programming languages javascript first introduced it in es6 and they allow you to map arbitrary values to other values most importantly you can use objects as keys you can define a map like this so my map will be equal to new map and in here you are going to input an array and inside of that array you're going to input as many key value pairs as you want so let's say for a first one when we want to have a key value pair of name that is going to be equal to John and as a second we are going to have surname equal to dough okay and now if we simply console dot log our map we are going to see how does it look like so as you can see here we got a map of named John hence her name though so let's explore the problems that map solves JavaScript objects only support one key object if we add a multiple key objects it only remembers the last one that's why we need to use maps so let's see that in action we are going to comment out this for a brief amount of time and let's explore the problem we have right now so Const my object will be equal to an empty object and then we are going to have another two objects called a and B okay and now if you want to assign those objects the keys to our first object we are going to do something like my object a will be equal to let's say a string of a finally we can console that lock our object and let's see what we get back we get back object object of a but now what happens if we input a second object as a second key so let's say my object B so a an empty object and then a value of B and we again run it and consolate lock the same object as you can see here the first object so a is completely or written by a second one so let's explore how can we solve this problem by using maps so we still have our first object or second object and then we can pull up this map from beginning and console dot log this object and our map is going to be empty so let's empty it and inside of this map we are going to do the same thing we did before so I'm going to put it a bit down remove this four objects and let's assign so we said we are signing like this and any amount of key and value pairs as we want okay inside here we are going to set a key of a value a which is an empty object and then we are going to add a pair value pair of a as we did before and inside of the second key value pair we are going to add a B which is an empty object and it B string and let's console that log R map as you can see here map keeps track of both key objects which is different and it is solving a problem we had previously with objects let's explore different methods that map has to offer they allow us to manipulate data inside of it easily we can now delete all of this and start exploring different methods the only thing I'm going to leave is our map and it is going to let's do an empty object here and archons alot log of the map ok so as the set has an ADD method map has a set method using set we can assign key value pairs of our set so we do it like this my map and then you call set on it and provide a key value pair so let's say we want to add another empty object and as the second parameter you simply provide the value ok and we are going to run it as you can see here we get ABC the value is added the important thing of map is that you can use any values so this could be a string or a number or an array every time all the values remain the same the second one on our list is delete with it you can simply delete elements from our map so for the simplicity purposes let's simply type 1 and it'll be equal to 1 okay let's cons let log it for a second ok so we simply get map which is equal to 1 and now we can delete it so my map delete and we type one okay we run it and it is an empty map it'll be equal it will be the same if we had like 1 is equal to 1 it also deletes it so it deletes by a specific key so if key is 1 here it deletes the element with the key 1 okay so the third one our own list is clear the same clear we had over on sets so if you have a few more key value pairs so let's say 2 and we clear it all we are going to get an empty map back ok the next one on the list is has n size both has and size are the same from the set so if you remove this and call my map that has and type let's say 1 we are going to get true because it has 1 and if you type tree will get false and what about if we type a value of a key so a string of 1 we are going to also get false because it is searching by keys ok and the last one on the list is size size simply outputs the number of elements that our map has in this video we learned what map and set are what are the real use case scenarios for them and when should we use them opposed to using regular arrays or objects thanks for watching and stay on the road to JavaScript mastery [Music]

Channel: JavaScript Mastery

Views: 43,260

Rating: 4.9008794 out of 5

Keywords: javascript data structures, javascript map, javascript set, javascript set and map, js set and map, javascript objects, javascript es6, javascript es6 tutorial, javascript tutorial, javascript arrays, javascript array methods, javascript arrays and objects, jsmastery, javascript mastery, learn javascript, learn javascript in one video, learn javascript for web development, learn javascript in 12 minutes, javascript tutorial for beginners, webdev

Id: hLgUTM3FOII

Length: 15min 16sec (916 seconds)

Published: Mon May 13 2019