Original subtitles

So in the last lecture,

we talked about values and variables.

Now in every programming language values

can have different types.

Depending on the type of data that we want them to hold.

And we already saw strings and numbers

but there are actually more data types.

So let's now take a look at all the types

that we have in JavaScript.

And first of all, in JavaScript,

every value is either an object

which looks something like this or a primitive value.

So a value is only a primitive when it's not an object

and we will learn all about objects later

but for now let's really focus on primitive data types.

So there are seven primitive data types,

number, string, bullion, undefined, null,

symbol and big int.

So let's look at them one by one.

First, we have the number of data type

and numbers are always so-called floating point numbers

which means that they always have decimals

even if we don't see them or don't define them.

For example, the 23 value debt we have here

is exactly like having 23.0.

But they are both simply the number data type.

In many other programming languages,

you will find different data types for integers

and for decimals but not in JavaScript.

All numbers are simply of the type number.

Okay, next up we have strengths

which are simply a sequence of characters.

And so they're just used for text as we already learned

and always put them in quotes,

no matter if double quotes or single quotes

otherwise JavaScript will actually confuse them

with variable names.

The Boolean data type is essentially a logical type

that can only take one of the logical values true or false.

In other words, a Boolean is always either true or false.

All right, we use Boolean values to take decisions

with code as we will see later.

And these are the three most important data types

that we will deal with the most

but there are still four more

which might be a bit more confusing.

So first, undefined is the value taken by a variable

that is not yet defined.

And the variable thats not yet defined

is simply just a variable that we declared

but without assigning a value

for example like this children variable here.

So basically we can say that undefined means empty value

then there's also null which is actually pretty similar

because it also means empty value

but it's used in different circumstances.

But for now, don't worry about the details.

I just want you to know that null also exists for now, okay.

Anyway, next we have symbol which was introduced in ES2015

and this data type is not really useful for us,

it's simply defines a value that is unique

and cannot be changed.

And we will talk about this briefly

by the end of the course.

Finally, starting in ES2020 there is also BigInt

which is for integers that are too large

to be represented by the number type.

So basically it's another tire before numbers

and we will talk about this one in another section.

So these are the seven primitive data types in JavaScript.

But there is another fundamental thing to know about types

which is the fact that JavaScript

has a feature called dynamic typing.

This means that when you create a new variable,

you do not have to manually define the data type

of the value that it contains.

In many other programming languages,

you actually have to do that but not in JavaScript.

Instead, Java script automatically determines

the data type of a value when it's stored into a variable.

And this distinction between value and variable

is pretty important because in JavaScript,

it's the value that has a type, not the variable.

So variables simply store values that have a type.

Many people don't know about this detail or just don't care

but this is how it actually works.

Now another important application of dynamic typing

is that later in our code, we can assign a new value

with a different data type to the same variable

without a problem.

For example, variable x can initially be a number

and then later a string, that's not a problem at all.

And this can of course be very useful

but it can also be the source of some difficult

to find books which means errors in our code.

All right, so let's not actually see these things in action.

But before we talk about data types,

let's quickly talk about code commenting.

So in programming, we use comments to literally come

and code or to deactivate code without deleting it.

For example, here, I could write a single line comment

using // and then I can describe what this code is doing.

For example here, I can say, variable name conventions

and JavaScript will completely ignore anything

that is a comment.

So anything that comes after // like this, okay.

And this can be really useful to kind of divide

or code into different sections

and to explain what different pieces of code

are actually doing in our code.

So that's a very useful application of comments

but another one is to simply comment out code

that we don't want to be executed for some reason.

For example, let's say we don't want this code here

to be executed but we also don't want to delete it.

So we can simply comment it out like this.

And so if I save it and then

when I reload this 61 should be gone.

So you see, that's because JavaScript

is now ignoring this code, it's just a comment.

But since we didn't delete it,

we can of course bring it back.

So we can just delete it and then it's back to normal.

Now in VS code we can also automatically create comments

using the command slash shortcut.

So that's command or control slash to turn on

and then again to turn off.

So that single line comments

but we can go even further

and also create multi line comments.

And to do that, we do it like this.

We start a multi line comment using slash and an asterisk

and then we ended with the asterisk or star

and then the slash and whatever comes here

is then a normal code.

Okay, and with this, I effectively got rid

of this first code that we typed in the first lecture

but without deleting it.

And so I can keep it here basically as a reference.

All right, and so that's what I'm gonna do

in every lecture now.

We'll always kind of get rid of the previous code

by using a multi line comment like this.

But now let's get back to the topic of this lecture

which is data types.

So in a previous lecture,

we already saw numbers and strengths, right.

So here we have a value which has a number

and here we have a value which is a string.

So nothing new, right.

That's will be learned at the beginning of the video

but we also talked about booleans, right?

And so Boolean is a value that can only be true or false.

And so if I write true,

that is then automatically a Boolean value

which is in this case true.

Okay, and actually I can also lock that to the console

and then here you get true

and you can see that it's not a string

because strings are printed in white

and this value is printed in this pink.

And so it' actually really a Boolean value.

And of course we can also store Booleans in variables.

So let's say Java script is fun using

the camel case notation that we learned about before

and done, set it to true.

And now we can log JavaScriptIsFun instead

but of course the variable declaration here needs

to happen before the lock.

And that's because JavaScript programs are executed

from top to bottom like this

and more about that a bit later, okay.

What matters is that this need to be at the end.

So let's cut it and put it here

and also get rid of this one, save it.

And here we still get true.

And so here we created a nice

and descriptive variable name holding a Boolean value.

And remember that it's actually the value

that holds the data type and not the variable

because I could now actually go ahead and change this

to a value with another type.

And actually I will do that in a second

but for now let's take a look

at a special operator called type of.

So type of it's an operator just like the plus

or the minus operator

that we can use to show the type of a value.

So let me show you how.

So again, we use console.log because we actually want to see

the result of this operator in the console.

So type of and then let's say just true, okay.

And more about how operators actually work

and what they are a bit later in the section.

For now, let's just see what happens when we reload this

and we see that it's a Boolean.

So just as I said, the result of using this operator here

on a value will be a new value

which is a string with the type of this value here, okay.

So let's do that again here.

I will copy it just a couple of times

just like this to make it a bit faster.

And so here let's use JavaScriptIsFun.

And so this should also be a Boolean

but just to make sure.

Here let's now use a number and finally a string.

So just to prove you

that these are actually numbers and strings.

All right, and indeed we see that JavaScript

is fun is a Boolean, 23 is a number and Jonas is a string.

And speaking about strings,

I just want to quickly emphasize that we really always need

to use quotes in order to create a string, okay.

Let's actually show that here in the console.

So we can use double quotes or single quotes

but we really do need quotes in order to create a string.

So Jonah's, for example is a string, okay,

and so is Jonah's with single quotes

but if we do it like this then it's not gonna work.

So it needs to be the same at the beginning and the end.

but without any quotes at all,

JavaScript will see this as a variable.

And so then we get this reference error

which is saying that Jonah's is not defined.

And that's because it's looking for a variable

that does not exist.

We never declared a variable called Jonas, right.

And so that's why we get this error here.

So when you need a string, don't forget the quotes.

This is a mistake that I see beginners make all the time.

And so really be careful about that.

Now moving on, let's actually see dynamic typing in action.

And remember that dynamic typing simply means

that we can easily change the type of a value

that is hold by a variable.

So that sounds a bit fancy

but it's really as simple as this.

So we already have a variable called JavaScriptIsFun

and so let's now reassign that variable.

So we do that like this.

So we write the name of the variable then equal

and then a new value.

And what matters is that we do not write

the let here again.

So this let keyword.

So the first time that we declare a new variable

we need to do it using let

but then when we want to change the value of the variable,

we simply write it again like this but without the let.

So we simply assign a new value here

to this already existing variable.

And this is actually the first time that we did that

and so it's important to understand what happened here.

Okay, so again, we first declared a new variable

with this name and assigned it this true value.

And then down here, we changed the value data's

in the variable.

So using the box analogy from before,

it's like initially putting a book in a box

and then later taking the book out of the box

and instead putting a phone in a box.

And so just like here, we changed the content of the box.

In our example here, we changed from true

to the string of yes.

Okay, and now let's just grab this piece of code here

so that we can see that dynamic typing actually works.

So if I reload now,

then let's see.

Well, we get here from line 34.

Let's actually simplify this a little bit.

So commenting out this code and I'm using command

or control slash, that's a reload again.

And so you'll see that initially the type of JavaScript

is fun is a bullion, right.

But then we change it to a string down here.

And so indeed when we then test the type

of the variable again in line 39,

then we get the result of a string.

All right, and that basically is dynamic typing.

Great, and now let's see an example of undefined.

So remember that a number string and bullion

are the most used data types

but there are more like undefined and null

and also symbol in BigInt but in this lecture,

I'm only gonna talk about the three most important ones

and then also undefined and null.

So remember that undefined is the value taken

by a variable that is not yet defined.

So basically undefined means an empty value.

So it's perfectly legal in JavaScript to do this.

So to define a variable without value.

And if we now take a look at this variable,

then we should see undefined.

And actually let's also check the type

so that I can show you something, here.

Okay, and so you get both undefined.

What this means is that whenever we declare

an empty variable, the value of the variable

will be undefined, enter type of the variable

is also undefined.

Now that maybe sounds a bit confusing but it's really not.

So simply put undefined is both the value

and the type of the value and undefined

is different than other types in this way.

But this detail is not really important.

What matters is that when you declare

an empty variable like this

it will automatically hold the value of undefined.

And that's why we get undefined here.

Then just like before, we can also reassign

this variable basically.

So we can now go ahead and say year 1991.

And once more without the let

because we are not creating a new variable,

we are simply assigning a new value to you.

So it used to be undefined, right, as we just discussed

and now I'm changing it to 1991.

And so if I test for the type now again,

it should now be a number, right.

So let's check that.

And indeed we can again see the effect of dynamic typing.

Great, and now finally just to quickly finish,

I want to show you an error that exists

in the type of operator.

So all I'm going to do here is to quickly say,

console.log type of null.

So remember that null is just another data type

and it's similar to undefined.

And it's also similar in the fact that both the value

and the type of the value are null, okay.

Now about this bug, Java script says that a type of null

is an object and this doesn't make any sense at all.

And so this is regarded as a buck or an error in JavaScript.

However, this bug is never corrected for legacy reasons

but now it's of course not an object.

This should return null

just as type of undefined returns undefined.

So just keep that in mind when working with type of

but we will also come back to this later in the course

to make sure that you don't create any accidental bugs

because of this weird behavior.

Okay, and that's all I had

to tell you about data types in JavaScript.