1 00:00:00,690 --> 00:00:03,630 All right guys in this video we're going to look at maps OK. 2 00:00:03,660 --> 00:00:10,000 Maps are a new object structure introduced in Equus six ECMAScript 6. 3 00:00:10,100 --> 00:00:18,900 A map is an object that holds key value pairs and any value whether it's an object or you know an object 4 00:00:18,900 --> 00:00:25,230 reference type or a primitive can be used as a key or value which is very different than just an object 5 00:00:25,230 --> 00:00:26,540 literal. 6 00:00:26,590 --> 00:00:29,940 We can actually use an object as a key. 7 00:00:30,160 --> 00:00:32,150 OK so let me show you what I mean. 8 00:00:32,370 --> 00:00:37,590 And there's there's different ways that we can iterate through them and they're actually pretty interesting. 9 00:00:37,590 --> 00:00:44,920 So let's go ahead and say maps and maps are key value pairs 10 00:00:49,100 --> 00:00:57,750 and we can use any type as a key or a value. 11 00:00:57,990 --> 00:01:00,350 OK so let's go ahead and create a variable. 12 00:01:00,350 --> 00:01:06,480 I'm going to call it map 1 and we're going to set this to new map OK. 13 00:01:06,620 --> 00:01:12,140 So we call our new use the new keyword to use the constructor and call map. 14 00:01:12,140 --> 00:01:15,990 So let's first of all set some keys. 15 00:01:17,030 --> 00:01:21,800 So I'm going to sic key one as a string. 16 00:01:21,840 --> 00:01:26,680 I was going to say some string. 17 00:01:27,240 --> 00:01:30,030 OK let's set key two. 18 00:01:31,010 --> 00:01:35,530 And we'll set that to an empty object which is kind of weird right. 19 00:01:35,540 --> 00:01:41,870 But it's something that is kind of cool and you never know when you may want to have some kind of value 20 00:01:41,870 --> 00:01:46,000 set for a certain object or even a function in this case. 21 00:01:46,000 --> 00:01:51,240 Well said Keith three equal to an empty function. 22 00:01:51,470 --> 00:01:51,800 All right. 23 00:01:51,800 --> 00:01:55,160 So some pretty weird keys but we can do it with maps. 24 00:01:55,180 --> 00:02:02,320 It's go down here and now let's set map values by key. 25 00:02:02,540 --> 00:02:10,790 So to do that we'll say map 1 set and then we pass in our key which is we want to use key 1 in this 26 00:02:10,790 --> 00:02:17,710 case and then we want to set the value which I'm just going to set to a string that says value of key 27 00:02:17,780 --> 00:02:19,510 1. 28 00:02:19,520 --> 00:02:22,460 All right I'm going to do the same for the other ones. 29 00:02:23,030 --> 00:02:31,520 So this will be key to which will be value of key 2 and this will be key 3 value of key 3. 30 00:02:31,550 --> 00:02:39,850 All right so let's go ahead and let's get the values by key. 31 00:02:39,850 --> 00:02:41,990 So I'm going to console Daut log 32 00:02:45,390 --> 00:02:49,260 in the way that we get them is by using the get method. 33 00:02:49,260 --> 00:02:53,320 So map one dot to get and then pass in the key. 34 00:02:53,370 --> 00:02:59,460 So I'll say map one diet get key one save and we get this value of key one. 35 00:02:59,490 --> 00:03:09,150 All right if we want to get the rest go ahead and copy that and change just one last one to key three. 36 00:03:09,210 --> 00:03:11,980 This one to key two. 37 00:03:12,270 --> 00:03:15,890 All right we get value of key one key two and three. 38 00:03:16,250 --> 00:03:16,560 OK. 39 00:03:16,560 --> 00:03:23,860 We can also count the values inside of a map and we do that using the Size property. 40 00:03:23,860 --> 00:03:26,990 So it's a console log. 41 00:03:27,350 --> 00:03:29,970 Map 1 dot size and save. 42 00:03:29,970 --> 00:03:36,220 And we get three K there's three three values inside of this map or three. 43 00:03:36,240 --> 00:03:39,250 I should say key value pairs. 44 00:03:39,530 --> 00:03:39,870 All right. 45 00:03:39,870 --> 00:03:43,470 Now let's take a look at iterating through maps. 46 00:03:46,720 --> 00:03:51,110 So we can use what's called the four of iteration. 47 00:03:51,400 --> 00:03:57,850 So it's a loop using four of. 48 00:03:58,540 --> 00:04:02,890 And we can get either the key or the value or both. 49 00:04:02,920 --> 00:04:06,090 In this case let's get the keys and the values. 50 00:04:06,100 --> 00:04:16,050 So let's say using four of to get keys and values so what we would do here is do four. 51 00:04:16,070 --> 00:04:17,560 All right so we can say four. 52 00:04:17,560 --> 00:04:28,350 And then let's do let And we're going to put some brackets here and say key value of map 1. 53 00:04:28,370 --> 00:04:28,690 All right. 54 00:04:28,690 --> 00:04:38,830 And then here we're going to just console log throw in some back ticks here and let's put the key and 55 00:04:38,830 --> 00:04:41,910 then we'll say equals and then the value. 56 00:04:42,280 --> 00:04:47,050 OK so let's let's comment out the rest of these console logs. 57 00:04:47,440 --> 00:04:51,430 So nobody gets confused and save. 58 00:04:51,430 --> 00:04:53,360 And you can see it's going to loop through. 59 00:04:53,410 --> 00:05:00,460 We get the key here which is some string and then the value here we have an empty object as the key 60 00:05:00,850 --> 00:05:04,630 and the value in here we have an empty function as the key. 61 00:05:04,630 --> 00:05:06,320 And then the value. 62 00:05:06,490 --> 00:05:07,070 All right. 63 00:05:07,180 --> 00:05:20,440 Now if we want to get just the keys let's say iterate keys only what we could do is let's just copy 64 00:05:20,440 --> 00:05:29,840 this and instead of doing the brackets with key value just say key and then we can say of math 1 door 65 00:05:29,860 --> 00:05:32,050 keys like that. 66 00:05:32,390 --> 00:05:36,460 All right and then we'll just console log. 67 00:05:36,670 --> 00:05:45,260 Get rid of all this console log key and Accomack this one out and save and you can see we get some string. 68 00:05:45,480 --> 00:05:45,830 OK. 69 00:05:45,840 --> 00:05:49,000 That's that's the key key one. 70 00:05:49,000 --> 00:05:54,810 We get an empty object which is key to when we get an empty function which is key 3. 71 00:05:54,820 --> 00:05:58,210 All right so let's say we want to get just the values. 72 00:05:58,210 --> 00:06:02,110 So we'll say iterate values only. 73 00:06:02,710 --> 00:06:11,260 And all we would have to do is we'll change this to value and then map 1 dot values and then we'll go 74 00:06:11,260 --> 00:06:13,790 ahead and console log the value and save. 75 00:06:13,900 --> 00:06:17,400 And now we're looping through the values. 76 00:06:17,530 --> 00:06:17,830 All right. 77 00:06:17,830 --> 00:06:21,750 Now we don't have to just use four of we could also use a for each 78 00:06:26,390 --> 00:06:28,240 which you should be no stranger to. 79 00:06:28,240 --> 00:06:34,350 So we can say map 1 dog for each pass in our function. 80 00:06:37,520 --> 00:06:49,220 And we're going to pass in value and key and we'll just log what we did right here and save and you 81 00:06:49,220 --> 00:06:54,050 can see we get the key and the value so we can use it for each with sets. 82 00:06:54,050 --> 00:06:54,290 All right. 83 00:06:54,290 --> 00:06:58,510 Another thing we can do is convert sets to arrays. 84 00:07:03,480 --> 00:07:03,920 OK. 85 00:07:03,930 --> 00:07:13,490 So let's say we want to create an array of key value pairs. 86 00:07:13,490 --> 00:07:23,390 So what we could do is create a variable it's call it key thou array and set it to array from. 87 00:07:23,430 --> 00:07:27,750 Remember that we use that when we were working with the Dom when we're working with things like each 88 00:07:27,750 --> 00:07:29,850 team all collections. 89 00:07:29,850 --> 00:07:39,850 So it's just passed in map one and then we'll go ahead and console log the key value array and save. 90 00:07:40,020 --> 00:07:48,100 And now we have an array and if we look at these we have each one has the key and the value. 91 00:07:48,260 --> 00:07:49,000 All right. 92 00:07:49,030 --> 00:07:55,060 Now if you want to create an array just from values we could do that. 93 00:07:55,060 --> 00:08:01,130 So we'll say create an array of the values. 94 00:08:02,320 --> 00:08:15,160 So we'll call this thou array and set it to array dot from map 1 dot values and then we'll log valpré 95 00:08:15,400 --> 00:08:16,320 and save. 96 00:08:16,460 --> 00:08:19,520 And now you can see we have an array of values. 97 00:08:19,540 --> 00:08:19,900 All right. 98 00:08:19,910 --> 00:08:23,800 And as you prove a problem yes we can do the same thing with the keys 99 00:08:27,320 --> 00:08:39,350 so we'll change this to key array and say map 1 dot keys and then we'll cancel log T-Ray save and now 100 00:08:39,350 --> 00:08:45,050 we have an array of just the keys so the string the object in the function. 101 00:08:45,080 --> 00:08:52,220 All right so that is the basics of how maps work in the next video we're going to talk about another 102 00:08:52,220 --> 00:08:58,660 new edition a new type of object in ESX and that is the set.