All language subtitles for 5. Variables

Welcome back! Up to this point we've played around with some JavaScript types.

Only 3 out of 7. Don't worry, we'll get to the rest of them.

But there's one problem.

How does the program remember things?

For example, if we write "These pretzels are making me thirsty".

And we'll do this.

"+" We need the exclamation "!".

OK.

I enter that.

OK. I get that. That's - that's good.

But if I need to use this again.

Well. Again I have to write "These pretzels

are making me thirsty".

And imagine if have to do that hundreds of times.

That's kind of annoying right?

That's - computers are supposed to help us but instead we just keep writing stuff and keep writing stuff.

And that's not very efficient, is it?

Well to catch and hold values

JavaScript has something called variable's. And variables can be used

with the word 'var'.

So now if I go 'var george', so 'var george = "These pretzels are making me thirsty"'

plus [+] "!".

Notice the 'semicolon' here - I'll explain what that does in a bit.

I press 'Enter'. I get 'undefined'.

Let's not worry about that.

That doesn't matter for now.

And now if I go 'george' and you'll see that Google Chrome actually helps me and recognizes it.

I press 'Enter'.

"These pretzels are making me thirsty!". How awesome is that?

So we're able to store this value.

And obviously this is simple, but imagine, this was a long calculation that we had to make and we want

to access it.

Well, all we need to do now is have 'george'.

It's a 'variable'.

So now you see in the last video when I said that when we're comparing things we have to use '==='

Well because when you do '3=3' it's saying: 'Assign the number 3 to 3'.

But there's a rule with variables. With variables

you can't start with numbers. So if I go 'var 3 = 3', I'll get an error.

But if I go 'var three = 3', well, that's no problem.

And variables have a few rules.

The rules are: Well, it needs to start with a letter.

It can end with a number, that's fine, but it needs to start with the letter and it can't start with a symbol.

So I can do 'var &hello = 5'. Now I'll get en error.

So a variable needs to start with the letter, can end in a number, that's fine.

And there's a few other special cases. A variable can also start with a '$' or '_'.

But we don't need to worry about that too much and the standard and JavaScript so you won't get an

error.

If this happens, but you do something called 'camel case'. So if it was a word, let's say 'firstname', you

do 'camel case', because these are two separate words. You do lowercase

the first word. Second word is going to have uppercase.

So 'firstName'. You've capitalized the first letter and that's called 'camel case'.

So still not getting what variables are? Well, I'm going to demonstrate this point further

and why we need to store values in a programming language.

I'm going to introduce you to a little cool trick called 'prompt'. And 'prompt()', when I use these brackets

and I press 'Enter'...

Look at that.

I've got something here and it's asking for something and I press OK.

And look at that!

It returns whatever I typed.

Let's try that again. If I go 'prompt()',

press 'Enter' and say 'Hello', press 'OK'.

I get that response back.

OK.

So how can we say something like 'What's your username?' and store that value?

That's something that we use quite a lot on websites, right? Well, with 'prompt' you can do 'prompt()'.

Then here we'll say "What is your username".

So we're entering the string here.

And if I press 'Enter'.

OK, so it says "What is your username".

So now if I type in my username is "andrei", I get the 'username'. So using that knowledge,

let's make a calculator. Let's do 'var first = prompt()'

"enter first number"

And then I 'Enter' pressed 'Shift' here, so that I can add a new line. So 'Shift', 'Enter' and I'm going to say

'var second = prompt()'

"enter second number"

Now if I press 'Enter', I'll get 'enter first number'. I'll say '5', press OK, then 'enter second number' and I

say '10' and press OK.

OK.

But now I got 'undefined'.

But here's the cool thing.

Now I have these values held in these variables, so I can use them. If I check 'first',

I have "5"; if I check 'second',

I have "10".

But you'll notice that I have double quotes [""] around them.

And that's because 'prompt' automatically changes it to String, it's expecting a form of text.

So there's a trick to change a String into a Number.

And all we need to do and this is just syntax we need to remember is 'Number(first)'.

And it'll give us '5'.

So all we need to do now is do 'Number(first) + Number(second)'. And we'll get the sum of these 2.

But again we can use a variable here.

I don't want to keep typing this.

So what if I do 'var sum = Number(first) + Number(second);'

Press 'Enter'. Nothing yet, because it's in the 'sum' now.

So if I asked for 'sum, I get '15'.

OK.

So let's write our first program here.

I'm going to show you one other cool trick and that is 'alert'.

So instead of 'prompt' we're going to use 'alert'. And 'alert()'.

What it does is - it says "hi there!"

If I press 'Enter', I get a pop-up, but without anything to enter, just an 'OK' button.

So using this we can create a calculator.

So let's do this.

And in Chrome if you actually press the '↑' you'll remember your history and you can pull up whatever

you've typed in.

So you remember here we have 'first', 'second'.

So those are the two 'prompt'-s and then I'm going to say 'var sum = Number(first) +'

'Number(second);'

And finally again I do 'Shift', 'Enter', so that the code doesn't get executed.

And I do 'alert(sum);'.

Just looking at this, what do you think is going to happen?

I first asked for a 'prompt' and I stored that value in 'first'; the second 'prompt' asked for a 'second' number.

Stores it in the 'second'.

The 'sum' calculates the two numbers and then I 'alert' the 'sum'.

I'm going to press 'Enter' and see what happens.

Enter first number. I'm going to say '15'.

OK. Next number. I'm going to say '20'.

OK.

And look at that!

I got '35' as the answer.

And again, knowing what we know about Strings and Numbers, I can now do -

again I pressed '↑' to have exactly what I wrote back,

Now I can say within the 'alert("The sum is:" + sum);'.

Let's see that. If I press 'Enter', I'll go '3 + 4'. 'The sum is:7'. Look at that! Our first program.

Variables can hold any JavaScript type. Think of them as little drawers in your desk.

So in your desk you can open up that drawer and put anything you want in there: your pens, paper, erasers,

calculators and you can close that drawer.

And whenever you need, a pen or a calculator, you can open that drawer and grab it.

And that's what variables are.

Now the one thing that I've kind of omitted and I haven't told you about is this little weird semicolon here.

Why do we need it?

I mean, we were able to do '3+4' and we didn't see a 'semicolon'. Well, in JavaScript

'semicolon' means the end of an expression.

So what does that mean?

A fragment of code that produces a value is called an 'expression'. So any value that's written really

is an 'expression'.

So if I do '3', well, that's an 'expression', it's produces a value. '3+4' is an 'expression'. In

JavasScript

the rule is - and there are some people actually that don't use semicolons anymore.

But the way it was built and the way that it's intended to work is to do '3+4' add a 'semicolon'.

Most of the time if you forget, it will still work.

There's only small cases where I'll break your program.

But just to form good habits for now, at the end of each expression, so that is anything we've done so

far, add a 'semicolon' and you'll get used to it.

OK. Let's keep going with variables, because they're very interesting. What if I do 'var a = true'?

Because remember variables can hold anything.

So variables can hold Booleans, and variables can hold Strings, and variables can hold Numbers, as we've seen.

So we're just going to hold 'var a = true'.

But now what if I -

well I can access 'a', but what if I say 'a = "Hello"?'

What do you think will happen if I press 'a' and then 'Enter'?

Well, I get "Hello", because you can reassign a value to 'a', because initially the program thought 'a' equals to 'true'.

But then we said: 'Well, "a" = "Hello" now'.

So it discarded the 'true' value and now 'a' is equal to 'Hello' and we've completely forgotten about 'true'

OK.

Another little trick.

What happens if I go like this? [var a;]

Does that work or will I get an error?

Let's see.

OK. 'undefined'.

I didn't get that red bar, no error.

OK. What if I access the 'a', let's see what happens.

Well "Hello" was assigned at the last part. Let's do a different variable. So if I do variable 'b', which

we haven't used before. And I do this. Let's see if we can access it. 'undefined'.

'b' is undefined. And you may have noticed this before, but 'undefined' is our 4th type in JavaScript. And

I know it's weird, because you're, you're asking yourself "What is 'undefined'?". And 'undefined' is just one

thing in JavaScript. As the name suggests,

this means that the variable has not been assigned.

So, think of it as you'll get 'undefined' if variable 'password' is like this.

So if a user doesn't put in a 'password', well, you'll get 'undefined' and you'll be able to say "Well 'password'

is undefined".

You need to enter a 'password' or maybe a form requires an email address.

Well, if email is 'undefined', then you can't sign them up to the form. So 'undefined' is used when nothing

is assigned to a variable.

So remember this, just like you move stuff out of the drawer in your desk and put something else

in, variables can be assigned to different things.

I can move my pen from one drawer to another, I can change things in that drawer and if there's nothing

in that drawer,

well, it's 'undefined'. OK.

That's a very-very big concept in JavaScript.

Hopefully you understand. I have a few exercises for you at the end of this video.

I know you can do it!

Good luck! And see you in the next video.

Bye-bye