Skip to main content

this is the beginners JavaScript course

you are looking for my name is Bo Carnes

and I'm with freak ok org in this full

JavaScript course you will learn

everything you need to know to get

started with JavaScript this course is

perfect for beginners or anyone that

just wants a refresher on basic

JavaScript syntax this course actually

goes along with the free code kappa or

javascript curriculum so if you want

some live coding challenges to go along

with every part of this course you can

check the link in the description to

that curriculum but this is a completely

standalone video so you don't need to go

through freako Kappa org but it could be

helpful also after this course you're

going to want to complete some or build

some JavaScript projects so I have a

link in the description to some project

tutorials but then after event you're

going to want to create some project on

your own that's how you really learn

JavaScript you have to create things

without even going through the tutorial

and just use a search engine to find the

things that you don't know or need to

learn to go along with the free code

camp curriculum I have all the es6 stuff

in the second part of this course and

that's pretty much it

let's learn some JavaScript

so how exactly do you install JavaScript

well for the most part you don't

actually all web browsers can run

JavaScript which is great cuz a lot of

devices have web browsers on them so

when you write something with JavaScript

it will run on all sorts of devices and

operating systems so you have a few

options for writing JavaScript let me

show you a few things you can do to

follow along with this course you could

download a code editor here I have

sublime text you could also use Visual

Studio code or atom or any code editor

and I've created an HTML file because

HTML files can be open in web browsers

and I have these script tags these are

HTML tags but within our script tags we

have our JavaScript so if I open up this

file in a web browser it looks like this

well I can open up my JavaScript console

and then in the console you can see it

says hello world that's right from my

JavaScript program so whenever you

console that log is gonna show in the

console here you could also just use the

code editor that's included on free code

camp org like I mentioned this course

follows along with the JavaScript

curriculum on free code camp org and

there's a built in JavaScript editor

right in here and then it shows you the

console down here another option would

be to use code pen if you go to code

pinned IO I'm gonna go to create pin and

then there's gonna be three windows HTML

CSS and JavaScript well we just care

about the JavaScript and in this course

we're not gonna be doing anything with

HTML and CSS we just need the JavaScript

and the JavaScript console so if I do

consult out log and then do hello world

then we can see right in the console

hello world

the final thing you could do would be

used scrim ba' most of the course I

actually recorded using scrim be calm so

if you want you can use grimbo calm to

follow along

once you log in just click the plus

button I do a JavaScript playground and

then confirm and it's gonna open up a

new JavaScript window now I can increase

the font size here and it already has

console dot log hello from JavaScript

you can see in the console right here

hello from JavaScript also if you hit

reload it reloads everything and you'll

see this pop up hello from JavaScript so

that's something interesting about scrim

ba' is that it has two ways of logging

in the console we have the pop-up and

then we have the console here you'll see

that in this course - the two different

ways of logging to the console

the first thing we'll talk about in

javascript is comments comments are

lines of code that JavaScript will

intentionally ignore they don't do

anything they're just used to create

notes for yourself and others about what

the code does so if you do slash slash

you can make an inline comment an inline

comment means it's at the end of a line

of code for instance I can put var

number equals 5 that's a way to declare

a variable and we'll talk more about

that later but right now we're just

talking about comments you can see that

this code is in color because the code

editor knows that that's code that's

going to run and the comment is

automatically grayed out because it's

not going to run we can also do an

inline comment or I mean a multi-line

comment if we do a slash star and I can

put this is a and then I can put

multi-line comment and I'm going to end

with a star slash so it begins with a

slash star and end with a star slash and

you can put as much text as you want in

between these and you can see this is

all grayed out because it's all a

comment and then afterwards I can put

number equals it they can put number

equals nine and you can see it will be

in color again because it's no longer

commented out

now we're going to talk about data types

and variables in computer science data

is anything that is meaningful to the

computer and javascript provides seven

different data types that you can use

within JavaScript now some of the more

obvious and most common are strings and

numbers a string is just any sort of

text a number is a number now let's go

from the top so undefined is something

that hasn't been defined you may have a

variable that you haven't set to be

anything yet null means nothing so

you've set it to be something and that

thing is nothing so you can say this is

null or nothing a boolean means true or

false we talked about string a symbol is

an immutable primitive value that is

unique now we'll talk more about those

later numbers number and an object can

store a lot of different key value pairs

again we'll talk more about those later

now Euler you are often going to set

data into a variable a variable allows

computers to store and manipulate data

in a dynamic fashion

it's basically a label to point to the

data variables almost like a box and you

can fill it with anything

you'll fill it with the data that you

want so to declare a variable one way is

to use the VAR keyword var stands for

variable and I can say my name I can set

this to anything it can be any of the

data types above but it's common to set

something to a string so I can set my

name to be Bo now later you can set to

be something else I can say my name

equals eight and you can just set other

data types later now there are actually

three ways to declare a variable in

JavaScript so var is one of them and for

awhile that was the only way but there

are other ways too there's a way called

let so I can say let our name

and then I can say equals free code camp

and then the other thing would be Const

so I could do a say you can't speak

wills and 3.14 now the difference

between varlet and Const VAR is going to

be able to be used throughout your whole

program let will only be used within the

scope of where you declare that now

we're going to be talking about letting

Const more later so I'm just giving you

a brief overview of what they are now

Const is a variable that should never

change it can never change so like right

up here I declared my name but then we

changed it here so it started out to be

Bo and we change it to 8a Const you can

never change it if you do try to change

it you'll get an error okay that's all

for now but like I said we'll be talking

more about the different types of

variables later

there's a difference between declaring

variables and assigning variables here's

how you assign the variable var a and

then the semicolon I didn't mention this

earlier but you end all lines in

JavaScript with a semicolon well it's

not actually required you can actually

just skip the semicolons completely but

most people recommend that you put a

semicolon just so it's obvious where the

end of the line is so here we are just

declaring a variable to be called a and

then here we are assigning a variable

we're declaring an assigning in one line

so we're declaring it VAR b and then the

equal sign is the assignment operator it

means that 2 is being assigned to B

we're not checking if B equals 2 though

we're just assigning 2 to B so after

that we can actually assign other things

so I can say a equals 7 so now I've just

assigned 7th a I didn't have to declare

a because it was already declared and I

can also say that B equals a so I've now

assigned the contents of A to B and put

the semicolon there one thing I want to

tell you about is console dot log

console dot log allows you to see things

in the console so I'm going to console

that log a and if I load this here you

can see down here in the console it

shows seven so right now we've assigned

A to B seven or and so we when we

console that log a it shows seven down

there if we put another console that log

right here this will allow us to show

what a was up here and then down there

so console dot log now if I run that we

can now see at first it was null and

then now at seven so here oh it's not as

seven down here so you can check what

variables are at various points in your

program

now I'll show you another example of

initializing a variable to an initial

value at the same time it's declared so

I'm going to say var a equals 9 so the

VAR a is the clearing it and the equals

9 is initializing it with that the

assignment operator which is the equal

sign

before we do anything to these variables

they are uninitialized that means their

value is undefined we have not set them

to anything but it's simple to fix that

I'll just set this to 5 I'll set B to 10

and then we can set C to a string it's

going to be I am a string and you always

have to put in quotation marks like that

so you can see a a plus 1 is going to

equal 6 5 plus 1 equals 6 B equals B

plus 5 that's gonna be 15 and then C is

now gonna say I am a string

variable names and function names in

JavaScript are case-sensitive

that means the capitalization matters so

this declaration here is not the same as

this assignment even though the letters

are the same the capitalization is not

the same so it's not going to assign

correctly and in here you'll see there's

an error if we try to run it because

this has not been defined it has not

been declared it's generally common

practice to use camel case so let me

show you how we do that instead of

Studley cap var it's gonna be stud

League cap var so the first letter is

always gonna be lowercase and anytime

you have a new word or new section of a

word you just capitalize the first

letter and so we can change this this

one's correct so now just go down here

studly cap var and then we just do

proper camel case and then title case

over so now all these should be defined

so we declare them up here we assign

them right here and then this is not

going to give us any errors it's going

to behave exactly how we want it to

behave

adding two numbers in JavaScript is

pretty straightforward

you just use the plus operator so this

says 10 plus 0 which equals 10 we can

also do 10 plus 10 which is going to

equal 20 if we do a console log and I

can put some here and then you'll be

able to see that the answer is 20 right

in the console 10 plus 10 is 20

and subtraction is also what you would

expect we have the subtraction sign here

this says 45 minus zero we can also do

45 minus 33 and then that would equal 12

so the difference variable equals 12 now

multiplication in JavaScript uses this

asterisk or a star symbol here

so this says 8 times 0 which is 0 or we

can change it to 8 times 10 which is 80

so now the product variable equals 80

you can divide in JavaScript with this

slash symbol so this says 66 divided by

zero we can change this to 33

so now 66 divided by 33 is two quotient

equals two

to increment a number means to add one

to it so here we're incrementing my var

by one so it starts at 87 87 plus one is

88 there is a quicker way to increment a

number instead of doing this we can just

do my bar plus plus I have our plus plus

now we have incremented my var from 87

to 88

we learned about incrementing a number

with plus plus you can also decrement a

number with minus - that means

subtracting one so right now my var is

going to equal ten eleven minus one

equals ten we can do the same thing with

the minus minus operator so now my var

still equals ten

we can also create decimal numbers with

JavaScript these are sometimes referred

to as floating-point numbers or floats

you can see this is one here five point

seven it can be anything I'm going to

make one called my decimal and then I'm

going to the store as zero point zero

zero nine anything that has a decimal

point in it is a decimal point number

multiplying decimal point or

floating-point numbers is the same as

multiplying integers so we have two

point zero times zero point zero if I

just change this to two point five now

the answer to the product is gonna be

five and I can console dot log that so

you can see if I just put product and if

we do the browser here you'll see that

the answer is five

you can also divide decimal point

numbers so in this case I'm going to

change this to four point four so now

the answer to quotient is two point two

quotient equals two point two

the remainder operator looks like a %

and it gives the remainder of the

division of two numbers so for instance

vana find out the remainder of 11

divided by 3 I can do remainder equals

11 and then I'm gonna put the % which is

the remainder operator 3 + 11 divided by

3 is 9 11 minus 9 is 2 so the remainder

is going to be 2 11 remainder 3 is 2 the

remainder operator is often used to

determine if a number is even or odd if

you can divide a number by 2 and the

remainder is 0 that means the number is

even

it's common to want to add a number to a

variable like this the a equals a plus

12 well ace are three plus 12 is 15 so

just adding 12 to whatever a is here

we're adding 9 to whatever it B is he

were adding 7 to whatever C is this is

such a common pattern that there's a

shortcut to do the same thing it's the

plus equals operator so instead of a

equals a plus 12 we can do a plus equals

12 so this equals the same thing so

instead of B equals 9 plus B we can do B

plus equals 9 so now we're adding the

value to the variable and assigning the

answer to that variable so again here we

can do plus equal 7 so that's just a

shortcut

previously we learned about plus equals

well minus equals does the same thing

but subtracting so this says a equals a

minus 6 we started at 11 minus 6 is

going to be 5 so the new a is gonna be 5

but we can shorten that instead of a

equals a minus 6 we can do - equals this

is just a shortcut that JavaScript has

that means the same thing

that means a equals a minus 6 but it's

just shortened same here so we can do

minus equals 15 C equals C minus 1 we

can do C minus equals 1 so it just

subtracts the number from the original

value and then assigns that new value to

the variable

here we have a equals a times five well

we can do the same thing as before we

can shorten this to a x equals five so

that means the same thing here we can do

a x equals three and then C equals C

times ten we can shorten this to C times

equal 10 and that's another shortcut for

JavaScript

and there's also divide equal so a

equals a divided by 12 we can do a

divided by equal 12 and here we can just

do divided by equal 4 or divided by

equal 11 so another way of just dividing

the variable by a new number and

assigning that answer to the variable

we've already mentioned strings a little

bit but anytime you have some character

surrounded by quotation marks they can

either be single quotation marks double

quotation marks or backticks it's a

string these are called string literals

and you can create them just like you

see above I'm going to do a few more so

far my first aim equals bow and VAR my

last name equals Karns so that's how you

create a string in JavaScript

sometimes your strain contains the quote

symbol now normally the quotes identify

the beginning and the ending of the

string but what if you have something

like this I am a double quoted spring

inside double quotes so I'm actually

trying to use these quotes right inside

the string but the JavaScript doesn't

know what to do about it

it thinks that this is that it thinks

that this is the whole string when it

sees the first quote inside the string

it thinks R at the end of the string so

there's something called an escape

character so if you want to escape a

quote that means it will no longer be

considered the end of the string I'm

going to put a backslash so if I put a

backslash before each of these quotation

marks JavaScript no longer interprets it

as being the last character in the

string so now you can see this is a full

string and then if I log this out

console dot log and I put my string

you'll see that it's not going to show

the quotation marks so I mean it's not

going to show the slash the back slashes

it shows the quotation marks without the

back slashes because when we put

backslash quotation mark javascript

knows that this should just mean a

quotation mark

we talked about escaping a quote

character like this where you put a

backslash before the quote character so

javascript knows that this is supposed

to be a literal quote character inside

the string however you're not going to

have to escape quote characters very

often because there are other methods of

accomplishing the same thing of having a

quote character within a string so a

common way is to use instead of having

your strings start with double quotes

have it start with a single quote so a

string can either be surrounded by

single quotes or double quotes so this

time we're just going to have single

quotes and now I can remove all these

escape characters from inside the string

here okay so now you can see that

JavaScript still knows it knows that

this is a string even though it has

these double quotes inside an additional

thing you could do is use backticks so

if I put a back ticks before at the

beginning of the end of the string

now I actually can use single quotes and

double quotes both within the string but

right now I'm just gonna focus on

showing you the double quotes or the

single quotes with the double quotes

inside

we talked about escaping a double quote

character by using the backslash before

the double quote there's actually quite

a few other things you can escape out

you can escape out a single quote

character you can escape out a backslash

in fact anytime you're gonna use a

backslash you're gonna have to put two

backslashes so the JavaScript knows that

you're not trying to escape a character

you can also add a new line character or

a carriage return a tab a backspace or a

form feed all with doing a slash in the

corresponding letter here so let me show

you an example I'm going to put a var my

string equals and we're gonna make a

multi-line string so we're gonna have

the first line and now I'm going to put

backslash in to add a a second line and

then I'm going to put a tab so backslash

T for the tab and backslash backslash to

add a backslash now it's going to say

second line now I'll do backslash and

then I'll just say third line and if I

were able to log out all that you would

see three different lines and you would

see the tab and then the backslash

character

you can concatenate strings with the

plus operator you can see here that we

have two strings I come first and I come

second they've been added together or

concatenated with this so the are STR

our string is now one long string that

says I come first I come second I'll

give you another example here so we can

say my string equals this is the start

and then I'm going to put a space before

the in quotation mark because when these

get concatenated together we want there

to be a space between these two

sentences and I'll say this is the end

now let's just see what that looks like

I'll do a consult out log and do a my

string and let's see if I run this we

can see this is the start this is the

end just one long string

you could also concatenate strings using

the plus equal operator you can see here

in this example we have the AR string

equals I come first and then we have the

AR string plus equals I comes second

so remember just like in when you're

using numbers plus equals means that you

take whatever is on the end here and add

it to the variable so we've just added I

come second on to the end of I come

first let's do another example down here

my string equals this is the first

sentence and then I'll put a space at

the end because we're gonna do my string

and I'll hear oh I'll do the plus equals

this is the second sentence now if I

just do a console that log here of my

string we should see that those

sentences have gone together this is the

first sentence this is the second

sentence good

you can concatenate strings together

with variables you can see here our name

freako camp hello our name is and then

we add this variable the our name

variable which is freako camp hello our

name is freako camp how are you well

we're gonna do the same thing down here

so I'm gonna do my name equals o and

then my string is going to equal mine

name is and then I'm going to add the

variable name which is myname and then

I'll continue the string here hopes that

supposed to be a plus here and I am well

see that I put a space here and here

because you have to make sure you put

appropriate spaces in and let's see what

that looks like I'll do a consult out

log and I'll just put my string here if

I show that my name is Bo and I am well

looks good

you can append variables to strings with

this plus equals operator you can see

with this variable and adjective which

is set to the word awesome and then we

have another variable freako camp is and

we have the our string variable plus

equal an adjective so now our string is

going to equal freako camp is awesome so

let me show you another example we're

going to say some adjective equals worth

while and now I'm going to use the plus

equal so my STR plus equals and then I

can put some adjectives so now after we

do the my string plus equals some

adjective my string is going to say

learning to code is worthwhile

sometimes you want to find the length of

a string javascript makes this easy so

we have the first name is set to a de

but we just use the dot length property

to find the length so first name dot

length remember our first name is Ana

here and then dot length will return an

integer a number that has the number of

characters in the string so that will be

three so let's try this again here's

another example

last name length equals last name we

just have to type in dot length and just

to show you let me console that log that

and you'll be able to see if I put in

last name length and if I run that

you'll see eight because there are eight

characters in the word Lovelace

bracket notation is a way to get a

character at a specific index within a

string so you can see right here we have

the first name adda and right here we

have first name and then here's the

bracken notation you can see there's

brackets with a number inside so most

modern programming languages like

JavaScript don't start counting at one

like humans do they start at zero which

is called zero-based indexing so with

the number zero that refers to the in

the first index of this string which

would be the a so the a would be zero D

is one and then a is two so this first

letter of first name if we do first name

with the bracket notation with a zero

that's gonna equal a so let me show you

another example let's say we want to get

the first letter of the last name again

I'm just gonna do the bracket notation

and put a zero here if I wanted the

second letter the oh I will put a 1 here

so if I console that log we can see what

it came up with so console that log

first letter of last name and if we look

in the console l because the first

letter of the last name is L

strings are immutable meaning they

cannot be altered once created this does

not mean that they cannot be changed

just that the individual characters of a

string literal cannot be changed so look

at this example my string and then we're

going to use bracket notation to choose

the first letter so it currently says

jello world we want the first letter to

change to an H to say hello world but if

I run that there's going to be an error

because of the immutability of strings

now we can still change this to hello

world but we can't just change an

individual letter like that so we're

gonna have to do my string equals and

I'm just gonna have to type in the whole

thing which is hello world and now it we

will change to the word hello world

you can use bracket notation to get any

character position in a string so

earlier we did the first position but

here's how you would get the second

position

remember the zero index so one is the

second position zero is the first

position we can also get the third

letter of the last name using the

brackets we'll just put two in the

brackets to get the third letter of the

last name

you can also use bracket notation to

find the last letter in a string even if

you don't know how many letters are on

the string you do it based on the length

so if you look right here in the

brackets we have a expression to be

evaluated first name dot length minus

one so the length is 3 3 minus 1 is 2

the reason why we're doing a minus 1 is

because remember we count starting at 0

so the length minus 1 is going to be the

last index of the name so we can do that

same thing here to get the last letter

of the last name I can just do last name

dot length minus 1 and that's going to

get the last letter of the last name

which is the e right here

we saw how to use bracket notation to

get the last letter of a string you can

also do the third to last letter or

fourth to last letter

so you just subtract however much you

want from the for the the length of the

string so we have the bracket notation

first name that length minus three

that's going to get the third to last

letter so we want the second-to-last

letter into this variable here we do

something similar we just do last name

dot length and then we're gonna subtract

two to get the second to last character

of the string

we are going to use our knowledge of

strings to build a mad libs style word

game in a mad lib game you are provided

sentences with some missing words like

nouns verbs adjectives and adverbs and

then you fill in the missing pieces with

words of your choice to make a sentence

that could be funny and hopefully makes

a little bit of sense so let me show you

how you do this

um this also uses a function now we

haven't talked about functions yet I'm

gonna explain those more later but

format for now just go with it because

that's not the point of this lesson for

now but this function called word blanks

you can call the function and you have

to pass in certain types of words you

pass in a noun an adjective a verb and

an adverb so down here you can see that

we're calling the function called word

blanks that's the function name here and

we're passing on a noun an adjective a

verb and an adverb so the point is that

we are going to use all these words that

are passed in to make a sentence so we

know that var result equals an empty

string at first and then we have to use

all these words and result and then the

result is going to be returned from this

function and eventually we'll be logged

out onto the screen with this console

dot log so what I'm gonna do here is do

result plus M equals we're gonna use the

plus equals to add something to this

result using all the noun the adjective

the verb and the adverb so let's see

it's gonna say the and we'll use the

adjective I adjective this case will be

the big a big and then let's put the

noun my noun because adjectives are

words that describe nouns a big

and then we're gonna say what this now

is doing the verb my verb the big dog

ran and then what where does he run to

to the store and then we're going to add

oh we need a space here so there's a

space between this to the store and then

we're going to add the final adverb so

now we have to add a period and there's

one more thing we have to add or a few

more things so right now it's my

adjective my noun my verb and there's no

spaces in between those so if I run that

you can see what that's gonna look like

in the console it just said big Don big

dog ran with no spaces so we're gonna

have to add some spaces in here also

let's do that now it's going to take in

the noun adjective verb an adverb and

then put it into that sentence so one

cool thing is we can actually pass in

some different words so like friends

let's if I copy this I'm going to paste

it instead of dog I will put for the

noun bike and an adjective

I'll put slow and then for the verb I'll

put flew and the adverb I'll put slowly

and now if we look in the console we

have to work two sentences the big dog

ran to the store quickly the slow bike

flew to the store slowly

arrays allow you to store several pieces

of data in one place so look at this

example our array now arrays always

start with a bracket and then end with a

bracket to show the beginning and ending

of the array and every element in the

array is separated by a comma

so you can see here we the first element

is a string the second element is a

number and you can have more and more

elements you just put comma and you can

keep adding elements and the elements

can be any data type you can see here we

have a string and a number but you can

always also use arrays or floating

numbers or really any sort of other data

type in your array so let's see another

example so let's do my array Quincy and

then for a number we'll do one because

Quincy is number one

when one of the elements in an array is

another array that's called a nested

array or a multi-dimensional array you

can see here's the beginning of the

array and here's end of the array but

the first element in this array is

another array with two elements of its

own same with here the second element is

an array so this is two arrays within

another array so we can do that here

here's another example

so let's our first element in the array

will be an array with a string and a

number and then I'll put a comma that

put the second element of the array

which will be another array with a

string and a number

earlier we learned how to use bracket

notation to find a specific index in a

string you can do the same thing with

arrays so look at this array our array

we have three elements 50 60 70 and

these have the indexes 0 1 2 so with

this our array with the bracket notation

in the 0 that's going to be index 1

which is going to equal 50 so we can do

the same thing here my array equals 50

60 70 so let's try to find the first

element that array so var are my data

equals my array and then I'm going to do

index 0 I could do index 1 index 2 and

then if we console dot log that we can

see for sure what that is so if I put my

data and we can see in the console it's

50

you can use array indexes to modify

arrays now we try to do this earlier

with strings using bracket notation and

we were not able to modify a string

using bracket notation but with arrays

you can so the original array is 1864 99

and then we're gonna use the array index

of 1 now 1 is going to be the second

number or 0 1 2 and this number 64 is

going to be set to 45 so the new array

is gonna be 1845 99 let's try it again

with this 1864 99 so let's do my array

and then instead of doing the first the

second digit I'm gonna do the first

digit and the array the first index

which would be index 0 and I will say

equals 45 so now this array has been

updated so if I do console that log and

then through my array will see that the

array is now 45 64 99

you can also use bracket notation to

select an element in a multi-dimensional

or array of arrays so you can see this

array here we have our outer array but

inside that array are more arrays the

elements of the array or other arrays

and the last element of the array

actually has an array in this so this is

a three-layer deep array right here so

to access an array of arrays or an

element within an array that's within an

array you use a double bracket notation

so if you see this example here my array

the first bracket is 0 that's gonna get

the first element in the array which

would be right here and then that

element is an array so the second

bracket would be the index of the array

within the array so this 0 will point to

here so let's try to figure out how we

can select a value equal to 8 well let's

see I see an eight right here so let's

figure out what this first number should

be well let's count 0 1 2 so the third

array would be index 2 now when you want

to go 0 1 now if you index 1 to get the

second number in the third array so

let's test to see if that equals 8 so

I'll do a consult out log and then do my

data here and we'll see if that equals 8

that does we did it

you can append data to the end of an

array with the push function so see an

array has been set up here our array

Stimpson J cat and then we take our

array right here and use the push

function to push into the next Elm in

the array another array here so now it's

going to look like this we can see at

the end of the original array we've

pushed this other array at the end so

let's try it again down here we have my

array and you can see what we have

each Elm in the array is another array

so I am going to do my array dot push

and then I can push something on the end

here which will be like above another

array so this is gonna say dog I'm a 3

and now we've pushed this on to the

array

we can remove an item from an array with

the pop function here so see this pop

here and then we know it's a function

because of the parentheses at the end of

the word pop so the array starts with

one two three so now we do this our

array dot pop and it's going to return

the it's going to remove the last

element which is the three and then it's

gonna put it right into this variable

here so now as you can see down here

remove from our array now equals three

and then our array is gonna equal one

two because the three has been popped

off so we can do the same thing here so

remove from my array equals and I'm

going to do my array dot pop and we can

see what the array is gonna equal now if

I just do console dot log I array and if

you do this we can see that the array

only has the one item the one array

instead of the two arrays

the shift function is very similar to

the pop function except it removes the

first element of the array instead of

the final element so we see the shift

function on the end of the array here

and the array is the same as before but

now the first element Stimpson is being

removed as we shift off the first

element the array is going to equal J

cat and the removed from our array is

gonna equal Stimpson so let's do another

example down here we're gonna do a shift

again so I'm gonna do equals my array

shift and now my array is just going to

equal dog 3 and the remove from my array

is going to equal John 23

the unshifted is similar to the push

array function while push adds an

element to the end of the array on shift

adds an element to the beginning of the

array so let's look through this example

code we have the array Stimpson J cat

we're going to shift off the first

element remove the first element so our

array is J cat now we're gonna unshifted

an element at the beginning which is the

string happy so the array will now be

happy

J can't so let's try again this time the

array is john xxiii dog 3 because of the

shift we've shifted off the John 23 and

now I'm going to unshifted on shift now

we're going to add something to the

beginning of the array we'll do Paul

35 so now the array is this going to be

Paul 35 dog 3

let me give you another example of

nested arrays this will be a shopping

list so inside this array we're going to

have another array and we're gonna have

items cereal how many boxes three boxes

we also need some milk let's get two

cartons of milk let's get some bananas

three bunches of three bananas we'll

also get some juice two containers of

juice and finally we will get some eggs

we'll get 12 eggs and now we've created

an array of arrays which is our shopping

list

functions allow us to create reusable

code in JavaScript this is how a

function is set up we have the word

function then we have the function name

there's always parentheses here and you

can pass information into the

parentheses we'll talk about that later

and then we have these curly brackets so

that this is the opening curly bracket

and then we have the closing curly

bracket and everything inside the curly

bracket is run anytime the function is

called or invoked so here the function

is being called by just putting the

function name with parentheses after the

name so every time this function is

called just like this the console is

gonna say hey a world so if we load the

console right now you can see it says

hey a world and if I just copy this and

paste a few times we'll see that it's

going to say hey world hey world hey

world in the console since we have run

the function three times we see the

words hey a world three times so now I'm

going to create my own function that's

going to be very similar

so the function be usable function and

this time it's gonna say something

slightly different it's going to say hi

world

it's the heya world and now I can call

the function down here just like this

reusable function oh forgot to put the

parenthesis that's important

nice hey world and hi world in the

console

parameters are variables that act as

placeholders for the values that are to

be input to a function when it is called

so we have defined a function right here

called our function with arms and inside

the parenthesis we see the letters A and

B now these can be any name that we

could call these anything not just a and

B they could really be any words up here

and that means that when this function

is called we're going to pass data into

the function or input data into the

function so you can see the example here

where we're calling the function and

instead of saying a and B in the

parenthesis we're actually passing the

values 10 and 5 so when the function

runs it can use the information that's

passed into the function so in this case

it says console dot log a minus B well

that's going to be 10 minus 5 because

the numbers 10 and 5 have been passed

into the function and that's going to

output 5 so I'm going to create a

function that's very similar to that

function this one is going to be called

function with Arg

and it's also going to accept an A and B

but we could call that anything we want

and inside instead of subtracting a

minus B we're going to do a plus B now

I'm just going to call this function

function with our and I'll pass in 10

and 5 and let's see what that looks like

in the console so first it output 5 for

this one then an output a 10 for this

one

scope refers to the visibility of

variables variables which are defined

outside of a function block have global

scope global scope means they can be

seen everywhere in your JavaScript code

for instance I'm going to declare a

variable right here called my global

I'll set it to 10 now since this is set

outside of a function we can see it

anywhere in the whole code even in this

function right here called fun too we

can see that we reference it here and

here and what we're gonna be able to see

it now this is an if statement which we

will talk more about later but we're

checking if the type of my global does

not equal undefined so it will not equal

undefined if it has been defined and the

program knows about the variable since

this is global scope it does not equal

undefined equals 10 the program knows

about the variable because this is in

global scope so since this function can

access the my global variable will run

what's in this if statement where we

just add to this output variable my

global and then we put with the value of

my global which is 10 now here's another

example where we're gonna see if if the

type of oops global equals undefined

well we're gonna set that here so it is

possible to set a variable without using

the VAR keyword so I'm gonna set this to

loop global equals 5 so you can see here

that there is no var keyword so normally

if you do use a var keyword since this

is within a function it will be scoped

to that function if we have the VAR

keyword here this will be scoped to

function so you would not be able to see

it in this function however since we

forgot to put the VAR keyword in this

example there's no VAR keyword it

becomes global automatically that means

you can access it anywhere else in the

program including here so if we put the

VAR keyword then oops global would equal

undefined and then we would never have

this line in the output however since we

did not put the VAR keyword

oops global equals 5 and this will be

added to the output

oops global and then the : 5 so when we

console dot log the output it's going to

say my global 10 oops Global 5 now

actually it's not going to say that

because this is in scrim ba' and in

scrim but it's it's more careful and

just enforces the fact that you have to

use a VAR keyword but if we were in our

browser it would not enforce the VAR

keyword and then it would actually show

my global 10 oops global 5 if this was a

little complicated don't worry about

that because a lot of these concepts

will be going over again later with

additional examples

variables which are declared within a

function as well as the function

parameters have local scope that means

they are only visible from within the

function let me show you what I mean if

I declare a variable right here my var

equals five so we've declared this

variable inside a function so this

variable my var is only visible inside

the function so it says console that

logged my var it should console that log

to five so we're gonna call the function

here and it's gonna console dialogue my

var but then the program is gonna run

this console dot log that's outside of

the function it's still going to try to

access my var and so let's see what

happens you can see in the console that

first there's a five because it console

dot log within the function then there's

an error because it tried to access my

var outside of the function so really we

just need to delete this where we try to

access the variable outside the function

and now there is no error

it is possible to have both local and

global variables with the same name when

you do this the local variable takes

precedence over the global variable let

me show you an example here we have a

function called my outfit that's going

to return outerwear that's this variable

up here this is a global variable

because it is declared outside of the

function so when we console that log the

output of the my outfit function or the

my outfit function is going to return

outerwear which is the war t-shirt so

let's check the console and you can see

yep

t-shirt is there however let's change

this up a bit so we have some space here

because I'm going to put var outerwear

equals sweater so now if I run this

program you can see in the console it's

going to say sweater instead of t-shirt

it's because this local variable

outerwear took precedence over the

global variable another thing

interesting thing about this if I do

console.log and I console that log that

outerwear variable we'll see that it's

still t-shirt so first you see in the

console says sweater and t-shirt so

first we console dot log this function

which is sweater

it returns sweater and then we console

that log the global variable which is

t-shirt

you can return a value from a function

with this return statement so we have

this function here and we are passing a

number into it the num and then it's

going to return whatever's after the

return keyword in this case num minus 7

so here we're going to consult out log

the function and it returns the result

of minus 7 is this 10 minus 7 which is 3

so it's going to cancel that log the

number 3 if we look in the console yep

it

console.log the number 3 because the

function returns 3 let's try creating

another one this function is going to be

called times 5 again we'll pass in a

number and it's just going to return

something it's going to return the num

times 5 and then just like before we can

test it using a console dot log times 5

and we'll pass in the number 5 here and

if I run this we'll see that it returns

number 25

functions can have return statements but

they don't have to in this case this

function adds three to the sum variable

which is a global variable because it's

defined before the function it does not

return anything so if you don't specify

a return value the return value is just

undefined now I'm going to create

another function that is similar this

one is going to copy called add five and

this time we'll just do some equals sum

plus five or we can shorten this to use

the plus equals two now that's going to

add 5 to sum also but it's not going to

return anything so if we log this out it

would be undefined

it's simple to assign a returned value

to a variable see right here we have the

function change and you pass the number

and it's going to return the result of

this mathematical expression so when we

call the function change and pass in the

10 the value that is returned from this

function is won't be stored in this

variable here we can do the same thing

down here first we initialize the

variable processed and process arrgh

it's going to return the result of this

mathematical expression so I can set

processed to equal what this function

returns so I can say processed argh and

then I'll just pass in the number 7 here

and now process

equals the result of this mathematical

expression

in computer science a queue is an

abstract data structure where items are

kept in order new items can be added to

the back of the queue and old items are

taken off from the front of the queue

we're going to simulate that right now

some of the functionality of a queue

using this next inline function so the

purpose of this is to show that in this

next inline function you can add an item

to the array that's passed in and then

it's going to return the first item on

the list for instance if we have this

array right here if we add them at an

item to this array it should come after

at the end so it should come after five

and then it should return the first item

on the list in this case it's one so you

see we have some console dot log set up

so it should show what the list looks

like the array looks like beforehand and

then show what it looks like afterwards

this JSON dot stringify is just a way to

change an array into a string that can

easily be printed out to the screen so

to do this we're just going to have to

do two things that we've learned about

already so the first thing is to add the

item onto the list so we see right here

next in line passed in the test array

and six so we're calling this function

next on line we're passing in this test

in this test

array here and the number six we want

the number six to be added to the end of

the array so we'll just do our push and

then I'll put in num just like that

well actually it's item so what we did

we took this array that was passed down

here which is in this case test array

and we pushed the item that was passed

in and in this case here it's im6 now we

want to return the first item on the

list we want to remove

and return this item so that when we

council that log here it should show the

number one so instead of returning item

I'm gonna return our shift

that's what shift does shift removes the

first item and returns that first item

so let's check this out okay you can see

before one two three four five then

we've popped off the one and after it's

two three four five six we did it

boolean czar another data type in

JavaScript there are only two values

true or false they're basically little

on-off switches where true is on and

false is off

they don't use quotation marks around

the the boolean C it just says return

false so this is a function here it

should be indented where it's just going

to return false when you call this

function it could also be true so we

could return true you can use true and

false in more places than just function

returns and we'll be talking more about

that later

an if statement is used to make

decisions in code the keyword if tells

JavaScript to execute the code in the

curly braces under certain conditions

defined in the parentheses so here is a

full if statement right here and there's

always parentheses after the keyword if

and here is the condition so if the

stuff inside this print inside these

parentheses evaluates to true then the

code within these curly braces will be

evaluated or run so in this case it's a

variable so if the is it true variable

is true it will return yes it's true now

if it's is not true then we'll get to

the second return statement no it's

false so this whole function here takes

in a variable and we check if that's

true or not so I'm gonna make another

example just like this we have another

function that hasn't been filled out yet

true or false and there's a variable S

pass in was that true so we'll say if

and then the parentheses was that true

but that's true we're going to return

something it will be a string just like

before and the string is yes that was

true if it's not true then we'll get

this second return statement in the

function and we'll return a different

string will return no that was false

false

let me just add some semicolons and then

I can run this and we'll see what

happens

Oh returnees we spelled correctly so let

me spell return correctly so before I

run this I'm going to edit console dot

log here so we can console to log the

answer so this is the function call here

true or false we're passing in true and

then we're going to log what

returned here yes that was true since we

passed and true this if same evaluates a

true and this code is run right here

there are many comparison operators in

JavaScript that will return a boolean of

true or false the most common is the

Equality operator and it's often used in

an if statement so here it just says if

Val so we have this whole if statement

right here if Val we're gonna see if if

Val equals 12 now to check if it equals

12 we're gonna have to use the double

equal sign that is the Equality operator

and we'll say if Val equals 12 the

reason why we can't just use a single

equal sign is that a single equal sign

is the assignment operator if we just

had a single equal sign that would mean

that we were setting the value of the

Val variable to equal 12 we're not

trying to set this to equal 12

we're trying to check if the value of

this variable equals 12 so we have to

use the double equal sign so now this

test equal function is going to test to

see if the number we pass in is equal to

12 I can do a console that law here

console dot log and then we can see what

appears in the console here not equal

because 10 does not equal 12

we learned about the Equality operator

which is the double equal sign there's

also the strict equality operator the

triple equal sign so here we're checking

if 3 equals 3 with the strict equality

operator so the difference is that the

Equality operator the double equal sign

attempts to convert both values being

compared to a common type while the

strict equality operator does not do the

type conversion so this is going to

evaluate to true the 3 equals equals

equals 3 but the 3 equals equals equals

3 with the string on this side is going

to evaluate to false both of these would

be true if we were using the double

equal sign because the string would be

converted to a number and they would be

equal to true but with the triple equal

sign it does not get converted to a

number so it would be evaluate to false

the second one with the 3 equal signs so

here we're just going to use it right in

this if statement and who equals equals

equals 7 so now we can pass in the

number 7 and it's going to evaluate to

true but if we pass in a string 7 it

will evaluate to false

we will do one more review with the

Equality operator and the strict

equality operator so if I run this here

we'll see in the the console says equal

because it's checking if the number 10

and the string 10 are equal so if a

equals B the number 10 equals a strict

number 10 returned equal since we're

using the Equality operator with with

two equal signs it performs a type

conversion and it converts the string

into a number but if we use the strict

equality operator with three equal signs

I'll run that again and you'll see not

equal in the console because now it's

not converting the types and it's just

checking if a number is equal to a

string which is not so we get not equal

now I will show you the inequality

operator which is basically the opposite

of the Equality operator so I'm gonna do

the inequality operator with an

exclamation point in an equal sign in

this case I'm going to see if the value

is not equal to 99 and again just like

the Equality operator this does type

conversion so let's just run this

program and we'll see it is not equal

because 10 we pass them 10 into the

function here and 10 is not equal to 99

so we get not equal

the strict inequality operator is

basically the opposite of the strict

equality operator and works like this so

it says if Val I'm going to do if Val

does not equal 17 so this is the strict

inequality operator instead of one equal

sign we have two equal signs and that

means it's going to check if this is not

true but it's not going to convert types

so for instance if we are checking if

the number three does not equal the

string three that would be true so in

this example we're just checking if ten

does not equal 17 if we run this we will

see it's not equal

we can also use the greater than

operator so in this function we're

checking if a value is over 100 so I'm

going to put greater than 100 and then

here we're checking if a value is over

10 so I'll put greater than 10 so here

we call the function we pass in 10 and

if I run that function you'll see 10 or

under because we're not over 100 we're

not over 10 or 10 or under because we

passed in 10

we can also use the greater than or

equal to operator so we'll finish this

function by using greater than or equal

to that's just a greater than sign in an

equal sign and we'll put 20 down here

just greater than or equal to 10 if I

run that we should see 10 or over

because we're passing in 10 and it's

greater than or equal to 10

now I'll show you an example of the less

than operator with this function we're

going to check if the value is less than

25 and then here we're checking if a

value is less than 55 so here's a trick

I use to remember which symbol is less

than 1 which symbol is more than if you

see the less than symbol looks kind of

like the letter L which is the first

letter in less than and then the more

than symbol is just the opposite

and we also have the less than or equal

to operator we can use in JavaScript so

here we're going to check if it's less

than or equal to 12 so we just put the

less than operator 12 Oh evil less than

or equal that's an important part here

it's the less than or equal to 24 to

make this statement true and if we run

we see smaller than or equal to 12

number 10 we passed in

sometimes you want to check if two

things are true at the same time for

instance you may want to check if this

value is less than or equal to 50 and

you also want to check if the value is

more than or equal to 25 so we here we

have a nested if statement so it's going

to check if it's less than equal to 50

and if it's more than equal to 25 then

it's going to return yes but there's an

easier way to do this so what I'm going

to do is copy this where it says value

is more than or equal to 25 I'm going to

delete this nested if statement so we

don't need that if statement and I'm

going to use the and operator so we have

less than or equal to 50 and if I put

two ampersands like this that means and

now I'm going to put value is more than

or equal to 25 so this says if value is

less than or equal to 50 and the value

is also more than or equal to 25 then

we're going to return yes so both this

statement and this statement have to be

true to get into inside this if

statement here

in this code here we're checking if the

value is not between 10 and 20 so if the

value is less than 10 we return outside

and if the value is more than 20 we

return outside there is an easier way to

do this with the logical or operator so

I'm just going to delete this whole if

statement here and then I can add an or

statement which is just 2 pipes so I'm

going to put Val is less than or it more

than 20 here so now we're checking if

the value is less than 10 or if the

value is more than 20 either way we're

going to return outside and if that's

not true we'll return inside

when an if steam is true normally the

block of code right after the if

statement will be evaluated and if it's

not true nothing happens but with an

else statement an alternate block of

code can be executed when it's not true

so this is a perfect use case if value

is more than five the result is bigger

than five if there is if the value is

less than or equal to five the result is

five or smaller we can do this with an

else statement so I'm just going to type

in else here and then we can just delete

this whole if statement just like that

and now we have if the value is less

than five the results will be bigger

than five else if it's which is if it's

not more than five we'll return five or

smaller

if you have multiple conditions that

need to be addressed you can use else if

statements it's a way of chaining if

statements together in this example we

have three conditions if value is more

than 10 we're gonna return greater than

10 if it's less than 5 returns smaller

than 5 or else we're gonna return 5 and

up so this is a perfect use case for an

else if statement so this is how we do

it well do else and then just we're

going to add the if statement at the end

of the else I'm just gonna delete all

this stuff so else if value is less than

5 and then we're gonna have one final

else statement else and I'm going to put

this statement here this final return

just gonna cut that and then paste it

right in there so now we've instead of

using multiple if statements we have the

if and only the else if and then we have

the else

when you're using else if statements

order is very important let's look at

this example here in this function first

we check if the value is less than 10

and return less than 10 then else if we

check if the value is less than 5 and

return less than 5 well if we look at

this example when we pass in the number

7 if I run this you'll see it's going to

say less than 10 which is what we want

however if we put 3 it's still just

gonna say less than 10 really we want

this to say less than 5 because it is

actually less than 5

however the this is in the wrong order

so what we need to do is change the

order so this should be 5 this should be

5 and this should be 10 and this should

be 10 so once the first condition is met

it doesn't even check for the rest of

the conditions so that's why it's

important to think about the order so if

we run this now yep less than 5 that's

what we want

you can also chain if and else if

statements so I'm going to complete the

following challenge here right chained

if / else if statements to fulfill the

following conditions so we have these

conditions where if the number is less

than five we're gonna return tiny if

it's less than ten returns small and so

on so what I'm gonna do is actually just

copy this right here because this is

written as part of it's written exactly

how we want to be written I'll just

paste it here and I'm going to just add

the if and else statement so it's gonna

be if and then we put this in

parentheses because the condition is

always in parentheses if number is less

than five then we're going to use the

curly braces and we're going to return

tiny so I'll just move that up here I'll

cut it and paste it now we're going to

use an else if statement and I got the

curly braces

first of all also I need to put the

condition in these parentheses I'm just

going to cut this number is less than

ten put right here and we're gonna

return this small so I'll put that in

the curly braces here and then we have

another else if statement else if and

the condition just like before number is

less than fifteen but that in there we

get we always need the curly braces to

show what's going to happen in the if

statement so I'm just cutting and

pasting the text again we have an else

if and then we have this year and we

have return large another actually the

final thing is just going to be else we

don't even need an else if at the

statement at the end we're not we don't

even need to put the condition because

if it's more than equal to twenty that's

going to be everything else so I'm just

going to cut this we don't need any of

this stuff here and we're just going to

return

and large so with this one test here for

test seven we can actually cancel that

log that console dot log and see what

returns for seven we can try a few

different things

ooh we have an ear here oh forget to it

but this parenthesis wrong way let's try

that again

small but if this is 20 it should be

huge and if it's 19 which would be less

than 20 we should see you large yep that

worth

in the game of golf each hole has a par

which means the average number of

strokes you're supposed to use to get

the ball into the hole so depending on

how far above or below par your strokes

are there's a different nickname so here

are some of the nicknames hole-in-one

Eagle birdie par and we're gonna write a

function where you pass in the par and

you also pass on the stroke so you can

see up here par and strokes and it's

going to return the nickname so that's

what we're going to write you can see

this table here shows what we have to do

if the strokes are 1 then you get a

hole-in-one

if the stroke is less than or equal to

par minus 2 you get an eagle and so on

and we also have this array that's gonna

make it easier because we can you just

use things from this array instead of

typing out the words so we're going to

start with an if statement if and then

we have to put the condition if strokes

equals equals that's the Equality

operator we don't want to use a single

equal sign because that would be the

assignment operator if it equals 1 then

we can return and we can see down here

we're gonna return hole-in-one but we

can just use it from this names array so

it's going to be named and this is the

meet index 0 of the array so we'll do

names and then 0 and then we can do an

else if else if and then we can put the

condition strokes expel strokes right

spokes and then we can just actually

copy this right from here less than or

equal to power minus 2 and then we are

going to return name and this will be

the index 1 which is an eagle at this

point I can do some copying and pasting

I'm going to copy this whole thing's a

lot of this rest of this will be else if

so else if strokes is this time is going

to be equal

to par - one and we're going to return

this many birdie which is array index -

and I'm going to continue just like this

so this time it's if strokes equal par

we're going to return name index 3 C 0 1

2 3 is going to be the word par up here

they'll just keep just like this now

it's going to be R plus 1 and we'll

change this to 4 now it's going to be

par plus 2 and we'll change this to 5

which is gonna be the double bogey

and finally if strokes is change this to

more than or equal to car plus 3 that

means you did very poorly so you should

just go home so it's going to be named

index 6 and we don't need this anymore

so now we're gonna do some tests here

I'm gonna do a console console dot log

and we're going to pass in the function

that we're calling so in this case the

par is 5 and the strokes are 4 so that

should return birdie let's see what

happens

no ok that's not what I expected it's

because this should be names spelled

this wrong and that's why sometimes

better to check before you go through

the whole thing you can test things as

you go but let's do that again

yep birdie and if I type in 2 here eagle

if I

type and eat it's probably that tell us

to go home go home yep we just completed

this challenge

instead of using chained else if

statements you can use a switch

statement a switch statement test of

value and can have many case statements

which define various possible values so

let me show you how that works here

we're going to write a switch statement

which tests Val and sets the answer to

the following conditions if we pass in

one the answer should be alpha if we

pass on to the answer should be beta and

so on so let me show you how that works

we'll just type in the word switch

that's a key word here and we're testing

the valve that's passed into this

function so it starts off kind of like

an if statement and right now so we're

gonna compare the Val to the different

cases that we have so we'll have case

and the first number is going to be one

so here we're saying if the case of Val

is 1 if Val equals 1 and it's using the

strict equality operator so it's like

that equals equals equals it's going to

make sure that the type of the variable

are the same so a string 1 and a number

1 will not be equal but if the case is 1

then we're going to set answer to equal

alpha we'll just use the like this alpha

and then we are going to break break

means that we're at the end of that case

statement and once you break it it just

goes to the end of the switch statement

it doesn't evaluate anything else in the

switch statement so we're also going to

have case two and one thing I forgot

that we're gonna is going to end in that

so it's easier to see the different

cases and case 2 the answer is going to

set equal to beta and then we always

need the break statement if you don't

have a break statement it will just run

through to the next case statement

automatically so if the case was one and

you did not have a break here first who

would set the and

alpha and then it would set the answer

to beta it would just skip over right to

the next case Thema but since the break

is here it's going to go out of the

switch damn it completely so it would go

start writing the code after this last

curly bracket so now we're going to case

three we'll just do some copying and

pasting here and we're gonna have four

cases I'll just do the rest of the cop

the pasting here so we'll have three and

four alpha beta and then we have gamma

and Delta and we know that the switch

statement is over because we have this

final curly bracket and then we're just

going to return answer so let's do some

tests to really test this we're going to

have to add a console dot log here to

log what it's going to be and I'll run

this alpha good now two should be beta 3

should be gamma good and we'll just

assume for is correct

so we're done

now I'll talk to you about the default

option in a switch statement the default

option is kind of like else in an

if-else statement so here's a switch

statement that's very similar to the one

we already saw and it's inside this

function where we pass in a value into

the function and we're going to check if

the value equals a if it equals a the

answer is gonna be set to Apple B

intercept the birds see cat so in this

example we can see that we passed in

here we pass in a and it returned Apple

because that was one of the options but

what if we pass in something else if I

pass in the number two here it's going

to return an empty string that's because

the answer is set to an empty string and

we never override the answer here so it

just returns that empty string what if

we want to return something anytime a B

or C is not passed through so for

anything else that's passed into the

function we're gonna do default this is

like the else statement so the default

we're gonna do answer equals it's off

again we're gonna have the break so now

whenever we pass in something that's not

a B or C it's gonna return stuff so we

can pass in five it's gonna rain return

stuff but if I go back the pass again

see one of the things they have a case

for it'll return cat and that's the

switch statement

sometimes you want a switch statement

where multiple inputs give the same

output well that's easy enough by

omitting the break statement let me show

you how that works so let's get a switch

statement here and we're gonna have Val

that's what's passed into the function

and in this case when you want the case

of one two and three all to return the

answer of lo so I can do it like this

case one and I can go straight into case

two and then I can go straight into case

three and since I don't have any break

statement between these cases it will

just keep going to the next one

automatically and now I'm gonna say that

the answer is must be set to equal low

and here is where I put the break

statement okay now we're gonna do the

same thing with cases four through six

and actually I'm just going to do some

copying and pasting I'm gonna copy all

this and now we're going to paste that's

four five six we're gonna do the same

thing with seven eight nine so I'm gonna

do copy and paste again and then I'm

just going to update the code so this is

gonna be four five six we'll have seven

eight nine and we're gonna have mid and

high so if the case is one two or three

like for instance if it's one it's gonna

pass through two and three to get low

and then it's gonna break out if it's

four five or six it's gonna pass through

to get to mid and then it's gonna break

out seven eight nine it's gonna pass

through to high and break out so let's

test this out and see since we're

passing in the number one here it's

going to be low but if we pass in five

we should get mid and if it's seven

eight or nine

we should get high

sometimes a switch statement can be

easier to write and easier to understand

then a chain of if-else statements so

we're going to change this chain of else

if statements to become a switch

statement so let's do that right now

so I'm gonna start with the switch

keyword and we're going to be evaluating

the value with open curly braket and we

want to make sure to have an end curly

bracket end so for a case Bob we're

gonna set the answer to Marlee and then

we need to have a break in here for case

42 we're gonna set the answer to the

answer or case one whole set the answer

to there is no number one oh we need a

break up here for case 99 the answer is

miss by this much and then we need a

break now we have for case seven well

seven eight nine and break and now we

just changed that chain of else if

statements into a switch statement

here's a little trick when you want a

function to return a boolean a true or

false value you can see in this function

we're checking if a is less than B and

if so we return true else we return

false you may remember from before that

all comparison operators return a

boolean true or false value so instead

of using this if statement here we can

just do that we can actually delete all

of this and just return the result of

this return we're just returning the

result of a is less than B so this is

going to be true or false and we can

just skip that whole if statement logic

and just return this so if we consul

don't log this out console.log we should

be able to see if 10 is less than 15 it

is less than 15 it's true but if we put

a 20 here and it's false

we've already seen a few examples of

this but you can return early from a

function with the return statement so if

you see this this function right here we

return at the very end of the function

and so it leaves a function and returns

this value from the function but you can

leave the function anytime with a return

statement so we're going to modify this

function so that if a or b are less than

zero the function will immediately exit

with a value of undefined so let's do

that we're gonna set an if statement if

a is less than zero or that's two pipes

B is less than zero then we're going to

return an undefined so we can do a test

here console.log eight but what if this

is a negative number it's going to

return undefined Skrim beheads a little

quirk here where it just shows null but

in a browser will show undefined

we are going to create a blackjack card

counting function so how how card

counting works at least how this

function is gonna work is that when you

see a low card that count goes up and

when you see a high card that count goes

down and if it's a middle value card the

count stays the same and then when the

count is positive the player should bet

high and when the count is zero or

negative the player should bet low so we

are going to use a switch statement to

figure out what card has been passed in

and what to do about it you can see that

the function looks like this see see and

we pass in a card and depending on what

the card is it's going to increase this

global count variable or it's going to

decrease it or it's going to stay the

same and then we are going to return two

things we're not gonna return changeme

we are going to return the current count

value and whether the player should hold

or bet so every time you call the CC

function it's going to change this count

value and return the total count so

let's see how this is going to work we

are going to use the switch statement

like I said and we're going to check the

card value that was passed in so if the

case is 2 3 4 5 6 we are going to

increment the count variable so we're

going to do like this case 2 I'm going

to do some copying and pasting if the

case is 2 3 4 5 6

well it just had to actually change

these values 3 4 5 6 now there are many

ways to write any program this could be

done with if statements and else

statements it could be even done with

other other ways that we haven't even

talked about yet as long as the program

works in this case that's all that

matters so if you find a different way

to write this program

that's great so if the case is two three

four five or six we are going to take

the account value and if we just do plus

plus that increments it by one and then

we're going to break now if the case is

seven eight nine so let's pay some three

of these blue seven eight nine actually

we're going to do nothing the account is

not going to change at all so we don't

even need case seven or eight nine so

instead of doing seven eight nine we

just need to check in the case that

something is actually going to happen so

we are going to decrement the count

variable if we have ten Jack queen king

or ace so that's what we're gonna change

this to ten Jack queen king or bass in

this case we're going to decrement the

count so you can do count - - so that's

the same as count equals count minus one

and then we will break now we've taken

care of the count and up game account

now we have to take care of what we're

going to return we are going to return

the count and we're also going to return

whether we are going to hold or bet so

we're going to actually return a

variable but first we're going to space

there's a space between the number and

then we're going to return the hold

variable now this is a variable we

haven't created yet normally this would

be the perfect time to use the ternary

operator but we haven't learned that yet

and what we're not going to learn that

for a few more lessons so I won't use

that now we are going to set what that

hold that value is first we'll create

the hold variable variable hold back and

we'll set it to

hold however if count is more than zero

then we can set hold that to equal that

so now this should work let's test it

out and see if we've made any mistakes

yet hold that is not defined well we

have it right here

hold Oh we spelled that wrong so instead

of halt bet that should we hold that

okay in this case we're going to bet

because we had a bunch of positive

numbers and then negative numbers but if

we change this to K I change this to 10

what do what happens now we're gonna

hold okay it worked

objects objects are similar to arrays

except that instead of using indexes to

access data you use properties so here's

an object called our dog objects are

going to be defined with these curly

braces before at the beginning of the

end and these are the properties now the

properties are everything before the

colons so we have name that's a property

legs the property and then the values

are the things after the colons here so

the name is camper the legs four tails

there's like one tail on this dog and

friends are everything now you can see

that with the properties can be strings

they can be numbers they can be arrays

they can be any data type in JavaScript

so now we are going to create our own

dog so this is going to have a name

personally I like the name Quincy so

we'll use that for our dog's name also

we're going to have legs unfortunately

our dog has had an accident he only has

three legs but to make up for the only

having three legs he does have two tails

and four friends another unfortunate

thing it's an empty array he has no

friends okay we've now created our own

object

there are two main ways to access a

property on an object the first I will

talk about is dot notation so we have

this test object and we have hat shirt

and shoes and we want to find out the

value of these properties so right here

the hat value we're gonna set a test

object now here's where we use the dot

notation we just put a dot or a period

and then I put the name of the property

about hat and then for the shirt value I

will do dot shirt so see this word right

here is just the word here so the value

of hat value test object that hat is now

gonna be ball cap and the value of the

shirt value is going to be jersey

besides using dot notation you can also

use bracket notation to access a

property and an object you can use

bracket notation anytime but it is

required if the name has a space in it

you can see in this object we have three

properties and each of them have a space

so to get the value of these properties

we're going to have to use bracket

notation so the entre value we're going

to test object that's the name of the

object and then we're gonna put brackets

kind of like an array index so you need

the opening and closing brackets and

inside we will put the name of the

property so I'll do a an entree and then

we can do it again down here for the

drink value and I'll I'll use a single

quote this happens have a double quote

to show that each of those will work the

drink and then we need the closing

brackets here so now Andre value is set

equal hamburger and drink value is set

to equal water

bracket notation can also be used to

look up object properties using

variables so here we have this test

object we have these different numbers

associated with these names here and we

are going to set this variable to be one

of the numbers so I'll set this to be 16

so now we can in this test object 16 is

Montana and we can look that up using

the variable name instead of the numbers

so instead of putting 16 I'm going to

put player number in here and now player

is set to the word the string Montana

and we use this variable to look up the

object property

we can use dot notation to update object

properties here you can see an object

called our dog it has a named legs tails

friends and the name is camper however

here we use dot notation our dog name

and use the assignment operator the

equal sign to set the name to happy

camper so if we did console dot log on

our dog name it would no longer be

camper it would be happy camper well we

have another dog here with a name of

coder but we want to change the name to

happy coder so that's what I'll do right

here so my dog dot name equals happy

coder so just like above we use dot

notation to set the object property to a

new value

you can add new properties to an object

using dot notation or bracket notation

so here's an example right here we have

this object our dog and there's four

properties here but down here we're

adding a new property our dog bark

equals bow-wow so it had four properties

but now it has five properties as the

property bark as well now down here

we'll add a property to the my dog

object so we can do my dog and then here

I'm going to use bracket notation set

dot notation bark I'm going to set that

to equal booth and because he's yelling

it will have an exclamation point and

that's how you add properties to objects

it's simple to delete a property from an

object our dog object has all these

properties and with the delete keyword

delete our dog bark so now this property

here the bark has been deleted and is no

longer in the object after we have

deleted it so we can do the same thing

down here and this time we will delete

the Hills property my dog that kills so

now the my dog object no longer has a

tails property

objects can be thought of as a key value

storage like a dictionary you can use an

object to look up values so in this case

we have a switch statement that returns

certain values so when you pass an alpha

to the function it returns Adams if you

pass in Bravo it returns Boston we can

replace this switch statement with an

object and use the object for lookups

instead of the switch statement let me

show you how that's done I'm going to

create var lookup this is going to be an

object here and the object is going to

have a bunch of key value pairs so we

have alpha and that's going to be Adams

and then we have Bravo and the value for

Bravo is going to be Boston and that's

it so we can now delete this whole

switch statement and now we can say

result equals lookup in bracket notation

we put the value that was passed in and

I forgot one thing which was the equal

sign here because lookup equals this

object and let's do a test so let me put

console dot log so we can actually see

what happens here so if we do charlie

we're gonna get Chicago if we do Foxtrot

the result will be Frank so it works

you can check if an object has a

property with the has owned property

method let me show you how to use this

method and finish making this function

where we check if an object has a

specific property if it doesn't have the

property will return not found so let me

show you how that's going to work we'll

do my abs that's the object up above

dock has owned dropped 40 and then we

pass in the property we're gonna check

which is check crop this is either gonna

come back as true or false if it has the

property so let's make this into an if

statement if my my object has own

property check crop but if that's true

we're going to return my ABS and then

use bracket notation check crop so go

we're going to return the value of that

property else we're going to return not

found so let's pick up this other return

statement and I'll do a test so when we

pass in gift here we returned pony but

let's say we passed in hello you load

that not found okay it works

a JavaScript object is a way to store

flexible data so you can store strings

numbers and arrays and even other

objects so in this example we have an

array called MyMusic we can see it's an

array because we have the open break and

closed bracket but inside the array are

objects so this is one of the objects

and inside the objects are all these key

value pairs with the strings and the

numbers and so on so I'm going to add

another object so since this is array

after each element in an array you have

a comma so I'm gonna add a comma here

and then I'm going to add my next record

right below this comment here and we are

going to have just like well above we're

gonna have an artist the artist is going

to be Bo Carnes and then we have a title

the title will be a serial man the

release year will be 2003 and for

formats this is going to be an array

it's just like above so we can have any

format I'm gonna put YouTube video and

now we've created a second object in our

in our my music array and each objects

hold data in a property which is the key

value format this is very similar to

JSON which we will talk more about later

here we have an object with other

objects nested inside that so in order

to access sub properties of an object

you can chain together the dot or

bracket notation so I'm trying to get

the glove box contents so I'm going to

take away this undefined here and I'll

do my storage dot car dot inside and

then now the next thing it's it with a

car inside the last thing is glove box

because there's a space here we have to

use bracket a shin so I'm gonna use

bracket notation on the end here and say

glove box and now if we run this C we

are going to console that lock so let's

see if we get the contents here yep Maps

it worked

arrey bracket notation

to access nested arrays you can see we

have this array here and inside this

array are two objects the first elm and

the array is this object the second elm

and array is this object and then inside

the object we have a key value pair the

key is less and the value is another

array here so we can combine dot

notation and bracket notation to access

the second tree that's what we're trying

to do here so let's do that first we

need to do my plants and the trees are

the second element in the my plant array

which is index one now we need to get

though the list so the list of trees

here so I'm going to do dot lists and

since that list is an array I can use

the bracket notation to get the the

second list element which again is array

index one so if we run this it's going

to console that log and we see pine

that's the second tree here

this is a coding challenge we're gonna

do we're giving given this object here

which is a record collection each record

has an ID and then it also has different

pieces of information about the record

they don't all have the same information

but see we have art album artist tracks

album artist tracks this just says

artist tracks and this just has album

here and we are supposed to create this

update records function where we can

pass in the ID the property and the

value and it's going to update our

record collection with the property of

the value so for instance if we pass in

the ID

2468 and we put the property artists and

if we set a different value like Quincy

or something like that then we should

update this whole object so now it says

Quincy instead of prints and we should

return the full collection so it's going

to update the collection and then return

the collection if we have an empty

string for the value it should just

completely delete that property also if

we have the property of tracks and then

we have a value instead of updating the

whole tracks here with what we put in

it's just going to add the track to the

end of this array so if you look right

here it says the comment says keep a

copy of the collection for tests this

JSON dot parse and json dot stringify

and then collection this is just a fancy

way in JavaScript to make a copy of the

object remember in our function we are

going to be changing the collection

object but we want to have a copy of the

original object before anything was

changed so that's what that's for so

let's go ahead and do that so we're just

updating this function here this update

records function okay so let's get to

this so we'll do if value

equals equals equals blank because the

first condition we are going to test for

is if we need to delete the property

remember if the value is at the blank we

delete that property so if the value is

blank we are going to delete election

and then we have to use bracket n ID and

then try the collection ID crop that's

the collection here if we pass in the ID

1248 it will go to there the property if

we passed an album for the property will

go to here and then we'll just delete

that whole thing if our values in the

empty string okay the next condition we

have to look for is if the property is

tracks because for most properties we're

just going to override that property

with the value passed into the function

but if the property is tracks we are

going to push on to the end of the array

so let's do an else if else if prop

equals equals equals tracks then we just

have to push on to the end of the array

so there's also another condition here

which is if the tracks property is empty

if the tracks property is empty we need

to create it here's a fancy way to do

that collection ID props so if prop

equals tracks we are going to set the

tracks because we're prop is going to

equal track we're going to set the

tracks to equal it's going to either

equal itself if it exists or if it

doesn't exist we're going to create it

I'll show you how collection ID huh it's

gonna equal itself or that's the or

operator it's going to equal an empty

array so if this already exists we're

gonna set to equal itself but if itself

doesn't exist

we'll just set it to equal and empty

array so that's just a way to create

that property if it doesn't already

exist so now that we know it exists we

can just push the value to the end of

the array

collection ID prop and we'll just do the

dot push and then put in the parentheses

the value so we're able to push the

value that was passed into this function

onto the end of the array okay there's

only one last condition which is the

just kind of the default condition else

so if the values in blank and the

property isn't tracks then we just push

the value onto the property then we just

set the property to equal the value just

like this collection ID prop equals

value okay let's test this out so we

already have this example down here but

to see if it actually worked we're going

to do a consult log so we can see the

output there and if I run that I'll let

me open up the console so I can really

see it so let's see what we changed go

to 5 4 3 9 and we set the artist which

didn't previously exist to ABBA

so let's look down here in the console 5

4 3 9 and the artist is ABBA

let's see what happens when we add a

track so we'll do one more example here

I'll just put right above here 8 records

and I'm going to pass in something I'll

pass in let's see the ID 2 4 6 8 and

we'll pass in the key which is going to

be tracks and then for the value

we'll put test

so let's see what happens here if we run

that it's gonna update the record here

and that's gonna update the record again

but we don't care about that one we may

like hear that it's gonna console that

log what the final value is so if we

look at 2 4 6 8 here 2 4 6 8 let's see

the tracks we at 1999 little red

Corvette and test so it's working great

loop's allow you to run the same code

multiple times I'm going to talk to you

about a while loop that runs while a

specified condition is true and stops

once it's no longer true so we are going

to push the digit 0 through 4 on to this

array here's how it's going to work

while it's a while loop while I is less

than 5 and we're gonna do something

while that's true first with a set where

I I starts off at at so var I equals 0

so while I is less m 5 will do my array

push hi just push it onto the array and

to make sure this loop eventually ends

I'll have to do I plus plus which

increments I so then I will test this

out by doing console dot log and I'm

gonna console that log to my array so

let's see if this works I'll run this

and check the console 0 1 2 3 4 the

while loop worked every time we went

through this five different times and

pushed 0 1 2 3 & 4 onto the loop

a for-loop is the most common type of

loop in JavaScript so here is an example

of a for loop you start with the keyword

for and then we have these parentheses

with three different items and they're

separated by semicolons the first thing

is the initialization then we have the

condition then we have the final

expression so the initialization happens

before any of the code inside the loop

runs so we will start by initializing I

to equal 0 so this is what most for

loops start with is you have a variable

that you're going to initialize for the

for loop then the next thing is the

condition so once this evaluates to

false we break out of the loop so while

I is less than 5 we'll continue to run

through the loop over and over until

this is false and we break out of the

loop the final thing is what we do at

the end of each iteration at the end of

each iteration we will increment I by 1

in this example we are filling our array

with the numbers 0 through 4 I'm going

to do another example where we fill an

array with the numbers 1 through 5 so

we'll start with for now we're gonna

initialize I to equal 1 we're starting

with 1 instead of 0 this time and we're

gonna do I is less than 6 so while I is

less than 6 or until I is more than 6 we

are going to run all the code in this

loop and at the end of each iteration we

are going to increment I now I can just

do what we have before my array dot push

hi so the final thing we will do is test

this I will do console dot log and put

my array inside here and I'll just load

this and see what we see in the console

1 2 3 4 5 it worked we iterated 5

different times and each time we pushed

a new digit on to the array and at the

end of each iteration we incremented I

so

it pushed a larger number onto the array

loop's don't just have to increment one

at a time

look at this for loop here we have our

initialization where we initialize I to

0 and then we are going to run the loop

until I is less than 10 and finally

there are increment instead of

incrementing I by 1 we're incrementing I

by 2 so now this is going to push all

the even numbers onto the array we have

console dot log so let's log it out and

see what it looks like 0 2 4 6 8 I'm

going to write another loop right now

that creates an array of odd numbers so

let's do that for VAR i equals 1 we'll

start at 1 while I is less than 10

I can use 10 again I'm gonna do I plus

equal to so we're still going to skip

count by twos but since we're starting

at 1 instead of 0 this should give us

the odd numbers so let's see what's

gonna be inside our loop my array dot

plush and I'll just put I there so let's

log this out and see if we did it right

console dot log my array and I'll run

that 1 3 5 7 9 it worked

a for-loop can also be used to count

backwards so if we see this for loop

here we're initializing I to 10 we're

starting at 10 and we're going back to 0

so we're gonna iterate through this loop

while I is more than 0 we're going to

keep iterating and at the end of each

iteration we're gonna decrement I

instead of increment it we're gonna go

down by 2 i minus equals 2 means i

equals I minus 2 so we're gonna continue

pushing the lower and lower numbers onto

the array until I is less than 0 so

let's log this out and see what our

array becomes you can see 10 8 6 4 2

well I'm gonna write another one where

we're gonna push the odd numbers from 9

through 1 to my I took the my array so

another for loop and I'm going to do VAR

I equals 9 because we want to start at 9

now we'll still do I is more than 0 so

while I is more than 0 we're gonna keep

going through this array and we'll do I

and we just everything else is really

the same - equals 2 and this is gonna

get all the odd numbers onto the array

so we just have to do my array dot push

and then push on the I there and I'll

just console that log so we can see what

it ended up as my array and I'll run the

code 9 7 5 3 1 we did it

it is common in JavaScript to iterate

through the contents of an array so look

at this example we have this array here

before we were are always adding items

to the array but this time the array

already exists right here our array 9 10

11 12 so we are going to start at 0 but

now instead of going to a specific

number of iterations we are going to the

our array dot length so the length is 4

here but if we added elements to this

array that means this loop would just go

even longer until we went through every

element of that array and then at the

end we're going to increment I by 1 at

the end of each iteration so look what

we're doing inside the array we're doing

our total that starts out at 0 up here

and we're doing plus equals that means

we're going to do our total equals our

total plus something else so we're gonna

keep adding to the total whatever is in

the array at that index so our array I

so it starts at 0 and then it goes 1 2 3

until it gets to 4 which is the length

of the array and it doesn't even run the

iteration at 4 and there is no index 4

on the array remember it's 0 1 2 3 so

this is just going to add up all those

numbers if we run this we can see it

adds up to 42 I'm gonna write another

for loop down here that's going to add

up all the numbers in this array here so

we'll do for our I equals 0 and then we

do I is less than my array dot length

and I plus plus so just like before for

each element in my array we're gonna do

a my we're going to do a total

plus equals my array index I so we have

to initialize the total variable right

up here so the VAR total equals zero and

then at the end we can just we'll just

console dot log that out to see what the

total is so if I just run this we can

see that the total this time is 20

if you have a multi-dimensional or

nested array you can use nested

for-loops to access all the array

elements so for instance we have this

multiply off function it's defined up

here but we're calling it here and we're

passing in this multi-dimensional array

which is basically an array with arrays

inside the array so inside the first

array there are three elements 1 2 3 and

you can see each of those elements are

an array with their own set of elements

so we are going to use nested for-loops

within this multiply all function to

multiply every number in these nested

arrays here so let's get started we're

going to start with a for loop and it's

going to look just like the other four

loops that we started I equals 0 we're

going to initialize I to 0 and then

we're gonna say while I is less than our

length and then we're just going to

increment I at the end of each iteration

now are that linked that's going to

start off as 3 because we're passing in

this array and the first level of the

array there's just 1 2 3 elements so

that's gonna be 3 but now we're gonna go

inside this for loop and create another

for loop so we're gonna do VAR J equals

0 normally its standard practice to call

the variable that we're incrementing I

but we already have an eye within this

scope so we need to create another name

and it's pretty standard to call the

next variable J because J is after I so

now we're gonna do J while J is less

than now this is where it gets a little

tricky we're gonna do while a is less

than our index I dot length also we're

gonna increment J here so this is going

to change so first the first iteration

of this outer for loop we're looking at

the length of this array then we're

linking looking at the length of this

array then we're looking at the length

of this array the index is going to be

different every time so we're going to

be going to each different

inside the nested array so at this point

we just have to multiply all the numbers

together so we already have the product

that we've defined above so we're gonna

do product x equals which is just gonna

multiply everything together and we're

going to do our eye Hey so the eye

references the outer array and the J

references the inner array within the

what we're passing in and now we're done

so let's we have the console dot log

here so let's run this and see what

happens and 5040

next I'm going to talk about do-while

loops now we already talked about while

loops and I'm gonna review this while

loop and then I will tell you how a

do-while loop is different than a while

loop so this while loop first checks the

condition before it runs any code within

the loop a do while loop will always run

at least one time and then it will check

the condition so here we have this empty

array we have I equals 10 so while I is

less than 5 well I is not less than 5 so

it's not gonna do anything let's see

what happens so we see it logged out 10

and then an empty array because I

started as 10 and my array started as

this empty erase you were logging the I

and my array with a do-while loop it's

different so what I'm going to do is cut

this line up here and put it at the end

and then at the beginning I'm gonna put

the keyword do in a do-while loop this

is always run at least once before it

checks the condition so first it's going

to do these things and then it's going

to check the condition in this case it's

going to find out the condition as false

and it's going to break out of the loop

let's see what happens here

see now I is 11 and the array has the 10

added to it

this is a coding challenge we have this

array of objects in our context lists

and you'll see each object is one of our

contacts with the first name a last name

a number and likes so these are key

value pairs here so what we want to do

is create this lookup profile function

where we pass in a name this is a first

name and the property and it's going to

return the value of that property for

instance if we pass in the name christen

here and we pass in the property of a

number it should return unknown if we

pass in the first name of Sherlock up

here and we return the property and we

pass in the property of likes it should

return the array intriguing cases and

violin if the name that's passed in does

not correspond to any context then our

functions to return no such contact and

if there's no property it should return

no such property so let's go to this

function here and start creating it so

the first thing we're going to have to

do is iterate through each element in

the contacts list so let's make a for

loop so for bar VAR I equals 0

while I is less than contacts length and

at the end of each iteration we'll do i

+ + to increment that so for each of

these contacts the first thing we're

going to check is if the name is a name

in this list so if contacts I

first name equals equals equals the name

that was passed in so we're checking

each eye to see if was the name that was

passed in and if so we're going to do

something now if now we're gonna do

something else so let's do that now

remember if the name that was passed in

is not in the array we're going to

return no such contact however if it is

in the array we're gonna do something

else if the name is in the context list

we're going to return the value of the

property that was passed in so return

contacts

I dropped so this will return the value

of that property that was passed in

however there is another case which is

if the property does not exist we return

no such property so a fancy way in

JavaScript of saying use this value if

it exists but otherwise use a different

value is to use the or operator

so we'll say return contact I prop or if

it doesn't exist we're gonna return no

such property and just so you know there

would be a way to do this without using

this or operator as long as that your

code passes the requirements that's all

that's important

there's many ways of doing this but

let's check it so right now we have our

lookup profile we're passing a Maki row

and we're trying to find the likes and

we're constantly logging the data and

pizza coding brownie points so what if

we passed in something else if we passed

in Sherlock a pass in last name

contact well that's working because I

spelled Sherlock wrong this is e so it's

good the way a good way to test that

Holmes and the last thing we'll check is

if we pass in a property that does not

exist I'll just say hello and no such

property so our function works

there is a simple way to create a random

decimal number in JavaScript it's with

the math dot random function so we have

this function here which is says random

function and it's returning zero

currently but we're gonna use the math

dot random function and you will see

that when I run this we have zero point

two three eight one three seven four one

and so on so it's always going to be a

number between zero and it could be zero

between zero and one but it could not be

one

often you want a random hole number

instead of a random decimal number that

can be accomplished with math dot floor

we have mat that floor here this rounds

down to the nearest whole number so we

pass in math dot random times 20 and

then we round down to the nearest whole

number this is going to create a random

whole number between 0 and 19 remember

math dot random can never be 1 it can be

0 but it can never be quite 1 so when we

multiply it by 20 we are going to get a

number between 0 and 20 but not

including 20 then we round down which

will end up being 0 to 19 so let me show

you another example where we're going to

get a random whole number between 0 & 9

it looks just like this so we're going

to modify this function so this math dot

random we're going to pass that into

math.floor so I have to put the

parentheses because we're passing it in

to that function and it's math dot

random times 10 and that's going to give

us a random number between 0 & 9 so if I

reload this you can see 9 5 4 1 every

time I load it it's a different random

number

you can also generate random whole

numbers within a range so look at this

function here our random range it takes

a minimum number and a maximum number

and then it just runs through this

calculation here so we have the math dot

random and we multiply it by the max

number minus the min number plus 1 and

then we get the floor which is rounding

down and we add all that to our minimum

number so this is just a calculation to

get a random number between the min and

Max so as practice I'm going to rewrite

it down here so we have the random range

and instead of our men and our max we

have my men and my max however the

equation is going to be the same so we

have math dot floor you can take a

chance to actually just look over the

equation and see if you can understand

how it works my max - my men and then we

just have to do plus one and then this

whole thing is going to be plus my men

so we already have this example test set

up down here random range between 5 and

15 and we're going to log it out here so

let's try that 11 6 7 see every number

is between 5 and 15 whenever I run it

another useful function is the parse int

function it takes a string and returns

an integer a lot of times you want to

make sure you're dealing with integers

and not strings for different

calculations and things like that

if the string cannot be converted into

an integer it returns in a in for not a

number so let me show you how it works

from this convert to integer function we

are going to return and we're going to

return the string except we're going to

convert it into an integer first so

we'll do parse int and then I'll pass in

the string now it was a string because

you can see here we're passing in the

string of the 56 but it's going to

return it as a number and integer

the person function can also be used

with a radix the radix specifies the

base of the number in the string such as

base 2 or base 7 or base 8 a base 2

would be binary so that's one of the

most common ones to use now the default

is base 10

that's what we use normally every day

but let me show you how that would work

we're gonna convert this number which is

a binary number to an integer so we'll

do return and I will do the parse and

I'll pass in this string as before but

now we'll have a second argument after

the comma which is going to be the

number 2 so and so the default of base

10 will be passing it as base 2 so the

computer knows that this is a binary

number

I love the ternary operator it's like a

one-line if-else expression now this is

what it looks like you have your

condition just like in an if statement

and then you would have a question mark

after the question mark you have what's

gonna happen if the condition is true

then you have a colon then you have

what's going to happen if the condition

is false so we can replace an if-else

statement like this into something using

the ternary operator so here we have

this if this condition is true we're

going to return true else we're going to

return false let's change this so now

we're going to use the ternary operator

so now it's just going to say return a

equals equals B that's the condition

then we use the question mark so if it's

true we're going to return true and then

we've have a colon and after the colon

we have what's going to happen if it's

false which is we're going to return

false

now I'm we honest you would never write

a line like this in real life because

you could just write return a equals

equals equals B and this lines actually

going to do the same thing as this line

however I just wanted to give you a

simple example of using the ternary

operator

one of the great things about

conditional or ternary operators is that

you can nest them within each other

which gives them even more power so

we're going to read write a function

here the function check sign and it's

going to return the string positive if

this number is positive negative if if

the number is negative or zero and we're

gonna use a nested conditional operator

so here it is return and first we're

going to check if num is more than zero

and then we'll use the ternary operator

if so the first thing after the question

mark is if it's true if it's true we're

gonna return positive if it's false if

the number is not more than zero we'll

do something else but here's where we're

going to have another ternary operator

we're gonna check if num is less than

zero so if the number is less than zero

well if that's true we have to have the

question mark for the ternary operator

if that's true we're going to return

negative and if it's false that's where

the colon comes in we're going to return

zero so let's do this check sign I'm

going to do a console about log so we

can see what this returns here and we

can see this is going to return positive

if we have a negative number here it's

going to return negative or if we have a

zero it's going to return zero now

you'll see that after this :

we have an entire ternary operator so if

this is true we just return positive if

it's false then we do everything here

which is another ternary operator where

it checks if this is true and if that's

true we return negative and if it's

false we to return zero

for a long time in JavaScript if you

were going to declare a variable you had

to use the VAR keyword but starting with

es6 in 2015 we can now declare variables

with let and Const as well over the next

few lessons I will be talking about what

let and constitute that it's different

than var but one of the things is that

let does not let you declare a variable

twice so let's look at this example we

have var cat name equals Quincy and then

down here var cat name equals Bo and if

I just run this code you'll see that

nothing is happening it's just allowing

us to set the cat name twice and to

clear it twice with the VAR keyword

however if we change this to let we're

gonna change all the var to let and

you'll see that when we load it again

you'll see an error

duplicate declaration cat name so this

is good that's creating this error

because you usually don't want to

declare a variable two times in the same

scope so this allows your program to

give you an error to tell you that

you've done something wrong now you can

still reset it so if we didn't use the

word let here we could just set the cat

name variable and now we're not gonna

get an error in this case we're

declaring the variable here to be Quincy

and we're setting the same variable to a

new name here this is one of the few

reasons that many people only use Latin

Const and never use var to declare

variables another thing in this code you

can see is use strict now this enables

strict mode which caches common coding

mistakes and unsafe actions so a lot of

people will use use strict at the top of

a full JavaScript file or maybe just in

a function to catch coding mistakes such

as if you create a variable and don't

declare it with varla a Const

another major difference between the var

and let keywords is that when you

declare a variable with var it is

declared globally or locally if declared

inside a function however let the scope

of let is limited to the block statement

or expression that it was declared in so

let's look at this example here if you

see this code we have this check scoped

function and we're calling it down here

and it's setting I with a var here of

our keyword - function scope then we're

setting it to block scope in here and

you can see it's console that logging

block scope eye is it says block scope

and we will get down here function scope

it's still block scope if we want this

to be function scope down here we're

going to have to use let so we would use

let here and then we would use let here

and if we run the code now you can see

in the console block scope eye is block

scope function scope eye is function

scope so even though we set I to block

scope here inside this block now a block

is just anything inside these squiggly

braces here so we set I inside this

block to block scope but then when we

get out here it's now back to function

scope because of this up here here's

another thing I want to show you if this

is if we comment this line out and we

change this to var what do you think is

gonna happen

well let's run and find out look we set

the var inside this block here to block

scope and it says block scope is block

scope but then when we're outside of the

block when we're outside of these

squiggly braces here we can still access

I here and it set the block scope but if

this was a let and we're declaring

inside this block if we run that now

when we get outside the block we get an

error because it's not defined

so that's another reason why people use

let instead of var is so that they can

make sure the variable is only defined

in the area they want to be defined in

but for now I'll uncomment this out

const is another way to declare a

variable it has all the features of left

but it's also read-only

you cannot reassign a Const so let's

look at this program here we're running

this print many times and it's going to

log out this sentence and the sentence

is up here vard sentence is declared and

then we reassign it here so first we

declare this sentence to be the string

is cool then it's reassigned to be the

string it's amazing so if we run that it

should work it prints free code camp is

amazing many times but if we change this

to Const let's see what happens

now I'll run this and we get an error

sentence is read only if you declare a

variable with the Const keyword you

cannot reassign it afterwards this can

be very helpful to prevent you from

accidentally making mistakes later if

you know for sure that you never want to

reassign a variable always use Const so

you don't accidentally reassign it when

you don't mean to another thing is when

you're using Const it's very common to

use all capital letters so like this

sentence like that and that's another

way to remember that it's a constant so

if I rename this year I'm also going to

have to repeat it here and while we're

at it we're gonna change this to left

because for the most part you should

only use Const or let but there are

certain circumstances where you would

use var and also in some other videos in

this course I'll be using var but in

your own code you should mainly use

Const and let let's reload this to see

what happens and it worked free code

camp is cool many times we can no longer

say that free code camp is awesome even

though we know it actually is

while you cannot reassign a variable

declared with Const you can mutate an

array so look at this example that's not

gonna work

first we declare the variable s and we

assign it to an array we declare with

Const and now we're gonna reassign the

variable s here but if we do that we're

gonna get the air s is read-only however

we can update the array using bracket

notation so I'll just comment that out

and using bracket notation I'll do index

0 I'll assign that to to index 1 I'll

assign that to 5 and then index 2 I'll

assign that to 7 and just like that it

is going to reassign the array so if I

just do a console dot log here console

dot log and put the array in there we

should see the new array here 2 5 7

as seen previously a Const declaration

alone doesn't really protect your data

from mutation if you have an object or

an array you can still mutate it even if

it's declared with Const there is

something called object dot freeze that

will prevent data mutation so let me

talk to you about object dot freeze

first of all let's understand this

function here we're using this function

to demonstrate object dot freeze so it's

going to create this constant math

constants with the PI in it this is an

object and right now this can still be

changed so if we look down here this is

a try-catch block will talk about

try-catch blocks in more detail later

but for now you just have to know that

it's going to try what's in the first

part of the block and if there's an

error then it's going to go into the

catch part and it's going to log it out

so right now we're going to try to

change math constants that pi to 99 and

if you can see right here we're going to

return the math that constants that pi

and down here we are doing into a

variable called pi so if we run this

you'll see that we console that log time

it's 99 but wait a second we don't want

pi to change because we know that pi

never changes that's why we're gonna use

object dot freeze so I'll put it right

here I'm gonna do object not freeze and

then in parentheses I'll put the object

which is math constants now I've frozen

math constants so when it tries to

change math constants top pi here it's

not going to work and it's going to go

into this catch block and it's going to

log out the ear or the exception so let

me run that and you'll see type air

cannot assign to read only probably a PI

of object so we had an error and we can

see here that pi is stays the same at

3.1

or so whenever you have an object and

you don't want any of the items in the

object to change use object dot freeze

this function here is called an

anonymous function it doesn't have a

name it is assigned to this variable

magic but there's no word right before

the function keyword to assign the name

to the function whenever you have an

anonymous function you can convert it

into an arrow function that makes it a

little quicker to write so instead of

the word function I'm going to take that

out completely and then put an arrow

here so this is the same thing except

it's just a little quicker to write but

we can shorten this even more if we're

just returning one value here we don't

even need the return keyword and we

don't need the curly braces so I can

delete all this and I can delete all

this here and now this is the full

function from before but it's just

really shortened up and to make this

even nicer we're not going to use var

and I change this to Const

just like in a normal function you can

pass arguments to arrow functions so let

me show you how to convert this function

into an arrow function so it's a normal

function now and it has two arguments

and then it's going to concatenate the

two arrays passed in so first we'll take

off the function keyword we're gonna

leave these parentheses with the

parameters now I'll put the arrow

since all we're doing is returning this

we don't even need the return keyword

and we don't need the curly braces so

I'll take that off we'll take this off

and now we've done this I just converted

that function into an arrow function and

it has these two parameters so we just

have the parameters and parentheses we

have the arrow and then we have what's

being returned right after the arrow so

if I run that you'll see that we

concatenate the two arrays that are

passed in in this example and then for

good measure we'll change this to

constant

arrow functions work really well with

higher-order functions such as map

filter and reduce I'll go into more

detail at a different time about map

filter and reduce but the main thing to

know is that they take functions as

arguments for processing collections of

data whenever one function takes another

function as an argument that's a good

time for an arrow function so what we're

going to do here is we're going to

update this function right here we want

to compute the square of only the

positive integers in the array so it's

passed in this array which is this and

we want to filter out everything that's

not a positive integer so I'm going to

use the filter and map functions to do

that but the main thing I want you to

look at is the arrow functions that I'm

passing in to filter a map this line is

going to be a lot more succinct because

of the arrow functions so we have the

squared integers is going to be the our

our and we're going to filter this so

dot filter now again I'm not really

gonna explain in detail what the filter

function does but that'll be something

for another time just look at this arrow

function we're gonna create this arrow

function am i starting it just like this

now before I showed you that you pass in

arguments in parentheses for an arrow

function but if you only have a single

argument like this the number argument

you don't need parentheses around the

argument you can just put the argument

and then the arrow so this is the

beginning of the arrow function and then

we'll see what's returned from the arrow

function first we want to filter this

array so we only have numbers that are

integers and numbers that are more than

0 so we'll do number that is integer and

then we will pass in the number and

number is more than 0 so let me complete

the parentheses here now the result of

this filter command will be an array

with all the numbers that are more than

zero and also integers so there'll be

442 and six but after we get that new

array we want to get the square of each

number in that array so that's where

we're going to use the map function now

the map function takes a function as its

argument but instead of writing a full

function out we can use an arrow

function so we're going to pass in X to

the function and there's gonna be an

arrow function now X just means every

element from the array that's being

passed to it

so remember the map is getting the array

for 42 6 X means for every element in

the array this is what we're gonna do to

it x times X because it's gonna be

squared again the main point of this

lesson is not to understand the filter

and math functions but to see that we

can put an arrow function we can pass in

an arrow function and it makes it so we

can fit everything really succinctly on

one line

so let's reload this and see if it works

now we have 16 1764 and 36

in order to create more flexible

functions you can use default parameters

the default parameter kicks in when the

argument is not specified or is

undefined so for instance with this

increment function we want to change it

we want to change the increment function

so you can pass in two arguments the

five and two to increment by 2 or you

can just pass in the 1 argument the 5 if

you want to increment by 1 so here the

numbers were passing in a number and a

value so we just have to put value

equals 1 so now if a value isn't passed

in it will be set to 1 automatically but

if it is passed in it will be set to

whatever is passed in so if we run this

we can look on the console we have 7 for

this first one and 6 for the second

the rest operator allows you to create a

function that takes a variable number of

arguments the rest operator is three

dots so we have this function here and

it's taking three arguments XY and Z and

it's summing them so at first it's

converting these XYZ into an array

called args and then it's reducing them

so it's summing them all up here and

then returning the result so right now

if we just run this it's going to log

six because one plus two plus three is

six but we can change this to use the

rest operator so we're still going to

pass in one two three but where it's

accepted here where we have the

arguments here XYZ I'm just gonna put

dot dot dot that's the rest operator

just dot dot dot and I'm going to put

args

so with this rest operator dot dot dot

it will convert everything that's passed

in into one array and the array is

called args so now we don't need this

anymore and it should work the same if

we run this we'll get six but we can

also now add any number of numbers so

I'll put a four on the end and ten it's

going to add those numbers together so

before we can only pass in three

arguments and now we can have any number

of arguments

the spread operator looks just like the

rest operator three dots but it expands

in already existing array or it spreads

out an array so it takes an array and

spreads out into its individual parts so

here we have an array with some months

and the spread operator can spread this

array that's our one into the individual

months instead of the actual array here

you can only use it in an argument to a

function or in an array of literal so

let's look at this so right now we're

setting array to two equal array one in

this example we're not actually copying

it because if we change array one if we

set the index of the array one two

potato and we log array two you'll see

that index zero is potato even though

we're logging array two and we only

change array one because these are equal

array two and array 1 are the same but

what if we want array to to be a copy of

array one we can use the spread operator

now we can't just use the spread

operator like this that's not gonna work

but if we put this inside brackets which

is an array it will spread out the

contents of array one into this new

array so we're not making array to equal

array one we are making array to equal

all of the contents of array one so

they'll be different so if we run this

again you'll see that it says January

for the first element and the array

instead of potato

the next few lessons will be about

destructuring assignment this is a

special syntax for neatly assigning

values taken directly from an object to

a variable so look at this object here

we have this object with three elements

we have the x y&z with their values and

it's all in the voxel variable so if we

want to take each individual element in

this object and assign it to its own

variable this is the old way of doing it

so you could do Vox without X to stores

X voxel that Y stores Y voxels at Z the

store Z now with with destructuring

there's a simpler and quicker way to

assign variables for each element in an

object so here's the destructuring

syntax right here this time we are

creating various a b and c and assigning

them to the values from the object x y

and z we can see we put in curly braces

here and we just say it equals the

object it equals a voxel you can read it

like this get the feel of X and copy

into the value a so get the feel of X

from the object copy into the value a

get the feel of Y from the object copy

into the value B get the feel of Z copy

it into the value C so this is just a

quicker way of assigning things from an

object into variables now we're going to

use the structuring to obtain the

average temperature for tomorrow from

the info object average temperatures so

we have average temperatures it has

today and tomorrow's temperatures and

then the average temperature is inputted

into this function here so I'm going to

change this line here to use

destructuring

and the structure the average

temperatures object here that's passed

into this function so first I'm just

going to put the average temperatures

variable here and then on this side of

the equal sign I'm going to have to use

two destruct

shirring so I'll put the curly braces

and we'll put tomorrow and the colon and

then the other curly brace so this is

saying get the tomorrow field from the

average temperatures object and assign

it to the temp of tomorrow variable so

if we run this we should see it says 79

in the console because we got the tempo

tomorrow variable we return temp of

tomorrow and it was logged right here so

we successfully used the structuring to

get the tomorrow variable out of average

temperatures

we can also use the structuring

assignment to assign variables from

nested objects we have this nested

object right here the local forecast and

inside we have some nested objects so we

have the forecast from today and the

forecast from tomorrow so here we have

get max of tomorrow where we're going to

pass in the forecast and here we can see

the local forecast becomes the forecast

variable and we're trying to figure out

the max of tomorrow so we are going to

use destructuring to figure that out so

it's going to equal forecast and

remember that is a nested object so here

when you're destructuring you're always

going to use the curly braces and we are

first going to get tomorrow and on the

other side of the colon we're gonna have

some more curly braces because it's

nested so we need to go inside of the

tomorrow object and we need the max so

we'll do max and then we have the colon

and max of tomorrow now we need two sets

of squiggly braces here so we have this

one and this one and so we've

destructured two times and the variable

is max of tomorrow so we've set the max

that was inside tomorrow to max of

tomorrow so if I run this you'll see

it's eighty four point six

you can use the structuring assignment

to assign variables from arrays look at

this example here so we have this array

of 1 2 3 4 5 6 and we're assigning the

variables Z and X to the first two

numbers of the array 1 & 2 the

difference between destructuring from

arrays and destructuring from objects is

that you cannot specify which element

from the array to go into a variable it

just goes in order however if we wanted

number 4 to be going to a variable we

could just do like this we would just

add some commas so we put a comma with

nothing in it like that two commas in

row and I'll put a Y here so now we have

the first element the second element we

skip the third element and then we have

the fourth element so if I console that

log z x and y we should see one two and

four here's another thing you can do you

can use the structuring of arrays to

switch the places of variables let me

uncomment out these and what I'm going

to do is use the structuring to switch

the places of a and B so it'll be like

this I'll say a B and I'll say equals B

a so now it's just taking this and

switching the places so instead a being

8 and B equals 6

it's now gonna log out 6 and 8 so let's

see yep it worked

we can use this structuring assignment

with the rest operator to reassign array

elements we can see in this example we

have this array that digits 1 through 10

and the array and we have this remove

first to function we're calling it here

and we're passing in the source that's

the source array and becomes the list so

we want to return the array with the

first two elements removed so let's use

the rest operator inside an array here

so we'll use the rest operator the three

little dots and to remove the first two

I just have to put two commas here with

nothing in between them so it's saying

do nothing for the first element do

nothing for the second element

everything else put into the our

variable we could have assign the first

two numbers in the array to two other

variables so I could do a B and then a

would be one B would be two and then R

would be an array of three four five six

seven eight nine ten but right now we

just need to return the array with the

first two elements missing so if I run

that you'll see that we did that if you

look in the console we've logged the

array and the first two elements are

missing and then we have the original

array down here

you can use the structuring assignment

to pass an object as a functions

parameter let me show you what I mean

right now we have this half function and

it's getting the stats argument so the

stats is being passed when it's called

down here and it's passing in this whole

object so this whole stats object but

you can see within this function we're

only using stats that Max and stats top

men so instead of passing the entire

stats into this function we can just

pass in what we need so this is what

we're gonna do I'm going to put in some

curly braces here and just put Max and

min so now when stats get passed in it's

D structured into just the max and min

variables and the max and min from the

function gets passed in so now instead

of doing stats that max we can just do

max and sort of stats that men we can do

men so if we reload that it's gonna work

exactly like it did before but now we

only pass in what we need this is

commonly used with API calls when you

are getting information from an ajax

request or an api request it will often

have a lot more information that what

you need and you can use destructuring

to get it down to what we actually want

to work with

template literals are a special type of

string that makes creating complex

strings easier you make them with this

backtick so here's an example of a

template literal right here we have the

beginning back tick and we have the

ending back tick this would be in place

of using a quotation a single or double

quotation mark a few advantages of using

these template literals these back ticks

instead of quotation marks are one you

can make multi-line strings you can see

this has two lines here's the first line

and here's the second line and if we log

the greeting is gonna put the new line

right in there another thing is you can

add quote single or double quotation

marks right in the string and you don't

have to escape them the third thing is

you can put variables right in the

string so if we see this see the dollar

sign and then we have these curly braces

and so anything in between these curly

braces that start with the dollar sign

is JavaScript so right now we just have

this variable person name which gets the

name from up here and then here we have

person that age which gets the age from

right there so it makes things easier

that you can put variables right in the

strings so if we run that you'll see

hello my name is zodiac as bro I am 56

years old and normally it would actually

also be printed with a newline but with

this exact code editor and console it

doesn't show the newline so there's

gonna be a coding challenge that we're

gonna do right down here we have this

make list function and we want it to

create a list based on the array that's

passed in so when we call make list we

pass and result that failure wellhere's

results result dot failure is this array

here and we want it to return an array

that looks like this

each element in the array is a template

literal that has some HTML in it and

then it also has this no var

on top and lime break that comes right

from this array that's passed in so

let's use template literal so to create

that so instead of setting this to equal

null I'm going to start this off to be

an empty array now there's many ways to

do this but I'm gonna use the classic

for loop so we'll do four and hopefully

you remember how to make a for loop will

you let I equal 0 while I is less than

our dot length and then at the end we

will increment I so inside this for loop

will do result display array dot push

and then here is where I'm going to use

the template literal put a back kick and

I'll put this HTML code here li class

equals text warning and now this next

part is going to be a variable because

it changes for each array element here

so I'm gonna do dollar sign and then the

curly braces and now I can just do R and

then at index I now in the curly brace

and then I can just put the /l I okay

and if we console dot log this out

because we just finished that video

console dot log result to display array

the array looks just like it's supposed

to be if you look in the console it

returns correctly

es six added some nice support for

easily defining object literals if we

look at this function here this function

is an arrow function it takes in three

variables name age and gender and it's

going to return an object and the object

is going to have a series of key value

pairs where the key is

the name age and gender and the values

are the past in variable names the past

end names

age and gender so if you look in the

console you can see what this currently

does we did the create person we passed

a name age and gender and you can see in

the console the object is name and

zodiac as bro age 56 gender male so you

can see there's some repetition we're

repeating name name age age gender

gender now the first name is the key in

the second name is the value but there's

a way to just make this simpler if you

know that you want to create an object

with where the key is the name of the

variable and the value is the value of

the variable there's an easier way to do

it we can actually delete this whole

thing here and that's how we're gonna do

do it we'll just do name age gender on

the script knows that it's going to

return this object and it's going to

have three key value pairs the name age

and gender so if I reload this you'll

see in the console it looks exactly the

same because this code does the same

thing that the previous code did

an object can contain a function this is

the long way to put a function within an

object but there is a simpler way we

have the set gear function but instead

of using the function keyword and this

colon we can just delete all that and

now this is the new way if I load this

again you'll see three in the console

just like it was before because we've

been able to set the gear using that

function

yes six provides a syntax to help create

objects using the class keyword so

here's the older way to create an object

it's with the the new keyword we can

instantiate an object using this new

keyword and we're instantiating the

Space Shuttle object we have to have

this constructor function up here so we

use this to construct the object where

we pass in the target planet Jupiter and

we set the target plan to this dot

target planet once we create the new

object like this that allows us to do

Zeus dot target planet so Zeus target

planet which we set to Zuppa der Jupiter

so in the console you can see Jupiter

the class syntax replaces the

constructor function creation so I

believe that we're going to use the

class syntax so I'll do a class space

shuttle and then we have the curly brace

here and so inside here we have a

constructor so du constructor or get

planet and then that's all we just have

to put in the curly brace and this works

exactly the same as before using the

class keyword and this constructor so

down here we are going to do the same

thing for a vegetable class so for the

vegetable class we'll have class that's

the bowl and we're going to have a

constructor with the name this that name

equals name so now that we have this we

can set this vegetable to make class

which will return a vegetable class

that's up here and then when we do new

vegetable and passing carrot this carrot

will go into here and it'll get set as

this that name so when we console that

log here at that name

we should get carrot

with a class object you often want to

obtain values from the object and set a

value of a property within an object

these are often called getters and

setters so in this class object we have

the constructor which we already talked

about we also have a getter and setter

to get and set the writer so we can get

the writer and we can set the writer

getter functions are meant to simply

return or get the value of an object's

private variable to the user without the

user directly accessing the private

variable so the private variable is this

underscore author that gets set when you

construct the object and then when we do

get writer it's gonna return this down

underscore author so you never actually

interact directly with this variable but

it's going to get the writer which is

the author here and when you're setting

it's the same so you're never

interacting with underscore author but

you can set that with the writer setter

this change could invoke calculations or

even even overriding the previous value

completely so you can have any number of

code lines in this setter to ultimately

maybe do different calculations before

you set it or a calculation before you

get the property so what we're gonna do

is make your own getter and setter for

the thermostat class we're gonna create

a thermostat class and we're gonna have

a getter and setter so here's the thing

about this challenge is that when we

construct the class it's going to accept

Fahrenheit temperature but we're going

to create a getter and setter in the

class to obtain the temperature in

Celsius so it's gonna have to do the

calculation right within the class so

let's do that we're going to do a class

of thermostat and in this class we need

the constructor but when you first

create the thermostat you're going to

pass in a temperature and remember this

is going to be Fahrenheit now within

this constructor we're going to set a

private variable this dot underscore

temp so the word

this just means that this variable is

only accessible within this class here

and the underscore temp whenever you

start a variable with an underscore

that's going to generally signify that

it's a private variable that you're not

supposed to access it outside of that

scope or outside of that class so we're

gonna set the temp and we're not going

to just put this underscore temp equals

temp because it's passed in as a

Fahrenheit and we want to convert it to

Celsius I just happen to have the

equation for Celsius so it's five over

nine times and then with temp minus

thirty-two so now we can create the

getter and setter so we'll forget it

will you get temperature and we're just

going to return this dot underscore temp

which now it's in Celsius because we're

storing the value in Celsius even though

the thermostat is created in Fahrenheit

so with the setter it's going to be the

same set temperature updated temp and

it's now going to still be in Celsius so

this dot temp equals updated temp so

let's look at the code down here how

we're using it so the consular Mesilla

equals mate class this mate class

function is going to return this

thermostat object here and then we're

going to do a constant thermos equals

new thermostat so when you're

instantiating an object you always use

the new keyword new thermostat that's

this and we're passing in 76 that goes

into the constructor the temp and so we

do this calculation to convert that

Fahrenheit to the Celsius in this local

variable here and then let temp equals

thermal temperature

so thermostat temperature is going to

use the getter get temperature and it's

going to return this down underscore 10

so a key thing to look at is that there

are no parentheses after this so

generally if there's if something is a

function you would see parentheses after

the function name but if it's a variable

or property name it's going to not have

parentheses so getters and setters are

access similar to properties and then we

can use the setter here

thermostat temperature equals 26 and

then it sets it with the updated

temperature and now we can say temp

equals thermos temperature and if we do

a console dot log here we can do that

with the temp and it should have the new

temperature if I load that 26

in the past people would use the require

function to import functions and code

from other files but now we have import

and export you can export code in one

file and then import it in another file

it also allows you to only import

certain functions from a file or certain

variables let me show you how it works

so in this file we have this capitalized

string function we're passing in the

string hello and we want to log out the

capitalized strings but right now it

just has an error because there is no

capitalized string function in this file

however in this other file we do have a

capitalized string function in this

string function GJ s we have export this

is the export statement I was talking

about and then it's exporting this

function it's actually a variable

capitalized string that's set to equal a

function this is a an arrow function

where we pass in a string and then we

return the string dot to uppercase now a

to uppercase is just a string function

that makes every letter uppercase so we

can import this in our other file so

let's go back to our other file and I

will import and with the import

statement you're going to use curly

braces and then I'll put capitalized

string and then we have to say what

we're importing it from we want to

import it from and this is where I put

the file name now normally you're going

to start with a dot slash which just

means the current directory and I'll

type in the file name string function

now the file name is a dot a yes after

it but that's assumed so you don't have

to put yes you can just put the file

name without the extension so if I run

this you can see hello in all capital

letters is successfully imported this

function from the other file and we used

it in this file

I talked a little bit about export in

the last lesson but now I'm going to go

into more detail you export functions

and variables from one file so that you

can import them into another file that's

how you can reuse different code so we

have this function here this is a

capitalized string function it actually

just capitalizes the first letter of the

string and then leaves the rest of the

string lowercase and before I showed you

you can just put export right before

here but we can explore a different way

so I'll do export and then in curly

braces capitalized capitalized string

and so now we've just explored this

function and to export a variable like

this we have Constable's barkas

particles foo to export these variables

you just type an export like both before

so now in this file we're exporting this

function and these two variables and

then we could import them into another

file

if a file exports multiple different

things you can import each things

individually or you can import

everything so let me show you how you

would import everything from a file

it's just import and then you're going

to put an asterisk or a star and then

you're gonna put as import as and then

you have to create an object to store

everything in so I'm gonna import stuff

from a file called capitalized strings

so I'm going to call this capitalized

strings so this could really be anything

I'm creating an object with this and

then I'm going to say what I'm importing

it from from and then I just put the

file name in this case it's just going

to be capitalized strings sometimes you

would have to put a dot slash if it's in

the same directory there and then I'll

make sure to put a semicolon at the end

so if you're importing everything you

always start off with import star as and

then this can be anything it can be at

any object name that you create and

they're going to put from and then you

put the file name in quotation marks

just like that

before when I talked about exports I was

talking about named exports there's also

something called an export default this

is a fallback export and it's often used

if you only want to export one thing

from a file so if you let's say I want

this to be my fallback export I'm just

going to only export this one thing from

the file I can just put export default

so now we know that this is just the the

fallback though basically just the one

thing we're going to export from this

file

so we talked about exporting a default

export now I'm going to show you how to

import a default export it's pretty much

the same as before but there is a slight

difference so we are going to pretend we

have a file called math functions that

has a default export name subtract so

let me show you how you would import

that so it's going to be import subtract

and we've already reached the difference

here if it's not a default export you'll

put curly braces around this but it is a

default export so we are not going to

use curly braces but we still have to

say what it what it's from

so from math functions okay so that is

how you would import a default export

well thanks for watching don't forget to

subscribe and remember use your code for

good

Comments