Javascript Tutorial For Beginners - #4 Javascript Arrays & Loops

Sharing buttons:

so we've been learning JavaScript and I

want to point out again that's pretty

much everything you've learned so far is

programming in general almost every

computer programming language is gonna

have variables if-else statements

comparison operators functions and what

we're about to learn which is arrays and

loops and I've got one more lesson for

you here we're gonna cover arrays and

loops and then you're going to be able

to do some fun stuff in the browser to

change your webpage so let's just get

into it once again I'm using the main

J's file which I've added onto my

index.html and we're going to be doing

our coding in here so an array is simply

a list of items I can go vary my list

equals and then I do open and close of

square brackets now whatever I put in

here is a part of my array so I can go

apples oranges bananas and so now I've

got my console open over here again

because I want to interact with this

list so if I go my list not defined let

me go ahead and save this oh I didn't

turn on live reload for this lesson I

apologize save refresh my list there you

go you can see we've got apples oranges

and bananas now if I want to access a

specific item on this list I can go my

list zero to get these zero entry one of

the things you learn in computer science

is that web developers and just

developers in general pretty much count

from zero zero one two and that's kind

of a long explanation as to why so I'm

not going to explain it but the zero

index would be apples the one index or

the first index would be oranges and the

number two index would be bananas so if

I want to access my list one that's

oranges and bananas would be my list too

if I go my list three that's undefined

because it hasn't been defined yet so

let's go ahead and add that in my lists

three which you can add after you've

created the list equals pineapples

let's go ahead save it's gonna refresh

my list three now equals pineapples

let's say I want to change index zero to

be something else my list 0 equals

watermelon so there you go so now if I

were to go my list I've added index 3

and I've changed index 1 that's

basically how you're going to change

values and it's important to note that

these values don't have to be strings

arrays can hold any type in JavaScript

they can hold strings numbers functions

even other arrays so I can go my list

equals apples the number 12 and let's

create a function up here go alerts hi

that's the one I've been using might as

well stick to it I'm just gonna add go

in there you notice go is a variable

name because functions are actually

variables as far as JavaScript is

concerned so now if I look at my list in

the console apples 12 and the function

go so that's pretty much an example of

the fact that arrays can hold anything

and if I actually want to access this

function and call its well I can either

call go which is going to alert or go is

in my array so I can go my list 2 and

then I can run it just like I can a

function and that's exactly the same as

changing these letters to geo so I'm

accessing it and then I'm calling it so

that's kind of you know it's a little

quirky you really wouldn't do that

but once again arrays can hold anything

or I can make this array hold a new

array of will Laura there we go so now

if I look at my list

it's got apples 12 and an array of names

will as the zero index Laura is the one

index great now arrays have what's

called what are called methods or better

yet actions that you can run on a race

let's go back to apples oranges bananas

let's save that let's get rid of you so

I can go my list dot shift and that will

give me the first entry off of my list

and it will actually pull it out of the

list so now the list has one less entry

if I look at my list now apples has been

pulled out and oranges and bananas are

all that remain so now I can go my list

shift again so I could say their current

fruits equals my list shift there we go

now current fruit will equal oranges

because that was at the front of the

stack in my list only has one item left

so once again shift pulls your first

item out actually removes it from your

list and passes it to whatever your

function passes it to whatever variable

is on the other side of your function

let's go back let's refresh my page my

list is now back to normal there's also

a pop method pop is going to pull the

last value off of the list and it's

going to actually remove it so now my

list has two entries the first and the

second and bananas is gone now there's

also a very cool method called for each

and for each you pass it a function and

it's automatically going to put two

arguments into this function for you

it's going to give you a value and an

index for each item it's going to loop

through this and it's going to run my

function then it's going to run this

value run the function and then it's

going to take this value and run the

function so I can console.log Value

Index and I should see three console

logs apples zero oranges one bananas two

or a more useful way of doing it would

be alerts I have plus value plus in my

shopping bag

I have apples in my shopping bag I have

oranges in my shopping bag I have

bananas in my shopping bag

now one quirk with JavaScript is older

browsers are not going to have all the

newer methods for each is a newer method

and not every browser has it so if

you're running this on an older browser

you might get an error message that says

for each is not defined and so what

you're actually gonna have to do is

you're gonna have to use an older way of

looping through or iterating through

this list so let's get into now the

second part of this lesson which is

loops loops are well they're just what

they sound like they're ways of looping

through things over and over again and

there's three kinds of loops in


there's the while loop a do loop and a

for loop let's look at each one of these

what's it doing who knows so let's do

the while loop they're all very similar

by the way they just have a little bit

different way of going about it as long

as what's in here is true Y will execute

whatever's in this block whatever's

between these curly braces so what I

could do is I could say ver x equals

zero and while x is less than ten lets

console.log tried it

let's also spit out x just so we can see

and let's say x equals x plus one so now

it's going to make it if it's zero it's

going to bump it up one if it's one it's

going to bump it up to two let's see

what happens we tried it when x was zero

and then we bumped it up now we tried it

in x was 1 try it when x was two we

tried it all the way up till x was nine

and when x was ten we didn't try it any

more the while stopped it did what's

called a break and so as long as this is

true again it's going to run this block

of code another way we can simplify this

is we can just go x plus plus which is

code for and bump it up one more if it's

zero make it one if it's one make it two

another thing you can do it is javis in

JavaScript is you can do - - which

basically -

one from whatever it is so x + + there

we go that's going to do the exact same

thing so that's a while loop there's

also a do-while loop or I do loop you

don't see this one is often and that's

basically the same thing so I'm going to

go console.log tried it times and then

I'm going to do same thing x + + and I'm

going to go wild x is less than 10 exact

same thing and you'll notice it does the

exact same thing try it at 0 tried it 1

tried it to try it 3 the difference

pretty much the only difference between

do and while is do is going to always

run at least one time and then it's

going to do a check to see if this is

true or false so you're guaranteed one

execution and it might stop after that

whereas while is going to run the check

first and if that's false then it's not

ever going to run if it's true it's

going to run over and over and over

again until it's false so that's doing

while they're very very similar so the

last loop is the for loop and the for

loop is the most common one you're gonna

see in JavaScript but unfortunately it's

the most complicated one if you're just

starting out it's not really hard per se

it's just not quite as simple as the

while loop and the do-while loop so what

you have in the for loop is you have 3

arguments you have your setup you have

your comparison and then you have your

change this is what's going to happen

every time it goes through the loop so

here's kind of the common for loop that

you're going to see you're gonna see ver

I equals 0 and then you're gonna go I

less than 10 so as long as I is less

than 10 that's our comparison that's

what would be in our while and then

we're gonna do I plus plus every time so

we're starting off we're gonna run this

once we're gonna check is I less than 10

yes it is we're going to run our loop

and every time we run our loop we're

going to bump I up one more time and so

let's console.log this I

is and then let's do I let's run this

and see what happens you see that I is

currently zero we started off I is zero

and then it's gonna run my block and

then it's gonna bump I up one more time

then it's gonna run it again

hey is I less than 10 nope I mean guess

it is run the block bump I up one more

time is I still less than 10 yep

run the block bump it up that keeps

happening until I is no longer less than

10 and then it breaks so this is useful

because we can actually make I the

length of our array I'll kind of show

you what we mean here let's make my list

and then we're almost done with our

lesson book and I'm using capital

letters now nice these are proper proper

nouns there we go so I have apples

oranges and bananas so I'm gonna say I

equals 0 and as long as I is less than

my list dot length GTH there you go then

I'm going to do that so now it's going

to run three times let me show you what

my list dot length is my list dot length

is three because I have three items in

my list now that seems a little strange

because I have a zero index one index

two index you would think length would

be two but length is three because when

it comes to dot length we're counting

like a normal human would count three

items in my list so three items a 0 a 1

and a 2 index I know that's confusing

but whatever that's JavaScript so as

long as I is less than the length of my

array I'm going to loop through and so

what I can do now is I can go

console.log my list I so the first time

around that'll be 0 second time around

it'll be 1 second time around it'll be 2

and there is no next time around I think

I said first second second first second

third you can see apples oranges bananas

and then I'm done so I can do the exact

same thing alerts you have

my list dot I or brackets I in your

basket so there we go you have apples in

your basket you have oranges in your

baskets and you have bananas in your

basket so that's a for loop now you can

pretty much copy and paste this code and

that's something that you can use

anytime you want to iterate an array

that's the most common for loop I'll

usually when I started off I copied and

I pasted this away and I saved it

because I just couldn't quite remember

the order in the syntax where these

commas were these semicolons it's

something you just have to use several

times to really get comfortable with

save this somewhere as a snippet of code

that you reuse later

that's arrays that's loops and the next

list lesson we're going to use functions

arrays and loops to do some fun stuff