( music playing )
- Hi there. -
Hey, it's Karlie Kloss.
I'll be teaching coding this week
on "Celebrity Substitute."
How can you use code to win over
even your most difficult friends?
Believe it or not, it's actually possible.
My name is Tara Tran, and I teach Computer Science in New York City.
Today we'll be learning about how to use code to organize data.
But teaching from home has been a little bit difficult,
so joining me to teach this lesson
is a very special celebrity substitute, Karlie Kloss.
Hello! I'm your celebrity substitute Karlie Kloss.
- Hi, Karlie! - Hi, Tara.
I'm so excited to help you out in teaching this lesson today.
In our previous lesson, you had the best, scarily good robot voice.
( robotic voice ) I'm Robot Karlie.
Oh, thank you. Yes, Robot Karlie at your service if you need.
In our last class, we introduced the concepts
of thinking like a computer and creating functions
to avoid repeating work unnecessarily.
Today we're gonna show you how you can use arrays,
a really useful way of organizing data in coding.
Is that a jar full of cheese?
- Yeah, why? - I don't think that's what jars are for.
I beg to differ. Jars are just containers.
I can put anything in them.
The same goes for any of these cabinets and drawers.
I can use them to store anything I want.
And I can change what's stored in them whenever I want.
All of these cabinets and drawers and jars
are real world examples
of a coding concept called a variable.
A variable is a storage location for information within a program.
Variables come in a lot of forms.
They can be used to store numbers or text
or lots of other more complicated types of data.
When you create a variable in code, you give it a name.
Just like I might decide to call this jar "jar,"
because why not?
You can also assign a value to it,
which is the same thing as putting something into this jar.
Right now, the name of my jar might be "jar,"
but the value of it is "cheese."
I can also easily change the value of this variable "jar"
but dumping out the cheese and filling it with fortune cookies.
Now if I wanted to check on the value of "jar,"
I would see that it is "fortune cookies"
because that's what it's currently holding.
What about these other ingredients that I see on your island?
- That's quite an array. - These are all ingredients
to my famous Karlie's Kookies.
I could treat every one of these containers
as a separate variable with a different name
and their values would be whatever they're holding.
Karlie, did you eat some milk chocolate chips just then?
Only dark. I'm a dark chocolate kind of girl.
But, yes, I'm eating all the props.
But because these are all part of one group,
the ingredients for my cookies,
I'd rather just keep them together as one long list
and give that list a name.
I want to call this whole thing "cookie ingredients."
And when I do that, I've just created
what we call in coding an array.
As array is an ordered list that a coder can use
to collect multiple items or variables together
and easily manipulate them without losing track
of each item within the array.
It's kind of like if your friend rolled up to your house
and instead of saying...
...you can just say, "Nice car."
Exactly. We actually use arrays
all the time without realizing it.
Like when you make a music
or video playlist, that's an array.
Think about how you can add and remove videos
or reorder them.
These are all things you can also do
with arrays in coding.
Or when you shop online,
the website is often using an array
to store and keep track of your shopping cart.
So now that we understand some other real world applications of arrays,
let's get back to the one in front of you.
You've decided to give the name "cookie ingredients"
to this array of ingredients for your cookies.
An array isn't just a pile of items thrown together.
It keeps track of where all of its elements are
in relation to each other.
Because each element has a number called an index.
That index represents where it lives in the array.
Like your home address.
If the array is the street,
the index is the house number.
When we put all of these recipe ingredients
in an array in code,
you can picture them being laid out like this.
Each ingredient is a separate element in the array.
In Computer Science, we count things like this
starting with an index of zero.
So entry one is actually the second thing in the list.
That sounds confusing at first, I know. Trust me.
But it makes a lot of sense in a lot of ways.
We start number lines at zero in general.
Imagine you're running a marathon.
When you take off from the starting line,
you start at zero miles, not one.
Although it would be nice if you started at one.
Each number tells you how far you are from the start.
So the first entry is index zero,
and then index one, and it continues like that.
So to see how you can manipulate this recipe array using coding,
Karlie, I'm going to have you be our oh, so accommodating host and cook,
and I'm gonna be the friend you're cooking for.
Just to warn you, I can be a real picky eater.
Bring it on.
( music playing )
You look like you've got a lot of ingredients for these cookies.
Can you tell me exactly how many different things there are?
Yes. And one of the easiest operations
you can perform on an array is finding the number
of elements it contains-- its length.
Oh, so the same command that an online store might use
to display the number of items in your shopping cart.
Exactly. So to answer your earlier question,
the recipe has 12 elements.
A length of 12.
And looking at the recipe now, how is it?
All ready to go? Or are you feeling picky?
Well, I do love nutmeg. Can you add that?
Okay. A little unusual for this cookie recipe,
but I guess it could work.
All right, I'll grab the nutmeg,
and if you're coding that,
you can push a new item onto the end,
which also increases the array's length by one.
So cookiesingredient.push ["nutmeg"]
So now we have nutmeg
and the number of ingredients is now 13.
- Good to go? - Not quite.
I don't want those dark chocolate chips.
Do you think we can swap them for milk chocolate?
Of course. Let's look at where the dark chocolate chips
currently sit in the array.
You can see that they're at index six.
Knowing that, you can use a command called "splice"
to change the value that sits at that location in the array.
To use splice, we specify the index
where we want to insert something,
the number of items to be replaced,
and also the actual items we want to insert.
We know we want index number six
and we're overriding one item, dark chocolate,
so we can send the splice command to the number six,
the number one, and the actual value,
milk chocolate.
And there we go.
The dark chocolate chips
have been replaced with milk chocolate.
So, Tara, can I take this array
and use it to start baking now?
Yes, Karlie, you absolutely can.
So, as you can see, you can use code to win over your friends.
In that demonstration, we learned that variables
are named places to store information
and that a list of them
is easiest to handle as an array.
We learned how to find an array's length
and how to add or change specific elements in it
using commands like push and splice.
All that's left is to put these in the oven.
I know I've been a really picky eater,
but I am craving these cookies.
Am I still invited over?
Absolutely. Tara, you're always welcome.
Class is over, and you did great.
Want to get some extra credit?
Hit the subscribe button so you'll never miss
a "Celebrity Substitute" lesson right here on YouTube.