KODE WITH KLOSSY

Welcome to Introduction to Arrays!

KEY POINT

Let's write down the learning goals and technical vocabulary for today's lesson!

🎯 LEARNING GOALS

Understand what an array is and why they are useful

Use JavaScript syntax to declare and modify an array

📗 TECHNICAL VOCABULARY

Array

Collection

Element

Index

💪 WARM-UP

In the repl below, declare a variable for 10 scholars in your cohort. The variable names should be something like scholar1, scholar2, etc. and the values should be strings of their first names. 

Make sure you are editing the .js file in the file tree and looking at the console for output.

Code check! 👇

Random Elements

Sometimes, we want to pull an element out of an array at random - have any of your teachers ever used popsicle sticks to decide who to call on? That’s a real-life example. We can do the same thing with programming! JavaScript gives us a tool called Math to do advanced math, like square roots, logarithms, etc. Included in that are some options on how to use it. We’ve got: Math.random() - returns a random decimal between 0 and 1 Math.floor(number) - returns the value of a number rounded down to the nearest integer Let’s work on generating a random number between 1 and 20.



THINK TO YOURSELF

Where might TikTok and Instagram use arrays?

Write this down in your journal!

Access an Element

Each element in an array is automatically assigned a number called an index. This index can be used to access a specific element inside the array. Indices begin at 0 and count up. If we look back at our trending array, the following would be true.



Length

We can also check how many elements are in an array with the .length property



Updating Elements

We can also update elements with the square bracket syntax we looked at earlier. We access the index value that we would like to change and then reassign a new value for that index with a =. var trending = ["@thecardguy", "@spencerx", "@avani", "@lorengray"]; trending[1] = "@cosette"; console.log(trending); //=> ["@thecardguy", "@cosette", "@avani", "@lorengray"]



Adding Elements

A common way to add something to an already existing array is to use the push() method, which will add an element to the end of the array. var trending = ["@thecardguy", "@cosette", "@avani", "@lorengray"]; trending.push("@jamescharles"); console.log(trending); //=> ["@thecardguy", "@cosette", "@avani", "@lorengray", "@jamescharles"] In the code snippet above, .push() is called on the trending array. We add to the array by giving .push() an argument of the new element we want to add. In this case, it was the string of @jamescharles.



Removing Elements

There are a few ways we can remove elements from an array. Most often, we either want to remove the first or last element. To do this, we have the pop() and shift() methods. Check it out: var trending = ["@thecardguy", "@cosette", "@avani", "@lorengray", "@jamescharles"]; trending.pop(); console.log(trending); //=> ["@thecardguy", "@cosette", "@avani", "@lorengray"] pop() was called on the trending array, and it removed the last element from the array.



👩‍💻 Let's get coding! Open up a repl with the name "introToArrays" and play the video below.

TRY-IT #1 👩‍💻👉

In the repl.it, create a variable that stores an array of at least 4 strings - you choose what the content is about. The variable name should describe the type of data those 4 strings hold.

 

Write a series of console.log() statements: print out the first element, the last element, and then the second element.

Please note: the following carousel has 4 videos. Please press the right arrow to go onto the next video.  

Access an Element

Each element in an array is automatically assigned a number called an index. This index can be used to access a specific element inside the array. Indices begin at 0 and count up. If we look back at our trending array, the following would be true.



Length

We can also check how many elements are in an array with the .length property



Updating Elements

We can also update elements with the square bracket syntax we looked at earlier. We access the index value that we would like to change and then reassign a new value for that index with a =. var trending = ["@thecardguy", "@spencerx", "@avani", "@lorengray"]; trending[1] = "@cosette"; console.log(trending); //=> ["@thecardguy", "@cosette", "@avani", "@lorengray"]



Adding Elements

A common way to add something to an already existing array is to use the push() method, which will add an element to the end of the array. var trending = ["@thecardguy", "@cosette", "@avani", "@lorengray"]; trending.push("@jamescharles"); console.log(trending); //=> ["@thecardguy", "@cosette", "@avani", "@lorengray", "@jamescharles"] In the code snippet above, .push() is called on the trending array. We add to the array by giving .push() an argument of the new element we want to add. In this case, it was the string of @jamescharles.



Removing Elements

There are a few ways we can remove elements from an array. Most often, we either want to remove the first or last element. To do this, we have the pop() and shift() methods. Check it out: var trending = ["@thecardguy", "@cosette", "@avani", "@lorengray", "@jamescharles"]; trending.pop(); console.log(trending); //=> ["@thecardguy", "@cosette", "@avani", "@lorengray"] pop() was called on the trending array, and it removed the last element from the array.



TRY-IT #2👩‍💻👉

For this, you will use the array you wrote in the previous Try It.

 

Practice accessing specific elements. Make sure to console.log() to verify you are accessing what you think you are.

 

Now, add two new elements into your array. Use a console.log() to make sure they have been added.

 

Lastly, remove at least two elements from your array. Again, make sure they have been successfully removed by printing to the console.

⚡️ RANDOM ELEMENTS

Please note: the following carousel has 2 videos. Please press the right arrow to go onto the next video.  

Random Elements

Sometimes, we want to pull an element out of an array at random - have any of your teachers ever used popsicle sticks to decide who to call on? That’s a real-life example. We can do the same thing with programming! JavaScript gives us a tool called Math to do advanced math, like square roots, logarithms, etc. Included in that are some options on how to use it. We’ve got: Math.random() - returns a random decimal between 0 and 1 Math.floor(number) - returns the value of a number rounded down to the nearest integer Let’s work on generating a random number between 1 and 20.



THINK TO YOURSELF 🧠

Considering this section on selecting random elements from an array, answer the following in a notebook:

 

  1. What does Math.random() do?
     

  2. Why did we choose to multiply Math.random() by 20 for this example?
     

  3. What does Math.floor() do?
     

  4. Why do we have to pass an argument, or put a number inside the parenthesis for Math.floor()?
     

  5. Is it possible for this function to ever return the same number? Why or why not?

Check your answer! 👇

Access an Element

Each element in an array is automatically assigned a number called an index. This index can be used to access a specific element inside the array. Indices begin at 0 and count up. If we look back at our trending array, the following would be true.



Length

We can also check how many elements are in an array with the .length property



Updating Elements

We can also update elements with the square bracket syntax we looked at earlier. We access the index value that we would like to change and then reassign a new value for that index with a =. var trending = ["@thecardguy", "@spencerx", "@avani", "@lorengray"]; trending[1] = "@cosette"; console.log(trending); //=> ["@thecardguy", "@cosette", "@avani", "@lorengray"]



Adding Elements

A common way to add something to an already existing array is to use the push() method, which will add an element to the end of the array. var trending = ["@thecardguy", "@cosette", "@avani", "@lorengray"]; trending.push("@jamescharles"); console.log(trending); //=> ["@thecardguy", "@cosette", "@avani", "@lorengray", "@jamescharles"] In the code snippet above, .push() is called on the trending array. We add to the array by giving .push() an argument of the new element we want to add. In this case, it was the string of @jamescharles.



Removing Elements

There are a few ways we can remove elements from an array. Most often, we either want to remove the first or last element. To do this, we have the pop() and shift() methods. Check it out: var trending = ["@thecardguy", "@cosette", "@avani", "@lorengray", "@jamescharles"]; trending.pop(); console.log(trending); //=> ["@thecardguy", "@cosette", "@avani", "@lorengray"] pop() was called on the trending array, and it removed the last element from the array.



💪 PRACTICE

Declare a variable called following that stores an array of your top five favorite accounts to follow on social media, in strings.​

Change the value of one element in the array

​

Remove the last account of the array

​

Add another account to the array

Print the value of the first element of the array

​

Print one account to the console, at random.

WITH THANKS TO:

#KODEWITHKLOSSY

Kode With Klossy is a project of New Venture Fund a 501(c)(3) charitable organization

Click here to view our Privacy Policy and Terms of Service.

© 2019 by Kode with Klossy. Proudly created with Wix.com