Hey, everyone, in this video, we are going to talk about name spaces earlier in the course, we talked
about variable scope and we saw the global variables can be accessed from anywhere in the code.
So as our application grows and becomes more complex, it is likely that at some point two variables
are functions.
We end up having the same name and this is going to cause a conflict.
We might get errors that we take a long time to identify, and this can be very problematic to our application.
So the way we can keep our code organized while keeping the variable names simple and avoiding conflict
is by using name spaces.
This is going to create a local scope for our variables and functions.
Name spaces are something very common in many programming languages, but JavaScript doesn't actually
have name spaces.
So what we are going to see here are alternative ways of achieving the same outcome.
So I'm not going to go into details with this.
I just want to talk about what name spaces are.
I'm going to show you one example, which is by using objects.
And then if you want to dive deeper into this subject, I'm going to leave a few links at the end so
you can learn more.
So let's see how we can create name spaces with objects.
So let's go to Visual Studio Code.
Let's say we have a component in our home page, which is a best seller slider.
So let's say we have a product slider that shows prices that have links.
So we want to create variables to store the information for this slider.
So let's say we want to start by the products.
We could create a variable called product.
And then let's start a list here, so I'm just going to create a very simple example.
Like this.
So these would be the products for our product, Slider, but as our application grows, it is likely
that I'm going to use this name somewhere else in the code.
So what could we do with this?
Well, we could just make this name more specific so I could do like products for.
Best.
Sallas slider, but as we've learned in the beginning of the course, we should try to keep the names
simple, we should try to use as few words as possible.
So this is not a very good name for our variable.
And besides, maybe we need to store more information about the slider.
So let's say we need to start the interval.
So I would have to create something like Intervale.
Then I can just repeat.
The rest of it, so intervale for best seller Slider, which is going to be three thousand milliseconds,
which is what I'm going to use for the interval between sliders, and this can go on.
So, as you can see, this is not a very good way of doing this.
We have very complicated names for our variables.
And also they are just going to be there in the global scope, which is not a very organized way of
doing this.
So how can we make it much better by using a namespace?
As I've said, it's not exactly a namespace, but just a simulation of a namespace by using an object.
So instead of creating stuff like this, I'm going to create an empty object here.
So let me use this name bestseller's slider.
Like this, which is going to be an empty object.
So every time you have a section of your page or maybe a page in your website, you should always organize
it like this, just create an object and keep everything for that section or for that page inside the
object.
So now, instead of having big names like this, what I can do is just.
Using objects, properties as variables.
So what I'm going to do now is just.
Getting this object and I'm going to start creating properties, so one of the properties is going to
be called products.
And then.
I can store the product.
And I'm going to do the same thing for the interviewer.
Just like that.
Now, let me copy this name.
I'm just going to save it, and if we go back to the page, let me open the inspector here.
Now we have this variable that storing everything we need for our slider, so this is much more organized
and now if we want the product.
We don't have that crazy name anymore.
All we need to do is call the best sellers slider variable, which is not likely to repeat throughout
the code and inside it, we have meaningful and simple names like products.
So if we do like this product, then we are able to get the products we want.
And by doing this, we can make sure that this is not going to cause any conflict with any other part
of our code that has a product variable.
So when you hear about name spaces in JavaScript, this is what actually people are talking about.
Just remember that name spaces are not part of the core JavaScript language.
So what we are doing is just simulating name spaces by using objects.
So just going back to the code instead of doing it like this, just creating an empty object, we can
actually create all the properties we need when we are creating the object.
So we could just we like this.
Let's create a property called products.
Then let's remember that inside objects we just use.
Key value pairs, so the key is called product, and this is the value associated to this key or property,
the same thing.
For any other property that we want to add here, so Intervale.
Colin.
So these are properties of the object, and let's remember that objects also have methods.
So if you want to add a function, you could create one like get.
Products so associated to this property, I'm just going to create a function which is going to turn
this into a.
Method of this object, and as we know inside objects, we can use this keyword to refer to the object.
So I can just do cancel the log.
This dot.
Products.
So if I do this.
And let's try to call that method so get products, don't forget to open and close parentheses.
And when we do this, as you can see, we are just calling a method from this object.
So, again, this is a very simple name, get products.
But as this is inside this object, there's no risk of having the same name associated to another variable
and then causing a conflict.
So this is why it's a good idea to use namespace in JavaScript.
So this is one way by using objects, I'm not going to go into other methods because I just wanted to
scratch the surface of this subject.
But if you want to learn more, you can check this link about Modu patterns, which is going to create
namespace with functions.
And there's also this other link where you will see a few more examples.
So that was all I wanted to speak about.
Name spaces.
I'll see you in the next video.