Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • 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.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00: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.

Back to the top
View on GitHub