Original subtitles

Dealing and working with data is the main thing

that we do as developers.

And that's the reason why,

since the beginning of the course,

we have been working

with JavaScripts built-in data structures,

like arrays and objects.

Then in the last few lectures

we learned about two new data structures

which are sets and objects.

So now we have four data structures

from which we can choose.

And so I decided to create this quick lecture

which will show you the pros and cons of each data structure

and also when to choose each of them.

And I want to start this video by quickly categorizing

where data can actually come from.

So there are essentially three sources of data.

First, the data can be written

within the program source code itself like status messages

that will be displayed on a webpage based on user actions.

Second, data can come from the user interface.

So from the webpage,

it can either be data that the user inputs into some form

or data test already written somehow in the DOM.

For example, this can be the users tasks in a todo app

or expenses in a budget app or anything like that.

Finally, data can come from external sources

which is usually a web API.

Now what is a web API?

Well, API stands for Application Programming Interface

and we can basically use a web API to get data

from other web applications.

For example we can use a web API

to get the current weather in any city or data about movies

or currency conversion rates

and really every kind of data that you can imagine.

And we will learn how all that works later in the course.

So no matter where the data comes from

and what kind of data it is,

we usually always have collections of data

that we then need to store somewhere.

And so where do we store collections of data?

That's right, we use data structures, but as you know

there are four built-in data structures in JavaScript.

And so now we need a way of deciding between them,

but it's not that hard.

So the first decision is this

do we just need a simple list of values?

If so, then we're gonna use an array or a set.

But on the other hand if we need key value pairs,

then we need an object or a map.

So the big difference here is that with a key value pair

we have a way of describing the values, so by using the key.

On the other hand, in a list like an array or a set,

we simply have the values without any description, okay?

Now, as a quick example,

let's go back to getting data from a web API

because in modern JavaScript applications

that's usually the most common source of data.

So data from web APIs usually comes in a special data format

called JSON which looks like this example here.

So JSON is essentially just text so a long string,

but it can easily be converted to JavaScript objects

because it uses the same formatting

as JavaScript objects and arrays.

So here we have three objects that describe recipes.

We have the values in green, like the title and a publisher.

And it makes complete sense

that these values are then described using a key.

Otherwise we would have no idea

what the different values actually are, right?

So key value pairs are essential here

and that's why this data is stored in an object,

not an array.

Now, each of these recipe objects in itself

can be seen as a value.

And since we have many of them,

it means that we have again a collection of data

and therefore we need a data structure to store them.

Now, do we want to describe each of the objects?

Well, it's not really necessary, is it?

We already know they are all recipes

and whatever information we need about the recipes

is already stored right in each of the objects.

So all we want is basically a simple list

where all the recipes are held together.

And so here an array is the perfect data structure for debt.

And in fact, creating an array of objects

is extremely common in JavaScript.

Now you will be working with this kind of data all the time

as a professional JavaScript developer.

And that's why I'm placing so much focus on this here.

Okay, now before we move on to compare array, sets,

objects and maps, I quickly want to mention

that there are also Weaksets

and WeakMaps data structures in JavaScript.

Also, there are even more data structures

that are used in programming,

but which are not built into JavaScript.

And just to mention a few,

these can be stacks, queues, linked lists, trees,

or hash tables.

And these don't really matter for now

but I still just wanted to let you know

that there are more than just

the four built-in data structures.

But now let's talk a bit more

about the built-in data structures.

So you already know at this point how to use all of them,

but it's important to know when to use them.

So starting with arrays versus sets, we already know

that we should use them for simple lists of values

when we do not need to describe the values.

Now you should use arrays whenever you need to store values

in order and when these values might contain duplicates.

Also you should always use arrays

when you need to manipulate data

because there are a ton of useful array methods.

Now sets on the other hand should only be used

when you are working with unique values,

besides that you can also use sets in situations

when high performance is really important

because operations like searching for an item

or deleting an item from a set can be

up to 10 times faster in sets than in arrays.

Now one great use case for sets

is to remove duplicate values from an array

like we already did before.

So sets are really not meant to replace arrays

but rather to compliment them

whenever we are dealing with unique values.

Okay, so now let's talk about objects versus maps

and we already know that we should

use these key value data structures

whenever we need to describe the values using keys, right?

But when to use objects and when to use maps.

Well objects have been

the traditional key value data structure

simply because we didn't have maps before ES6,

but using objects simply as key value stores

has a couple of technical disadvantages.

And that's why some people say

that we've been abusing objects for this.

Now maps on the other hand are way better suited

for simple key value stores

because they offer better performance in fact.

Also map keys can have any data type

and they're also easy to iterate

and it's easy to compute the size of a map.

However, the biggest advantage of objects

is probably how easy it is to write them and to access data

by simply using the dot or the brackets operator.

Also most developers are already super used to objects.

And so they simply keep using them

for simple key value stores.

Anyway, as a conclusion you should use maps

when you simply need to map keys to values

and also when you need keys that are not strings

because as we saw in the last video,

that can be very powerful sometimes.

Now, if you need functions as values

then you should absolutely use an object for that.

So in objects, these functions are then called methods

and you can use the this keyword to access properties

of the same object, which is impossible in maps.

Also, when working with JSON data,

as we saw in the previous light

you will probably be using objects for that as well

unless you then want to convert the objects to maps,

but that's usually not something that we do.

So in fact, we still use objects all the time

but maps are also a very important data structure right now

and way more important than sets.

Great, and with that, we wrap up this overview.

I hope you found this useful and so let's now move on.