Main content
Course: Computer programming - JavaScript and the web > Unit 1
Lesson 15: ArraysReview: 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:
myFriends.push("Hopper");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?
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?(47 votes)
Try puttingmouseClicked = function(){//ellipse code here};outside thedrawloop, then click the canvas.(81 votes)
Can we Make the 2D Arrays in JS? if so
How(26 votes)
It's easy, you just put arrays inside of an array!
Example:var a = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];(82 votes)
Can someone explain to me what splice does?(22 votes)
array.splice((position id), (number of items deleted), (value to place inside of array in position (position id));
array.splice(array.length, 0, value); does the same thing as array.push(value);
array.splice(0, 1, value); replaces the item at position id 0 (item 1) in array array with value(3 votes)
- When var array = [a,b,c];
what's the difference between
array[array.length] = d;
and
array.push (d);(17 votes)
Besides typing less, the other nice thing aboutpushis that it accepts any number of arguments, so
is far superior than the other approach.array.push(e, f, g);(35 votes)
I don't really understand what means "push". What does this do to the program?(13 votes)
'push' will add a new element to the end of your array.(36 votes)
Is it possible to put shapes (like rectangles, lines, and ellipses) in an array?(15 votes)
Arrays can only store number values. That means you can store one of the shapes properties in an array or you may store a variable in an array, but you may not put shapes in an array.(13 votes)
What's the difference between mouseIsPressed and mouseClicked.(13 votes)
A mouse press requires the mouse button to be pushed down. A click is both press and release of the mouse button.(22 votes)
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)- how can you delete an element from an array(11 votes)
There are several methods that you can use:var array = [9, 3, 18, 52, 8, 10, 19, 35];
array.pop(); //Deletes last element (35)
array.splice(a, b); //a is where the splice starts, b is how many items to remove.
array.shift(); //I'm not sure about this one, i think this one removes the first element.(11 votes)
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);
noStroke();
fill(0, 200, 255);
for (var i = 0; i < xPositions.length; i++) {
ellipse(xPositions[i], yPositions[i], 10, 10);
yPositions[i]++;
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)- to make more raindrops, you need to add more elements to arrays xPositions and yPositions, the number of elements is the number of raindrops, the value of the elements is the position of the respective raindrop, this can be manually done, done using splice, or done using push, possible that there are more methods, but those are the main methods I use, depending on the situation(2 votes)