WEBVTT 00:06.740 --> 00:11.530 In this video you're going to learn a new data type called maps. 00:11.600 --> 00:14.660 So this is a new iOS 6 data type. 00:14.750 --> 00:22.010 So before we dive in let's understand the need for such a data type and what advantages it's going to 00:22.010 --> 00:24.410 provide us over existing data types. 00:25.010 --> 00:44.010 So let's create an object car with a couple of properties make and model. 00:44.210 --> 00:47.390 So this is an object. 00:47.390 --> 00:53.990 Now let's speak about some limitations that come with the objects data structure. 00:54.050 --> 00:59.000 Now the keys of the objects they are actually restricted. 00:59.000 --> 01:04.300 For example you come to use an object or a function as a key. 01:04.370 --> 01:12.300 Also there is an iteration problem when you iterate through the Keys of the object. 01:12.380 --> 01:18.290 It's not guaranteed that you will keep the same key or property or is. 01:18.290 --> 01:23.120 So if I do four key in GA 01:26.460 --> 01:30.470 log key you're gonna get this. 01:30.480 --> 01:37.190 You get the make and the model but actually it's not really guaranteed but you get the order right. 01:38.160 --> 01:41.270 So the order is not guaranteed. 01:41.610 --> 01:47.130 Now also you cannot use for each. 01:47.130 --> 01:51.470 So for each is a very useful method that you can use with arrays. 01:51.720 --> 02:00.630 But if you check the type of car doors this method for each 02:03.760 --> 02:11.220 you will get undefined because simply it does not exist. 02:11.220 --> 02:19.640 All right so to overcome these restrictions or limitations in E6 we of course a new data type which 02:19.640 --> 02:21.320 is called a map. 02:22.160 --> 02:29.150 So this data type will remove all those limitations and you can use it as an alternative to using object 02:29.350 --> 02:39.090 liberals for storing key value pairs that require unique keys and provide very useful methods for iteration. 02:39.110 --> 02:44.630 So this starts with a first example. 02:44.750 --> 02:45.260 So 02:48.100 --> 02:55.390 let's create a variable my map where we're gonna store a map. 02:55.390 --> 03:00.640 So you gonna use the map constructor like this. 03:00.780 --> 03:13.960 So if you log the outputs you will just get an empty map so that number shows the number of elements 03:13.960 --> 03:23.340 inside the map and when you create a map you can specify the elements of the map straight away by using 03:23.370 --> 03:24.080 an array. 03:24.090 --> 03:25.550 So that's one way of doing this. 03:25.650 --> 03:31.010 So inside the array you just place arrays including key value points. 03:31.020 --> 03:40.890 So for example is have first array showing a key one only value to another array with a key three and 03:40.920 --> 03:47.180 a value for now you can see the structure that we get. 03:47.310 --> 03:51.200 Those are the keys and those aren't the values. 03:51.260 --> 03:51.510 All right. 03:51.510 --> 04:01.180 So now if you check the type of a map objects let's see we're going to get 04:04.030 --> 04:04.700 it's an object. 04:06.140 --> 04:07.630 Okay. 04:07.720 --> 04:12.250 Also there are some useful methods that you can use with maps. 04:12.260 --> 04:14.550 So for example you can delete an element. 04:14.570 --> 04:17.520 So let's say that we want to delete the elements of key want. 04:17.740 --> 04:25.990 So to do that you just use the delete method and you specify the key the parameter. 04:26.010 --> 04:34.580 Now if you log the map again you'll see that the elements has been deleted. 04:34.580 --> 04:35.070 All right. 04:35.580 --> 04:44.940 Now this will return true or false so it will return true if successful. 04:44.940 --> 04:46.340 And you can try that by looking at s 04:51.390 --> 04:58.900 you can see that I'm guessing you also you can clear the home up by using the clear method. 04:59.080 --> 05:02.650 So this will delete all elements inside the map 05:08.280 --> 05:10.290 and now we're back to square zero. 05:10.410 --> 05:14.590 And you've got an empty map right now. 05:14.660 --> 05:21.380 Let's move to a second example and create a new map. 05:22.460 --> 05:30.110 So let's just comment this for now and create a new map. 05:33.040 --> 05:34.810 Using the map constructor. 05:34.810 --> 05:36.180 So this time we're just gonna. 05:36.520 --> 05:44.160 We're not gonna use an array right an array of arrays but we're gonna fill the map in a different way. 05:44.170 --> 05:46.440 So at the moment our map is empty. 05:48.530 --> 05:50.470 All right. 05:50.920 --> 05:59.680 And we want to fill the map using some elements so to make things easy. 05:59.780 --> 06:08.970 Are we gonna do we gonna create a few variables where we're gonna store different data types numbers 06:09.120 --> 06:15.270 strings objects functions and so on and then we're gonna use those to fill Alma. 06:15.510 --> 06:16.050 So 06:18.660 --> 06:25.120 let's define three variables x y and z. 06:25.500 --> 06:31.080 Where are we gonna store different values so a number not a number. 06:31.520 --> 06:36.500 Um Anup also let's create an object. 06:36.830 --> 06:38.160 So I'm gonna call it s language 06:44.590 --> 06:47.320 and let's give us a couple of properties. 06:47.350 --> 06:48.310 So javascript 06:51.070 --> 06:52.720 and version 06:55.260 --> 06:57.840 and also let's create a function 07:00.620 --> 07:06.500 so let's use an arrow function syntax 07:10.250 --> 07:11.780 so X plus Y. 07:12.980 --> 07:14.480 Let's create a string 07:17.950 --> 07:22.270 saying something like build interactive Web sites 07:25.380 --> 07:27.840 and this creates another one. 07:31.510 --> 07:37.770 Saying something like not a number is not equal to itself. 07:40.210 --> 07:49.860 But you will see that this will change when it comes to maps and I will explain why later. 07:49.860 --> 07:50.100 All right. 07:50.110 --> 07:54.200 So now let's start setting the key values. 07:54.540 --> 07:58.740 So you're going to feel our map by using keys and values. 07:58.780 --> 08:07.420 So let's say that we want a let's make a pair of x and 08:10.420 --> 08:11.000 z. 08:11.230 --> 08:14.340 So X is going to going to be the key and Z is going to be the value. 08:14.770 --> 08:22.950 So to do that you use the method sets off the map objects so key and then value. 08:22.960 --> 08:24.910 So now if you log your map 08:29.290 --> 08:34.910 you'll see that we've got a new element the key value points. 08:34.960 --> 08:37.660 Let's try with 08:42.630 --> 08:50.130 the language object as the key and this string of debugging 08:53.930 --> 08:54.700 here we go. 08:54.710 --> 08:59.480 So you've got an object as the key and the value as a string. 08:59.480 --> 09:04.130 So you can see that we are lifting all the limits the limitations that we had with objects. 09:04.130 --> 09:09.860 So our key this time is actually an objects and there is eight number. 09:09.860 --> 09:13.750 All right so let's try something else. 09:13.820 --> 09:17.380 So the key this time let's solve is as a function. 09:17.690 --> 09:22.470 And the value of its US. 09:22.940 --> 09:24.560 So this time this creates an array 09:31.780 --> 09:39.560 OK and you can see that s of course a function as the key and an array as the value. 09:40.370 --> 09:40.840 All right. 09:40.850 --> 09:45.290 And let's have one more one this time. 09:45.320 --> 09:48.140 Let's have the key Oz Nottingham. 09:48.310 --> 09:49.260 Why. 09:49.520 --> 09:52.880 And the value this time is Oz string to 09:55.760 --> 09:57.680 all rights save. 09:57.770 --> 09:58.370 And here we go. 09:58.370 --> 10:04.410 So this is our map filled with plenty of elements. 10:04.540 --> 10:04.790 All right. 10:04.790 --> 10:14.480 So now let's explore some more methods of maps or the map objects so we can get values or check if they 10:14.480 --> 10:17.020 exist. 10:17.060 --> 10:22.550 So for example you can guess the value corresponding to 10:26.260 --> 10:29.740 the key X using the get method. 10:29.740 --> 10:36.100 So it gets you postulates the key that you'd like to get or the key corresponding to the elements you'd 10:36.100 --> 10:37.130 like to return. 10:37.360 --> 10:42.710 And it will return less elements what you call the value of that elements. 10:42.730 --> 10:46.360 So we're looking for that key and we got that value. 10:46.360 --> 10:47.790 All right. 10:47.800 --> 10:49.480 So you can try with 10:52.990 --> 10:53.710 another key. 10:53.710 --> 10:58.830 So for example let's try the same one. 10:58.850 --> 10:59.040 Right. 10:59.040 --> 11:05.800 So instead of X we're gonna use the neutral like the literal value of x which is one and we get the 11:05.830 --> 11:07.020 same results. 11:07.170 --> 11:09.090 Right. 11:09.340 --> 11:11.970 Because obviously X is equal to one. 11:12.070 --> 11:18.370 Now you can check if a value exists. 11:18.430 --> 11:27.470 So to do that you just use the has method which will check if there is an element of key one. 11:27.490 --> 11:35.320 So let's try this only gets true because we've got elements of key one right now. 11:38.010 --> 11:47.290 Let's try with something else so let's try with the language objects and we know that it's there. 11:47.650 --> 11:50.850 It's a key. 11:51.090 --> 11:51.530 It's very 11:57.270 --> 12:04.890 so we guessing the corresponding corresponding value and it's returning true because it does exist. 12:04.890 --> 12:14.100 All right so now what if instead of language you pass the literal value of the object language 12:17.550 --> 12:21.170 so let's use it gets again. 12:21.380 --> 12:27.250 Well let's keep it has and parse this for now so. 12:27.280 --> 12:30.110 Do you think this is gonna return true or false. 12:30.250 --> 12:31.080 So it is finite. 12:32.040 --> 12:34.060 So it's returning false because obviously 12:36.460 --> 12:44.650 language is not equal to that even though you said the value of language too. 12:44.650 --> 12:46.690 That's right. 12:46.900 --> 12:52.570 Because as you know an object is defined by reference. 12:52.570 --> 12:52.870 Right. 12:55.240 --> 13:01.310 So here we are getting false because objects are not equal. 13:01.360 --> 13:06.220 So if you define a couple of objects using the same object literal. 13:06.220 --> 13:15.190 This is known that the two objects are not going to be equal because each object is creating a new reference 13:15.220 --> 13:17.010 in JavaScript. 13:17.310 --> 13:17.590 Right. 13:18.040 --> 13:23.490 So now let's try with something else. 13:23.530 --> 13:35.150 Let's try gets off the function and it gets in the corresponding body. 13:35.170 --> 13:36.790 All right let's try. 13:36.790 --> 13:43.230 We have not a number and we getting the corresponding body which is this one. 13:43.540 --> 13:44.950 That's the key. 13:44.980 --> 13:55.150 Now what if you try instead of not unknown number you try with the value or the variable where we stored 13:55.420 --> 13:56.890 not a number which is why 14:01.220 --> 14:03.070 you get the same results. 14:03.120 --> 14:05.590 Now that's one. 14:05.640 --> 14:10.260 And that's one we are they are actually not equal. 14:10.260 --> 14:15.710 If you check the equality because we know that most number is not equal to itself. 14:15.740 --> 14:15.950 Right. 14:15.960 --> 14:28.840 So if you try console don't log n a number equal not a number you will get false. 14:29.260 --> 14:29.570 Right 14:33.510 --> 14:40.420 even though this changes when it comes to maps all right. 14:40.980 --> 14:46.680 If you try even with that you will get false even though. 14:46.740 --> 14:49.830 Why was said to be equal to not say no. 14:50.220 --> 14:52.130 So this is something to bear in mind. 14:52.170 --> 14:59.040 It wouldn't work with objects because objects or objects liberals because as we know objects they create 14:59.070 --> 15:02.760 a new reference every time you create them. 15:02.760 --> 15:07.980 But with most a No it's gonna be difference. 15:08.010 --> 15:08.960 All right. 15:09.240 --> 15:17.550 So not a number is not equal to itself but this changes 15:20.400 --> 15:23.490 when it comes to maps. 15:23.500 --> 15:29.070 So basically when you check in the Keys or trying to get elements corresponding to certain keys. 15:29.400 --> 15:29.640 All right. 15:29.640 --> 15:33.490 So now let's move to something else. 15:33.540 --> 15:45.810 Let's move to iteration so uh we're gonna use iteration with four of so to do that. 15:45.820 --> 15:47.620 You can use the structuring. 15:48.010 --> 15:48.790 So for 15:51.280 --> 15:57.610 const key value like this of my month 16:00.820 --> 16:06.010 log something like Key is something 16:14.730 --> 16:15.750 and value 16:19.230 --> 16:22.870 is value. 16:22.870 --> 16:23.210 All right. 16:23.640 --> 16:27.350 So if you try this this is where you're gonna get. 16:27.450 --> 16:30.860 So you're printing the keys and then you printing the values. 16:30.870 --> 16:38.380 So this is one good example of the structuring used with a For off loop with maps. 16:38.500 --> 16:39.140 Right. 16:39.150 --> 16:47.850 So now if you try instead of an array like this you destroy a value like this and you print 16:51.950 --> 16:52.550 the value 16:56.020 --> 16:59.190 you see we're gonna get you getting 17:04.890 --> 17:08.190 all the values of the map as arrays. 17:08.190 --> 17:14.350 So each value is actually an array sharing the key and the value right. 17:15.760 --> 17:27.540 So now let's just keep the first one using restructuring because that's the easiest way. 17:27.670 --> 17:30.250 Here we go. 17:30.270 --> 17:36.930 You can also use the for each method which used to use with arrays. 17:36.930 --> 17:38.340 So with maps you can use it. 17:38.880 --> 17:47.430 So to do that you just use for each like let's touch it to the map and he points to for each a function. 17:48.000 --> 17:51.990 So let's use an error narrow function. 17:51.990 --> 17:58.050 So we're gonna pass parameters to the function key and the value to the first prime minister is the 17:58.050 --> 17:58.830 key. 17:58.830 --> 18:01.170 And if you pass a second primary that is going to be the value. 18:01.170 --> 18:02.410 So this one is optional. 18:03.420 --> 18:07.100 So let's say that you just gonna do something very similar to that 18:24.510 --> 18:27.850 and you get the same results. 18:28.020 --> 18:35.610 And finally just like you did with arrays you can create an iterator out of a map. 18:35.610 --> 18:46.330 So it is defined a variable K and create an iterator using entries or the entries method so if you log 18:46.360 --> 18:50.700 K you will get an iterator. 18:50.710 --> 18:51.140 Right. 18:51.820 --> 18:54.140 And this time it's a map iterator. 18:54.440 --> 19:04.900 And if you call next on THE NEXT method you keep guessing the next element with the value on the Dan 19:04.900 --> 19:06.470 properties. 19:06.480 --> 19:12.730 And if you carry on the final one you're going to be undefined as you would expect 19:16.100 --> 19:17.280 just like you did with arrays. 19:17.300 --> 19:23.520 You can use the keys or values methods. 19:23.630 --> 19:23.840 Right. 19:23.840 --> 19:32.750 So for example with values you get only the values with the keys you get only the keys.