Test your skills: Arrays

The aim of this skill test is to help you assess whether you've understood our Arrays article.

Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.

Interactive challenge

First of all, we are giving you a fun, interactive arrays challenge created by our learning partner, Scrimba.

Watch the embedded scrim, and complete the task on the timeline (the little ghost icon) by following the instructions and editing the code. When you are done, you can resume watching the scrim to check how the teacher's solution matches up with yours.

Note: This task is somewhat of a stretch goal, given that it relies on JavaScript features you've not yet explicitly covered during the course. Give it your best shot, and search online for information on anything you are not sure about.

Arrays 1

This task gives you some basic array practice:

  1. Create an array of three items, and store it in a variable called myArray. The items can be anything you want — how about your favorite foods or bands?
  2. Next, modify the first two items in the array using bracket notation and assignment.
  3. Finally, add a new item to the beginning of the array.

The starting point of the task looks like this (nothing is shown yet):

Here's the underlying code for this starting point:

js
// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = `Array: ${myArray}`;
section.appendChild(para1);

The updated output should look like this:

Click here to show the solution

Your finished JavaScript should look something like this:

js
const myArray = ["cats", "dogs", "chickens"];

myArray[0] = "horses";
myArray[1] = "pigs";

myArray.unshift("crocodiles");

// Don't edit the code below here!
// ...

Arrays 2

Now let's move on to another task. Here you are provided with a string to work with.

To complete the task:

  1. Convert the string into an array, removing the + characters in the process. Save the result in a variable called myArray.
  2. Store the length of the array in a variable called arrayLength.
  3. Store the last item in the array in a variable called lastItem.

The starting point of the task looks like this (nothing is shown yet):

Here's the underlying code for this starting point:

js
const myString = "Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri";

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = `Array: ${myArray}`;
const para2 = document.createElement("p");
para2.textContent = `The length of the array is ${arrayLength}.`;
const para3 = document.createElement("p");
para3.textContent = `The last item in the array is "${lastItem}".`;
section.appendChild(para1);
section.appendChild(para2);
section.appendChild(para3);

The updated output should look like this:

Click here to show the solution

Your finished JavaScript should look something like this:

js
const myString = "Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri";

let myArray = myString.split("+");

let arrayLength = myArray.length;

let lastItem = myArray[arrayLength - 1];

// Don't edit the code below here!
// ...

Arrays 3

For this array task, we provide you with a starting array, and you will work in somewhat the opposite direction. You need to:

  1. Remove the last item in the array.
  2. Add two new names to the end of the array.
  3. Iterate over each item in the array and add its index number after the name inside parentheses, for example Ryu (0). Note that we don't teach how to do this in the Arrays article, so you'll have to do some research.
  4. Finally, join the array items together in a single string called myString, with a separator of "-".

The starting point of the task looks like this (nothing is shown yet):

Here's the underlying code for this starting point:

js
const myArray = [
  "Ryu",
  "Ken",
  "Chun-Li",
  "Cammy",
  "Guile",
  "Sakura",
  "Sagat",
  "Juri",
];

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = myString;
section.appendChild(para1);

The updated output should look like this:

Click here to show the solution

Your finished JavaScript should look something like this:

js
const myArray = [
  "Ryu",
  "Ken",
  "Chun-Li",
  "Cammy",
  "Guile",
  "Sakura",
  "Sagat",
  "Juri",
];

myArray.pop();

myArray.push("Zangief");
myArray.push("Ibuki");

myArray.forEach((element, index) => {
  const newElement = `${element} (${index})`;
  myArray[index] = newElement;
});

const myString = myArray.join(" - ");

// Don't edit the code below here!
// ...

Arrays 4

For this array task, we provide you with a starting array listing the names of some birds.

To complete the task:

  1. Find the index of the "Eagles" item, and use that to remove the "Eagles" item.
  2. Make a new array from this one, called eBirds, that contains only birds from the original array whose names begin with the letter "E". Note that startsWith() is a great way to check whether a string starts with a given character.

The starting point of the task looks like this (nothing is shown yet):

Here's the underlying code for this starting point:

js
const birds = ["Parrots", "Falcons", "Eagles", "Emus", "Caracaras", "Egrets"];

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = eBirds;
section.appendChild(para1);

The updated output should look like this:

Click here to show the solution

Your finished JavaScript should look something like this:

js
const birds = ["Parrots", "Falcons", "Eagles", "Emus", "Caracaras", "Egrets"];

const eaglesIndex = birds.indexOf("Eagles");
birds.splice(eaglesIndex, 1);

function startsWithE(bird) {
  return bird.startsWith("E");
}
const eBirds = birds.filter(startsWithE);

// Don't edit the code below here!
// ...