Jonas: 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.