If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Review: Arrays

This is a review of what we covered in this tutorial on arrays.
We often want to store lists of values when we're creating programs, and in JavaScript, we can do that using a type of value called an array.
To create an array, we declare a variable like we always do, but then we surround our list of values with square brackets and separate each value with a comma:
var xPositions = [33, 72, 64];
We can store any sort of JavaScript value in an array - not just numbers. Here's an example where we store a list of strings:
var myFriends = ['Winston', 'OhNoesGuy', 'John', 'Sophia'];
We often want to display the length of an array, or do something based on the length of the array. Thankfully, every array has a length property that will tell us the current length of the array:
text(myFriends.length, 200, 200); // Displays "4"
When we want to access a particular value in an array, we access it by referencing its "index" in the array, which represents its position. The first index in an array is 0, so if we want to access the first element in an array, we specify the name of the array variable, then square brackets, and 0:
text(myFriends[0], 200, 0); // Displays "Winston"
The second element is at index 1, the third is at index 2, and the fourth is at index 3:
text(myFriends[1], 200, 100); // Displays "OhNoesGuy"
text(myFriends[2], 200, 200); // Displays "John"
text(myFriends[3], 200, 300); // Displays "Sophia"
The zero-based indexing is one of the most confusing aspects of arrays for new programmers, so keep that in mind if you're just getting started with arrays. You'll get used to it eventually!
We often want to take some action for every element in an array, like how we used the text() command to display the names above. Instead of writing that code over and over, it's better to use a for loop to iterate through each of the elements in the array, and do something to each element inside the loop. We have to start from index 0, go until we reach the end of the array, and add 1 to the index each time. Here's how we'd do that:
for (var i = 0; i < myFriends.length; i++) {
   text(myFriends[i], 200, (i+1)*100);
Notice how we put i inside the square brackets, because it represents the current index each time the loop is run.
Arrays can be changed in many ways. To start off with, we can change a value in them:
myFriends[1] = "TheErrorBuddy";
We can also add entirely new values to them, using the push() method, passing in the new value:
After running that line of code, our array length property will change to reflect the new length, and the final index in the array will be 4 instead of 3.
If you want a full list of what you can do with arrays in JavaScript, check out this reference. But don't worry, everything in this review will get you very far!

Want to join the conversation?

  • blobby green style avatar for user Anne
    So I'm having trouble adding a single ellipse to my animation when I press my mouse. I think I understand why this is happening, but I'm not sure how to fix it.

    I have my if(mouseIsPressed) {} function within the draw function, so I know that if I press my mouse, there are going to be multiple iterations. Within my if statement I've used push statements to push values onto my x and y positions arrays, which adds another ellipse with each iteration.

    How do I just add one ellipse? I've added one ellipse while my mouse is pressed (and it goes away when I release my mouse), and I can add a bajillion ellipses and crash my program, but how do I add just one?
    (46 votes)
    Default Khan Academy avatar avatar for user
  • male robot donald style avatar for user Waseem Ahmad Naeem
    Can we Make the 2D Arrays in JS? if so
    (24 votes)
    Default Khan Academy avatar avatar for user
  • duskpin tree style avatar for user Luke Zacher
    Can someone explain to me what splice does?
    (21 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user dustin anniston
    When var array = [a,b,c];
    what's the difference between
    array[array.length] = d;
    array.push (d);
    (16 votes)
    Default Khan Academy avatar avatar for user
  • purple pi teal style avatar for user Sploderfan
    Is it possible to put shapes (like rectangles, lines, and ellipses) in an array?
    (15 votes)
    Default Khan Academy avatar avatar for user
  • piceratops tree style avatar for user estrya
    For the project connected with this review, how do we
    1. make the program show multiple raindrops at the same time and
    2. make the program restart?
    Nothing I have tried accomplishes this. Specific code as an example would help a lot. Thank you
    (19 votes)
    Default Khan Academy avatar avatar for user
  • aqualine ultimate style avatar for user Bereket
    What's the difference between mouseIsPressed and mouseClicked.
    (11 votes)
    Default Khan Academy avatar avatar for user
  • starky sapling style avatar for user Carly Austin
    I've been working on the "make it rain" project, but I an't figure out how to draw multiple ellipses to save my life! the hints don't help either as I don't know what they want or mean.

    here is my current code, which draws one ellipse that falls to the end of the screen and then resets:
    var xPositions = [200];
    var yPositions = [0];

    draw = function() {
    background(204, 247, 255);

    fill(0, 200, 255);

    for (var i = 0; i < xPositions.length; i++) {
    ellipse(xPositions[i], yPositions[i], 10, 10);
    while(yPositions[i] === 399){yPositions[i] = 0;}



    where would I put code to make multiple raindrops? and how would I do that? please and thank you
    (11 votes)
    Default Khan Academy avatar avatar for user
  • leafers ultimate style avatar for user The Chosen One
    how can you delete an element from an array
    (10 votes)
    Default Khan Academy avatar avatar for user
  • stelly green style avatar for user Flora Fu
    I don't really understand what means "push". What does this do to the program?
    (13 votes)
    Default Khan Academy avatar avatar for user