The 10 Days of JavaScript: Day 4 (Arrays)

by birtanpublished on July 3, 2020

[Music]

hello everyone welcome back to the ten

days of JavaScript here we are in day

number four and in this lesson we are

going to learn about arrays so what in

the world is an array well let's ask

ourselves in the English language how

would we use the word array well for

example a car dealership might say that

they have cars available in a wide array

of colors and that just means they have

a lot of available colors so when we

hear the word array just think of a

collection it doesn't matter what the

collection is of just that there's a

collection made up of multiple items

that's enough of an introduction now

let's jump right into the code in the

action and have you roll up your sleeves

and create your first array with

JavaScript code so go ahead and open up

code pen again you can create a new pen

or just use the same pen from the

previous lesson if you still have it

open so in a previous lesson we learned

how to store a single value like this

let my favorite number equal 7 however

what if we wanted to store multiple

numbers so plural a collection of

numbers well we could do this on a new

line I would say let my favorite numbers

equal the variable name doesn't really

matter you could make anything up but

let's set it to equal square brackets if

you're not familiar with these

characters it's directly to the right of

the P key so it's the same key as the

curly bracket key except this time we do

not hold down shift so in JavaScript a

pair of square brackets like this is how

you create an array inside the square

brackets we can include multiple values

so the number 9 and then comma and I can

include another value it's maybe too

calm

a comma 3 comma 7 comma 4 the idea is

that an array is a collection right so

now this variable my favorite numbers is

storing a collection of all of these

numbers in memory and arrays are not

limited to just numbers so on a new line

we could say let my words equal square

brackets for an array and then we could

say red comma orange comma yellow okay

so this array is a collection of strings

of text this array is a collection of

numbers or we could even create an array

that is a collection of objects so on a

new line we could say let my pets equal

an array so square brackets and then

instead of including a simple number or

a string of text within the empty pair

of square brackets let's include an

object so this pair of curly brackets

could represent a pet and then we could

include another pet by just saying comma

and include another object okay and then

just as a quick example we could build

out these objects so within the first

pair of curly brackets our first object

could be a cat and we could give it a

property of name so name colon and give

it a value of meows a lot after the

quotes for meows a lot we could say

comma and include another property

species colon and maybe give it a value

of cat right so we practiced this object

syntax in our previous lesson from this

curly bracket to this curly bracket

represents an independent entity or an

object in this case a cat named meows a

lot okay so this is the first pet in the

array then in our second pet within

these curly brackets we could create an

object name let's have it be a dog so

let's give it a name of barks-a-lot

after the quotes comma because we want

another property within this object and

say species : dog you get the idea okay

now let's ask the really important

question that you've probably been

screaming at your screen for the last

four and a half minutes and that is why

why would we do this why would we want

to create collections of values like

this well the answer is because

collections like these especially

collections of objects like this this is

really no different from how most apps

or websites work for example Facebook is

really just an array of post objects

that you scroll through Twitter is

really just an array of tweet objects

that you scroll through or your email

inbox is really just an array of email

objects that you scroll through so we

had an array of pet objects but imagine

if it was your email inbox instead of

name maybe this property would be from

and it would have the from email address

and then instead of species maybe this

would be two and then it would have the

two email address and then maybe there

would be another property named body and

that would contain the actual email

message itself the point that I'm trying

to make here is that a lot of

programming is really just working with

arrays for example if you were on

Facebook and you posted or created a new

post you're really just adding a new

item to the array of posts or if you

were in your email inbox and you deleted

an email you're really just removing an

item from an array so right now why

don't we practice adding a new item to

one of our existing arrays and also we

can practice removing an item from one

of our arrays let's start with adding an

item so imagine down here we want to

write a new line of code that maybe adds

the word green to our existing my words

array right so as of this moment the

array contains the words

orange and yellow so down here how can

we write a bit of code to

programmatically add the word green on

to the end of this collection well let's

begin by working with this variable name

so it's my words and then a dot to look

inside it and now right now you might be

thinking to yourself why a dot isn't a

dot or period how we look inside an

object and the answer is yes it is an

array is actually just a special type of

object it's not exactly the same type of

object as we learned about in our

previous lesson but it's a special type

of object that has access to its own

abilities or methods and these are

abilities and methods that we do not

need to add or create ourselves but

rather these are abilities that the

array just has out of the box they are

provided by the JavaScript language

itself so for example all arrays have

access to a method named push so we can

say my words dot push so we are calling

this function or method named push and

this is how we can add an item onto the

end of an existing array so within the

parentheses for this method or function

we can just include an argument of green

ok and now how can we test this out how

can we make sure that the array was

actually updated well in previous

lessons we used the alert annoying

pop-up to try and test something out but

now I want to show you something a bit

easier to use so our JavaScript

environment in this case the web browser

has an object named console and we can

say console dot log and anything we

include within these parentheses will

get output or logged to the console so

this is a great way to test your code it

lets you see your values visually so you

can make sure that it's working the way

that you expect so why don't we log the

my words array out to the console so we

can see what it can

so console dot log in the parentheses

just say my words okay and then how do

we actually see the console well if you

just right-click down here in the

preview part of code pen I'm going to

choose the inspect option

remember that opens your developer tools

and then just look for the tab named

console okay now you might need to make

a slight change to your code in order to

have code pen execute everything once

again so maybe get rid of this and just

consolelog the word hello and then if

you check your console let me make this

a bit easier to read there we can see

hello okay so now we can just change

this back instead of Hello what we

actually want to log out to the console

is our my words variable our array so

now if we check the console and here we

see the contents of our array and notice

the last item is green that means that

this line of code successfully added

green to the end of that array and this

is cool because we did not need to

create a function or method named push

the push method is just a native

built-in part of the JavaScript language

that arrays automatically get access to

and this actually brings us to one of

the neatest aspects of JavaScript so in

the JavaScript language almost

everything not everything but almost

everything is actually an object or at

the very least gets treated or

interpreted as an object so this is not

just the case with arrays but also even

simple strings of text or numbers each

type of data gets access to its own set

of super powers or abilities or we

should say functions or methods so for

example and this has nothing to do with

arrays but it's important to

understanding JavaScript so if down here

if we created a variable and named it my

name and set it to equal a string of

text in this case whatever your name is

yes this is just a simple string of text

right it does not look like the cat

object that we created in our previous

lesson however behind the scenes

JavaScript is actually going to treat

the string of text as if it was an

object and it's actually going to get

access to abilities or methods that are

specific to strings of text so for

example try this out with me we could

say console dot log and log out our my

name variable in the console there you

can see it however if we wanted all of

the letters in our name to be

capitalized check this out instead of

just my name we can say my name dot to

uppercase so strings of text have access

to a method or ability named to

uppercase and then we just include

parentheses to run or call that method

and if I check the console there we see

our name in all capital letters and

really quick just for fun I want to show

you that even the number datatype gets

access to its own special abilities so

let me delete these two lines of test

code where we said my name equals Brad

and let's say let my number equal seven

point eight nine so this is just a

simple number right it doesn't look like

an object however behind the scenes

JavaScript is going to give it access to

methods or abilities related to numbers

so on a new line if we log this out to

the console console dot log my number

there we see the number seven point

eight nine and now imagine if we wanted

to round that to the nearest whole

number well in JavaScript we could just

say my number dot to fixed so

parentheses to call or run the two fixed

method and if we check the console seven

point eight nine got rounded up to eight

cool now if the last three

did not make perfect sense that's okay

it was a bit of a tangent but the big

picture idea is simply that different

types of data have access to different

abilities or methods now back to the

topic at hand which is arrays so let's

delete these two lines of code for my

number okay and back on track we've

learned how to add an item to an

existing array now let's learn how to

remove an item from an array so let's

imagine that down here we want to write

a new line of code that maybe removes

the word orange from the my words array

so down here we can just say my words

dot and there is a method named splice

and the splice method lets us remove a

particular item from an array within the

parentheses we want to pass this method

to arguments so just as placeholders I'm

going to say a comma B now the first

argument is the index of which item you

want to get rid of so what does that

mean well if we look at our array up

here red orange yellow and each item is

represented with a numerical index now

you might think that red would be one

orange would be two and yellow would be

three but arrays and JavaScript are

zero-based which really just means we

start counting at 0 instead of 1 so red

would have an index of 0 and then 1 and

then 2 so if our hypothetical goal is to

remove orange orange has an index of 1

right 0 1 2 so down here in splice for

the first argument let's say 1 and then

the second argument is how many items

you want to remove starting from that

index so we're just going to say 1 we

only want to get rid of one item and now

let's test this out let's see if it's

doing what we expect it to do so let's

log out our array to the console console

dot log and let's just lie

out my words our array and now if I

check the console perfect

we just have red yellow green now

practice makes perfect and I know the

idea of the numerical index might be

confusing so instead of removing orange

what if we wanted to get rid of red well

red is the first item so it has an index

of zero so down here in splice we would

say zero and we still only want to

remove one item starting from that index

if we check the console we see that red

got removed perfect and this concept of

the numerical index is also how we can

access the value of a particular item in

an array so for example let's take our

my favorite numbers array and let's

imagine that we wanted to access the

value of the third item in the

collection so we know that it's a value

of eight but if we want it to access it

programmatically down here at the bottom

we could say console dot log and the

variable name is my favorite numbers my

favorite numbers and then to look up an

item in an array by its index we just

include a pair of square brackets after

the array and then we include the

numerical index so if we wanted the

third item we don't type three because

remember arrays are zero based so the

third item would be to write zero one

two so if I check the console cool there

we see the number eight if we want it to

get the fourth item from the array we

could just change this from a 2 to a 3

you get the idea let's practice

accessing an item in an array one more

time let's imagine that we want to

access the species of the second pet in

our my pets array of objects so we know

that that's a value of dog but how would

we access that programmatically so down

here at the bottom let's say console dot

log start with the my pets array square

brackets and we are interested in the

second

item in the array so zero would be the

first item one would be the second item

this would retrieve us the entire pet

object but then we want to look inside

that object for the species value so if

we check the console cool

there we see dog now let's bring this

lesson to a close and explain why arrays

are so important so in addition to

adding and removing items from an array

it's also very easy to make the computer

sort an array alphabetically or sort by

some other quality or perhaps most

importantly of all computers are really

good at automating tasks so once we have

a collection or an array it's super easy

to make the computer do something once

for each item in that array for example

maybe displaying it visually on to the

webpage and then remember at the end of

our previous lesson we learned how to do

something every time the user clicked

anywhere on the page well you can

imagine that we can watch for clicks on

a particular button on the page and then

in response to that event we can maybe

add an item to an array or remove an

item from an array or sort the array or

just work with the array in some

interesting way that the user wants okay

now at this point I do not expect you to

be an expert on arrays and you don't

need to have remembered everything in

this lesson all you need to know is that

an array is a collection of items and

that arrays have access to different

methods like push and splice that let us

manipulate or work with the array if

that makes even a little bit of sense

than you're on track and you're ready to

move on to the next lesson up next we

are going to learn how to make decisions

in our code this is going to open up so

many doors so let's keep things rolling

and I will see you in the next lesson

the ten days of javascript is the first

chapter from my upcoming premium course

full stack javascript from scratch I'm

making these first 10 or 11 videos

freely available on YouTube and so for

the next 10 days I'm going to upload one

new video each day so stay tuned or if

you're watching this in the future all

the lessons are up so feel free to binge

watch the full premium course is not

available just yet but if you subscribe

to this channel you'll be notified as

soon as it's out or you're watching this

video in the future it's already

available enjoy

[Music]

Related Videos

Be the first to comment “The 10 Days of JavaScript: Day 4 (Arrays)”

Your email address will not be published.

There are no comments yet.