declare

5.2: Associative Arrays in JavaScript - Programming with Text



Sharing buttons:

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.

Subtitles by the Amara.org community