Exercise Monday

Goal: In the lessons on arrays, we learned:

  • Arrays can contain numbers, strings, variables, expressions and other arrays.
  • Arrays have methods like Array.prototype.pop(), Array.prototype.push(), Array.prototype.shift(), and Array.prototype.unshift().
  • We can access (or edit) an element from an array using bracket notation.

Familiarize yourself with arrays by completing the exercises below. First, we'll practice creating and manipulating arrays in the JavaScript console, then we'll move on to implementing them into a small project using the HTML and jQuery concepts we learned in the last section.

Warm Up

  • What is a pointer? When might we see one when working with JavaScript arrays?
  • How can we use square bracket notation to isolate a single element in an array? What does this notation look like?
  • What is the difference between Array.prototype.pop() and Array.prototype.push()?
  • What types of objects can be placed into a JavaScript array?


Array Practice in the Console

Play around with arrays of your own by completing each of the following in the JavaScript console:

  • Make an array of your siblings' names or your favorite movie characters' names.
  • Make an array of your parents' names.
  • Combine these two arrays using Array.prototype.concat().
  • Add your pets' names using Array.prototype.push().
  • Reverse the order of the array.
  • Access one of your parents' names using the square bracket notation.
  • Update the name of one of your parents using the index and square bracket notation.
  • Check out methods from the MDN (stick to the accessor and mutator methods sections). Try at least five of them.

Favorite Things Webpage

When you're comfortable using arrays in the console, move on to implementing them into a full project:

  • Build a page with a form containing input fields where users may enter several of their favorite things.
  • Then, write code that gathers each of these form input values and places them into one array.
  • After this is done, use your site to practice targeting and moving elements between arrays:
    • Use square bracket notation to access the second, first, and third elements of the original array of favorite things.
    • Then, use push() to add only these elements to a brand new array.
    • Finally, display this new array in your page's HTML as list items in a <ul> tag.

Lesson 11 of 42
Last updated May 26, 2022