ARRAYS
1/9 ARRAYS
Arrays
A foundational concept of programming is how to organize and store data.
One way we organize data in real life is to make lists. Let’s make one here:
New Year’s Resolutions:
1. Rappel into a cave
2. Take a falconry class
3. Learn to juggle
Let’s now write this list in JavaScript, as an array:
let newYearsResolutions = [‘Rappel into a cave’, ‘Take a falconry class’, ‘Learn to juggle’];
Arrays are JavaScript’s way of making lists. These lists can store any data types (including strings, numbers, and booleans) and they are ordered, meaning each item has a numbered position.
Instructions
- Run the code to see what is logged to the console.
2/9 ARRAYS
Create an array
Let’s start by making an array and then seeing what it can do throughout the rest of this lesson.
Instructions
- Make a variable named newYearsResolutions and set it equal to an array with three strings inside of it.
Remember to surround your array with brackets: []. That’s what makes it an array! - Use console.log to print newYearsResolutions to the screen.
3/9 ARRAYS
Property Access
Each item in an array has a numbered position. We can access individual items using their numbers, just like we would in an ordinary list.
Something important to note is that JavaScript starts counting from 0 rather than 1, so the first item in an array will be at position 0. This is because JavaScript is zero-indexed.
We can select the first item in an array like this:
let newYearsResolutions = [‘Rappel into a cave’, ‘Take a falconry class’, ‘Learn to juggle’];
console.log(newYearsResolutions[0]);
// Output: ‘Rappel into a cave’
You can also access individual characters in a string. For instance, you can write:
let hello = ‘Hello World’;
console.log(hello[6]);
// Output: W
W will be the output since it’s the character in the 6th position. This works because JavaScript stores strings in a similar way that it stores arrays.
Instructions
- Individual elements of arrays can also be stored to variables.
Create a variable named listItem and set it equal to the first item in your newYearsResolutions array using square bracket notation ([]).
Then use console.log() to print the listItem variable to the console.
The first item within an array is always at position [0]. - Now, console.log() the third item in the newYearsResolutions array without using a variable.
console.log(array[index]) - Try to log the item at position [3] to the console. What is logged to the console?
4/9 ARRAYS
Update Elements
In the previous exercise, you learned how to access elements of an array or a string using their index number. You can also change elements of an array using their indices.
let seasons = [“Winter”, “Spring”, “Summer”, “Fall”];
seasons[3] = “Autumn”;
console.log(seasons)
//Output:
//Winter
//Spring
//Summer
//Autumn
In the example above, the seasons array contained the names of the four seasons.
However, we decided that we preferred to say “Autumn” instead of “Fall”.
seasons[3] = “Autumn”; tells our program to change the item at index 3 of the seasons array to be “Autumn” instead of what is already there.
Instructions
- Change the second element of your newYearsResolutions array to be, ‘Learn a new language’.
5/9 ARRAYS
length property
We may wish to know how many items are stored inside of an array.
We can find this out by using one of an array’s built-in properties, called length. We can attach this to any variable holding an array and it will return the number of items inside.
let newYearsResolutions = [‘Rappel into a cave’, ‘Take a falconry class’];
console.log(newYearsResolutions.length);
// Output: 2
In the example above, we log newYearsResolutions.length to the console. This code retrieves the length property of the newYearsResolutions array and logs it to the console. This array has two items, so 2 would be logged to the console.
Instructions
- Find the length of your newYearsResolutions array and log it to the console.
6/9 ARRAYS
push Method
JavaScript has built in methods for arrays that help us do common tasks. Let’s learn some of them.
First, .push() allows us to add items to the end of an array. Here is an example of how this is used:
let newYearsResolutions = [‘item 0’, ‘item 1’, ‘item 2’];
newYearsResolutions.push(‘item 3’, ‘item 4’);
The method .push() would make the newYearsResolutions array look like:
[‘item 0’, ‘item 1’, ‘item 2’, ‘item 3’, ‘item 4’];
How does .push() work?
- It connects to newYearsResolutions with a period.
- Then we call it like a function. That’s because .push() is a function and one that JavaScript allows us to use right on an array.
Another array method, .pop(), is similar to .push(). This method removes the last item of an array.
let newYearsResolutions = [‘item 0’, ‘item 1’, ‘item 2’];
newYearsResolutions.pop();
console.log(newYearsResolutions);
// Output: [ ‘item 0’, ‘item 1’ ]
In the example above, calling .pop() on the newYearsResolutions array removed item 2 from the end.
Instructions
- Add two more items to your newYearsResolutions array using .push().
newYearsResolutions.push(‘Catch the winning Super Bowl touchdown pass’, ‘Make the best grilled cheese sandwich ever’)
- Now, use console.log to print your newYearsResolutions array to make sure your items were added.
- Use the .pop() method to remove the last element from your array.
Log newYearsResolutions to the console to make sure it worked.
7/9 ARRAYS
More Array Methods
There are many more array methods than just .push() and .pop(). You can read about all of the array methods that exist on the Mozilla Developer Network (MDN) documentation.
.pop() and .push() modify the array on which they’re called. However, there are some array methods that don’t modify the array. Be sure to check MDN to understand the behavior of the method you are using.
Some methods that JavaScript developers use frequently are .join(), .slice(), .splice(), .shift(), .unshift(), and .concat() amongst many others.
Below, we will explore some methods that we have not learned yet. We will use these methods to edit a grocery list. As you complete the steps, you can consult the MDN documentation to learn what each method does!
Instructions
- Use the .shift() method to remove the first item from the array groceryList.
Log the new groceryList to the console.
array.method();
console.log(array);
- Use the .unshift() method to add ‘popcorn’ to the beginning of your grocery list.
Log the new grocery list to the console.
You may wish to delete the console.log() statement from the previous step.
array.method(argument);
console.log(array);
- You’re in a hurry so you decide to ask a friend to help you with your grocery shopping. You want him to pick up the bananas, coffee beans, and brown rice.
Use .slice() to provide him with a list of these three things.
Log this part of the list to the console. Unlike the two previous checkpoints, you should do both of these steps in one line.
console.log(array.method(first, last+1));
- Log the grocery list to the console one more time.
Notice that the groceryList array still contains the same items it had in Step 2.
8/9 ARRAYS
Arrays with let and const
You may recall that you can declare variables with both the let and const keywords. Variables declared with let can be reassigned.
Variables that are assigned with const cannot be reassigned. However, arrays that are declared with const remain mutable, or changeable.
This means that we can change the contents of an array, but cannot reassign the variable name to a new array or other data type.
The instructions below will illustrate this more clearly. Pay close attention to the similiarities and differences between the condiments array and the utensils array as you complete the steps.
Instructions
- Below the two existing arrays, add your favorite condiment to the condiments array using .push().
Log the updated array to the console.
- Below your code from Step 1, reassign condiments to be an array that contains a single string.
Log the result to the console.
condiments = [‘a string’];
- Below your code from Step 2, remove the last item from the utensils array using .pop().
Log the updated array to the console.
- Below your code from Step 3, reassign the utensils array to be a new array with only your favorite utensil inside of it.
You should have received an error!
9/9 ARRAYS
Review Arrays
Nice work! In this lesson, we learned these concepts regarding arrays:
- Arrays are lists and are a way to store data in JavaScript.
- Arrays are created with brackets [].
- Each item inside of an array is at a numbered position, starting at 0.
- We can access one item in an array using its numbered position, with syntax like: myArray[0].
- We can also change an item in an array using its numbered position, with syntax like myArray[0] = “new string”;
- Arrays have a length property, which allows you to see how many items are in an array.
- Arrays have their own methods, including .push() and .pop(), which add and remove items from an array, respectively.
- Arrays have many other methods that perform different functions, such as .slice() and .shift(). You can read the documentation for any array method on the Mozilla Developer Network website.
- Variables that contain arrays can be declared with let or const. Even when declared with const, arrays are still mutable; they can be changed. However, a variable declared with const cannot be reassigned.
Sé el primero en comentar