Working with Arrays Flashcards
What is an array?
Arrays are generally described as “list-like objects”; they are basically single objects that contain multiple values stored in a list. Array objects can be stored in variables and dealt with in much the same way as any other type of value.
“What is an array?” (MDN Web Docs). Retrieved November 7, 2023.
How do you create an array?
Arrays consist of square brackets and items that are separated by commas.
For example:
const shopping = ["bread", "milk", "cheese", "hummus", "noodles"]; const sequence = [1, 1, 2, 3, 5, 8, 13]; const random = ["tree", 795, [0, 1, 2]];
Note that we can also mix data types in a single array — we do not have to limit ourselves to storing the same type on all the items if the array
“Creating arrays” (MDN Web Docs). Retrieved November 7, 2023.
How can you find the length of an array?
By using the length property.
For example:
const shopping = ["bread", "milk", "cheese", "hummus", "noodles"]; console.log(shopping.length); // 5
“Finding the length of an array” (MDN Web Docs). Retrieved November 7, 2023.
How can you access and modify array items?
Items in an array are numbered, starting from zero. This number is called the item’s index. So the first item has index 0, the second has index 1, and so on. You can access individual items in the array using bracket notation and supplying the item’s index, in the same way that you accessed the letters in a string.
Access example:
const shopping = ["bread", "milk", "cheese", "hummus", "noodles"]; console.log(shopping[0]); // returns "bread"
Modifying example:
const shopping = ["bread", "milk", "cheese", "hummus", "noodles"]; shopping[0] = "tahini"; console.log(shopping); // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
“Accessing and modifying array items” (MDN Web Docs). Retrieved November 7, 2023.
What is a multi-dimension array?
An array inside an array is called a multidimensional array.
Example:
const random = ["tree", 795, [0, 1, 2]];
“Accessing and modifying array items” (MDN Web Docs). Retrieved November 7, 2023.
How can you find the indexs of items in an array?
f you don’t know the index of an item, you can use the indexOf() method. The indexOf() method takes an item as an argument and will either return the item’s index or -1 if the item is not in the array:
const birds = ["Parrot", "Falcon", "Owl"];
console.log(birds.indexOf("Owl")); // 2
console.log(birds.indexOf("Rabbit")); // -1
“Finding the index of items in an array” (MDN Web Docs). Retrieved November 7, 2023.
How can you modify a multi-dimension array?
You can access an item inside an array that is itself inside another array by chaining two sets of square brackets together. For example, to access one of the items inside the array that is the third item inside the random array (see previous section), we could do something like this:
const random = ["tree", 795, [0, 1, 2]]; random[2][2]; // 2
“Accessing and modifying array items” (MDN Web Docs). Retrieved November 7, 2023.
How can you add items to an array?
To add one or more items to the end of an array we can use push(). Note that you need to include one or more items that you want to add to the end of your array.
const cities = ["Manchester", "Liverpool"];
cities.push("Cardiff");
console.log(cities); // [ "Manchester", "Liverpool", "Cardiff" ]
cities.push("Bradford", "Brighton");
console.log(cities); // [ "Manchester", "Liverpool", "Cardiff", "Bradford", "Brighton" ]
To add an item to the start of the array, use unshift():
const cities = ["Manchester", "Liverpool"];
cities.unshift("Edinburgh");
console.log(cities); // [ "Edinburgh", "Manchester", "Liverpool" ]
“Adding items” (MDN Web Docs). Retrieved November 9, 2023.
How can you remove items from an array?
To remove the last item from the array, use pop().
const cities = ["Manchester", "Liverpool"]; cities.pop(); console.log(cities); // [ "Manchester" ]
The pop() method returns the item that was removed.
To remove the first item from an array, use shift():
const cities = ["Manchester", "Liverpool"]; cities.shift(); console.log(cities); // [ "Liverpool" ]
If you know the index of an item, you can remove it from the array using splice():
const cities = ["Manchester", "Liverpool", "Edinburgh", "Carlisle"];
const index = cities.indexOf("Liverpool");
if (index !== -1) {
cities.splice(index, 1);
}
console.log(cities); // [ "Manchester", "Edinburgh", "Carlisle" ]
In this call to splice(), the first argument says where to start removing items, and the second argument says how many items should be removed. So you can remove more than one item:
const cities = ["Manchester", "Liverpool", "Edinburgh", "Carlisle"];
const index = cities.indexOf("Liverpool");
if (index !== -1) {
cities.splice(index, 2);
}
console.log(cities); // [ "Manchester", "Carlisle" ]
“Removing items” (MDN Web Docs). Retrieved November 9, 2023.
How can you retrieve a sub array of items from an array?
With the slice() method. The slice() method of Array instances returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // Expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // Expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // Expected output: Array ["bison", "camel", "duck", "elephant"] console.log(animals.slice(-2)); // Expected output: Array ["duck", "elephant"] console.log(animals.slice(2, -1)); // Expected output: Array ["camel", "duck"] console.log(animals.slice()); // Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
“Array.prototype.slice() - JavaScript | MDN” (MDN Web Docs). Retrieved November 9, 2023.
How can you access every item from an array?
with the for...of statement:
const birds = ["Parrot", "Falcon", "Owl"];
for (const bird of birds) {
console.log(bird);
}
or with the forEach Array method:
const array1 = ['a', 'b', 'c']; array1.forEach((element) => console.log(element)); // Expected output: "a" // Expected output: "b" // Expected output: "c"
“Accessing every item” (MDN Web Docs). Retrieved November 9, 2023.
How can you do the same transformation to each item in an array?
With map() Array method. The code below takes an array of numbers and doubles each number:
function double(number) {
return number * 2;
}
const numbers = [5, 2, 7, 6];
const doubled = numbers.map(double);
console.log(doubled); // [ 10, 4, 14, 12 ]
We give a function to the map() method, and map() calls the function once for each item in the array, passing in the item. It then adds the return value from each function call to a new array, and finally returns the new array.
“Accessing every item” (MDN Web Docs). Retrieved November 10, 2023.
How filter the items on an array?
With filter() Array method. The code below takes an array of strings and returns an array containing just the strings that are greater than 8 characters long:
function isLong(city) {
return city.length > 8;
}
const cities = ["London", "Liverpool", "Totnes", "Edinburgh"];
const longer = cities.filter(isLong);
console.log(longer); // [ "Liverpool", "Edinburgh" ]
Like map(), we give a function to the filter() method, and filter() calls this function for every item in the array, passing in the item. If the function returns true, then the item is added to a new array. Finally it returns the new array.
“Array.prototype.map() - JavaScript | MDN” (MDN Web Docs). Retrieved November 10, 2023.
How can you convert a string of comma separated values into an array?
With split() String method. In its simplest form, split() takes a single parameter, the character you want to separate the string at, and returns the substrings between the separator as items in an array.
1.- Let’s play with this, to see how it works. First, create a string in your console:
const data = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle";
2.- Now let’s split it at each comma:
const cities = data.split(",");
cities;
3.- Finally, try finding the length of your new array, and retrieving some items from it:
cities.length; cities[0]; // the first item in the array cities[1]; // the second item in the array cities[cities.length - 1]; // the last item in the array
“Converting between strings and arrays” (MDN Web Docs). Retrieved November 10, 2023.
How can you convert an array into a string?
One way to do so is with the the join() method. Try the following:
const cities = [ "Manchester","London",Liverpool",Birmingham","Leeds","Carlisle" ];
const commaSeparated = cities.join(",");
commaSeparated; // "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle"
Another way to do so is to use the toString() method. toString() is arguably simpler than join() as it doesn’t take a parameter, but more limiting. With join() you can specify different separators, whereas toString() always uses a comma.
const dogNames = ["Rocket", "Flash", "Bella", "Slugger"]; dogNames.toString(); // Rocket,Flash,Bella,Slugger
“Converting between strings and arrays” (MDN Web Docs). Retrieved November 10, 2023.
