5.2: Associative Arrays in JavaScript - Programming from A to Z

Hello in this video I'm going to talk
about something called, how to clean

your glasses. Theres a horrible smudge on
my glasses, this is what I look like

without glasses by the way. I'm going to
talk about something called an associative

array. Forevermore associative arrays will
be associated with me cleaning my glasses

what are you gonna do? What is an
associative array. Ok lets talk about

first, and why do we need one? First
of all, the context here is I want to do

a word counting application. Meaning,
I want to have a list of every word thats

in a document and a number associated
with that word, a list of pairs of things.

Word, number, word, number, key, value
key, value.This is sort of where I'm going

But first before I even get there, lets
talk about what is an array. Which if

you're watching this video hopefully
you're familiar with, if not don't worry

life will be ok. I might refer you to one
of my videos about arrays. But an array is

ultimately just a list of things, ordered
list of stuff. Look at this marker its

excellent! So maybe I might have some
numbers like 3, 4, 19, -7, 29. Now this

is an ordered list, meaning every single
number has an index. And when you count

with arrays in programming, generally
speaking you start counting with 0.

0,1,2,3,4. So here is my array, 3,4,19,-7
29, ordered in order 0,1,2,3,4.

So this is a regular array, a list
ordered list. An Associate array also

by the way if you're hearing a strange
buzzing in your ear its not just you its

construction thats happening right outside
the window over there while I'm recording

this video. But this is life in new york
city, people like to complain about

construction happening in their backyard
but if you live here, you signed up for it.

Associate Array! Lets say I have these
same numbers, I'm gonna draw them like

this because even though I'm kinda giving
them spatial orientation it appears they

may have some sort of order, this new
thing I'm going to talk about, Associate

array is not really ordered. So the way
that i access, if this is called Array.

If this is a variable storing that, the
way that I would access the number 19.

Would be array index 2. With an
associative array, this is an associative

array, I'm associating numbers with
numbers, but really what I'm talking

about with an Associative array is being
able to associate a key that is not just

an index with a particular number. That
key in many cases is a string. And all

the examples I'm going to show you use a
string. Of course the key can be something

other than a string, a string of text. So
the idea is here what if instead of

referring to each of these by their index
I could name them. So this one is rainbow

And this one is unicorn. This one is
purple, this one is heart, Oh I ran out

of my happy words. This one is happy.
Happy little associative array. For all

you wanting me to make Bob Ross references
So this is the idea, what if I could

instead of having an ordered list with
indexes, what if I could name all these

elements. If this is my associative array,
assoc, my associative array, I would say

Associative index unicorn. I could put
the name in the square brackets to

indicate thats how I want to look up
this particular value. So why is this

useful? I think I need to make a separate
side video related to this one I'm doing

right now, to discuss when would you use
and ordered list, and when would you use

an associative array. In this case, of
word counting you can clearly see why

I might want to use an associative array.
because i want to keep track of words

and the number of times they appear
in a given document. That noise is really

driving me crazy. I have to zen out for a
second. Lets just say what I wanted to do

was pair words with numbers. I could
say something like unicorn colon 16 comma

rainbow colon 2 comma heart colon 10.
You could see how this like a nice list

of key value pairs, this being the key to
look up a particular value, 16.

Lets put some more syntax on this, Oh
I'll just put a curly bracket here, and

I'll put a curly bracket here and I'll say
var dictionary equals this. If you're

looking at this what you'll notice is
thats the syntax of a Javascript object!

So a javascript object is exactly this.
I think i have a video that talks about

what is a javascript literal object.
I think what i say is its a collection of

name value pairs. So in fact we can simply
use the fact that a javascript object

natively is a collection of name value
pairs to act as a dictionary. Now there

are some tricks I'm going to employ to
make it usable. How do i sort its order,

javascript objects don't actually have an
order to them. How do i iterate over all

the possibilities? We're going to see that
as I build out the coding challenge, doing

a word counting application. But lets just
examine, theres one piece of this which

is kind of crucial that I want to examine.
Let me go back over to the code for a

second. I'm going to go over to a browser
instance, because I'm going to work just

in the developer console to show you
what i mean. Lets say I want to create

this object called dictionary. The first
thing I can do if I want to create an

empty object is I can say open curly
bracket closed curly bracket. Let me

make that a little bit bigger for you,
open curly bracket, closed curly bracket.

Now i have an object which is empty. What
if i want to say the number of times

rainbow appeared in that dictionary is 12.
Well you know I can say dictionary dot

rainbow equals 12. Now if i look at the
dictionary you can see, let me just do

this again, you can see look, the object
now has the word rainbow associated with

the number 12. Lets say Im trying to
track, what i actually want to look for

is the number of times a writer uses a
contraction, like can't or don't versus

the longer way of writing that out. Can
not or do not. Dictionary dot can't equals

15 because the Author that I'm analyzing
used the word can't 15 times.

Uncaught syntax error, invalid or
unexpected token, so this seems to

have broken my idea. Because thats
an invalid variable name. But I have

something that might want to keep
track of its count. Right? I want to know

I also might want to know how many times
did the area code 917 appear in a text

Thats not a valid variable name either
I don't think,Right? So if I come back

over here and say dictionary dot 917
equals it appears 25 times. Thats also

invalid. One of the things thats really
important here in how things work in

Javascript, is that you can access
the properties of an object in two ways.

I can say dictionary dot heart equals 15
or I can say dictionary string heart

equals 15. These are equivalent. The
heart property of dictionary has the value

15, or the hart property in quotes in
square brackets of dictionary has the

value 15. the question becomes well
this maybe looks more syntactically

concise, and it might be what you're
familiar with. I make a particle system

particle dot x its 20, particle dot y,
particle dot speed. But this is actually

something, this is the syntax we'll
want to use for word counting applications

Why? because this will work with something
like can't or 917. We can make any string

inside here and set it as a valid value
of the dictionary. And in fact even more

important what you're going to see that I
need to do in the word counting coding

challenge, is I'm gonna need to have a
variable. I'm reading a text in, so I

don't actually have that string in my code
its in a variable. So if I have a variable

name I can't say dictionary dot variable
name I have to say dictionary bracket

the variable name if its a string in that
variable. Let me make that more clear by

showing you this couple steps through
again here in the console. So first, lets

confirm that it works, if I say dictionary
917, equals 15 that works, and I say

dictionary can't, now notice I switched to
using double quotes, because theres a

single quote in can't and so it'll get
confused it I use single quotes and a

single quote, but I can just use double
quotes and it'll fix that problem.

I could do this, and now lets look at the
dictionary and you can see, look what

its got, its got 917 and its got can't
in it. So you can see here that its

able to keep those as names of the
properties if I pass them in on a

string. Now let me talk about what I mean
by a variable. Lets say var word equals,

did i do unicorn yet, I don't think so.
Var word equals unicorn, well what

happens if I say dictionary dot word
equals 99. Whats gonna be in there?

Is it gonna be 99 associated with the
string unicorn or is it gonna be 99

associated with something called word.
Lets see what happens, ok now if I look

at dictionary, unicorns not in there, it
thinks word is the string. It doesn't know

that word is that variable, its like I
can't even explain it because it doesn't

make sense in my head even though
it seems like maybe that would work.

I have to use that other syntax, because
what I want to do is say var word equals

heart then I can say dictionary bracket
word, now its gonna evaluate the property

of that variable as heart and be able to
set that number. I could say 100 and I

could look at my dictionary again and we
could see there are all the words and

their associated counts. Heart is in there
at 100, thats the thing I'm gonna need

to do because I'm reading in a text
and pairing the values with it.

Ok so i think this defines basically the
idea of what an associative array is,

and how you can use one in javascript.
Now how you iterate over it, how you

might sort it, how you kind of mess with
it, these are things that I will show you

in the next video which is gonna be a
coding challenge of doing a word

concordance. Thanks for watching and
see you soon.