Thursday-Friday: Arrays Copy

Introduction to Arrays

As the scripts get more complex we are going to need a way to deal with large quantities of data. Fortunately JavaScript, apart from numbers and strings, has a couple of data types that are used for just that. An Array is simply an ordered collection of values (Strings, Numbers, other Arrays, etc.).

Learning Objectives

  • What is an array.
  • How to:
    • create an array.
    • finding the length of an array.
    • Accessing and modifying array items.
    • Adding and removing items.
    • Accessing every item in your array.
  • Zero indexed array.
  • Arrays’ methods -> .shift(),.unshift(),.push(),.pop(),.slice(),.splice() and others.

Study

Watch this short introductory video on Arrays by Code.org:

Duration: 4 minutes

  1. Carefully go through the JavaScript Arrays tutorial at W3Schools and make sure to practice the concepts on your own coding environment. Try as many examples as possible for every concept mentioned in the tutorial and don’t forget to complete the quizzes at the end of the page. (Estimated reading and practicing time: 8~10h)

Some things to be aware of while going through the tutorial:

Avoid using var to declare variables in JavaScript. Prefer the modern and safer let keyword. You will learn more about the distinction at later chapters and live sessions.

Avoid using vague and meaningless variable names such as x or y as mentioned in the tutorial. Always prefer meaningful and descriptive names. See examples below:

BAD

var x = cars.length;   
var y = cars.sort();   

MUCH BETTER

let carsLength = cars.length;   
let sortedCars = cars.sort();   
  1. Read the JavaScript Array Methods post at W3Schools which covers some of the most useful built-in array methods. These fundamentals are something you’ll use every day, so don’t rush too much and miss out! Practice as much as you can on each concept, create your own examples, try to think of real-life applications for each method and don’t forget to complete the quiz at the end of the page.

The same best practices mentioned above (avoid var, use meaningful variable names) apply to this tutorial also.

You can play around with this codepen we created to get a better understanding of how the Array splice method works.

NOTES: If you are unaware of the following command mentioned in this tutorial, here’s a short explanation of what it does:

document.getElementById("demo").innerHTML = fruits;

This command searches through the document (our HTML page), for an element with id demo and replaces its HTML content with the contents of the fruits variable.

For example, let’s say we have the following HTML content in our document:

<div id="target">Some content here</div>

The following code will replace the current HTML content of this div (Some content here) with <strong>JS rocks!</strong>:

let content = "<strong>JS rocks!</strong>";
document.getElementById("target").innerHTML = content;

The getElementById command is part of the so-called DOM Manipulation API, a fancy word for the set of JavaScript commands available to us for manipulating our page’s HTML and CSS (adding elements, removing elements, creating elements, updating the elements’ content, and much much more). This is the true power of JS.

Intermediate/Advanced Array Magic

Arrays are not only a handy way to store data but also have a set of functions for manipulating that data. These functions are very important and once you start using them you will see that the possibilities of what you can do with them are near endless.

Objectives of these section:

  • Learn about the forEach Array method

  • Learn about the filter Array method

  • Learn about the map Array method

  • Learn about the sort Array method

  • Learn about the reduce Array method

  1. Start out by watching the video JavaScript Array Cardio Practice – Day 1 from Wes Bos.

Duration: 24 minutes

To follow along clone the JavaScript30 repository.

  1. Watch and code with Part 2 of Wes Bos’s array series.

Duration: 8 minutes

Leave a Reply