- Overview
- Transcript
3.4 Maps
Maps are objects that store key, value pairs. In the case of maps, both the keys and values can be of any type.
Syntax
new Map()
set
get
has
delete
1.Introduction2 lessons, 07:42
1.1Introduction02:12
1.2Setup05:30
2.Language Fundamentals8 lessons, 1:00:53
2.1Variables06:33
2.2Data Types11:28
2.3Arithmetic, Assignment, and Comparison Operators10:24
2.4Unary, Logical, Comma, and Spread Operators09:02
2.5Operator Precedence03:50
2.6Reserved Words04:17
2.7Strict Mode04:34
2.8Functions10:45
3.Data Structures5 lessons, 22:52
3.1Arrays04:29
3.2Objects04:30
3.3Sets04:57
3.4Maps04:21
3.5Weak Maps and Weak Sets04:35
4.Controlling Program Execution7 lessons, 37:06
4.1Conditionals07:49
4.2Switch Statements04:41
4.3The For Loop06:39
4.4The `for .. in` Loop05:17
4.5The `for .. of` Loop04:02
4.6Iterators05:03
4.7While Loops03:35
5.Using JavaScript13 lessons, 1:44:36
5.1Working With Strings09:32
5.2Template Literals05:46
5.3Working With Numbers06:57
5.4Working With Arrays12:53
5.5Iterating and Transforming Arrays07:33
5.6Working With the Object Type13:55
5.7Object Literal Extensions06:45
5.8Working With Object Instances06:45
5.9Getters and Setters05:00
5.10Custom Objects11:28
5.11The `Math` API04:54
5.12Working With Dates and Times08:10
5.13The `Array` Constructor04:58
6.Functions8 lessons, 56:07
6.1The `this` Object06:15
6.2Working With Functions10:11
6.3Scope07:37
6.4Arrow Functions06:59
6.5Generator Functions08:13
6.6Closures05:00
6.7Prototypes06:26
6.8Default and Rest Parameters05:26
7.Miscellaneous6 lessons, 52:39
7.1Destructuring Assignments08:09
7.2AJAX08:30
7.3Regular Expressions10:51
7.4More About Regular Expressions08:38
7.5Classes06:48
7.6ES Modules09:43
8.Working With the DOM6 lessons, 37:39
8.1Selecting HTML Elements05:02
8.2Manipulating HTML Elements07:40
8.3DOM Traversal05:25
8.4Adding and Removing Elements04:45
8.5Creating Elements and Other Nodes04:39
8.6DOM Events10:08
9.Web APIs4 lessons, 17:41
9.1The Selector API03:03
9.2Geolocation05:29
9.3Web Storage05:24
9.4Web Workers03:45
10.Asynchronous JavaScript5 lessons, 26:23
10.1Promises09:52
10.2Promise Chaining05:11
10.3The async Keyword03:21
10.4The await Keyword04:04
10.5More About async and await03:55
11.Conclusion1 lesson, 00:43
11.1Conclusion00:43
3.4 Maps
Hi folks, in this lesson we're going to look at a data structure called a map. Maps are similar to sets, which we looked at in the last lesson, except for the fact that maps store key value pairs instead of individual values. Sets are similar to arrays, but maps are more similar to objects. Let's take a look. Like with sets, we need to use the map constructor to create a map. At this point in time, there is no literal form for maps. So now the variable myMap will contain a new instance of the map object. Just like with sets, we can also create a map that contains data. Instead of passing a regular iterable, we need to pass a two-dimensional array to the map constructor. So the array is a two dimensional array because it is an array which contains other arrays. The elements in the first array will be used for the key names in the map, and the elements in the second array will be the values associated with the keys. Unlike with regular object literals, the keys as well as the values, can be of any data type. Here we have strings as the keys and numbers as the values. But we could also have objects as the keys, and numbers as the value or functions as the keys, and objects as the values. Maps have a very similar API to sets but with some key differences. So first, lets look at the methods the map has which the set doesn't. If we want to add a new key value pair to the map, we use the set method. This method takes two parameters which are the key and the value. So this expression will add a new key to myMap2. The new key will be the string value C, and the value of this key will be the number 3. The set method returns the map object so it can also be chained. This method works in the same way as the set objects and method. Unlike with a set, we can retrieve a single value from the map without having to iterate the whole map. To do this, we use the get method specifying the key of the value that we want to get. So the rest of the map API is very similar to the set. We can use the has method to see whether the map contains a given key. And we can delete a key and its associated value using the delete method, and once again, this method returns a boolean to indicate whether the key was removed or not. If the key doesn't exist in the map, it won't be removed. But it also won't throw an error, it will just return False. We can empty the map completely using the clear method. And we can also iterate a map with a for each loop or using for of. We haven't covered looping yet. We will be coming to that in the very next section. Just like the set, the map can also return iterators, and has several methods for doing this, which it shares with sets. For example, the entries and values methods. We'll be looking at iterators later in the course, so I don't wanna spend too much time looking at them now. So, in this lesson, we looked at the Map object and saw that it is similar to the set object in the API that it exposes, but that we use it to store key value pairs instead of individual values. We also saw that the Map's API is very similar to the set API, except that it uses the set method to add new key value pairs, and the get method to retrieve values. In the next lesson, we'll look at WeakMaps and WeakSets. Thanks for watching.