In this form, the loop declares a variable named elem. The loop then automatically repeats once for every element of myArray, with the loop variable elem set the value of the current element. So this loop will also log a message with each element to the console.
This type of loop is a bit more convenient to write, as you don't need to include comparison or increment parts of the loop. However note it does not directly provide a way to identify the current index - it only gives the actual values. So in some cases if you still need to know the array index in the loop, such as to read from two same-sized arrays simultaneously, it can be more convenient to use the previous kind of for loop.
For-of loops also work with other things in JavaScript, and in fact the details of how they work goes in to a fairly complex area of JavaScript known as iterators. We won't go in to that here, but it's worth knowing that for-of loops are another way to do something for every element in an array.
Adding and removing elements
JavaScript provides lots of ways to alter arrays, including adding, removing and replacing elements. In the interest of simplicity, we'll just cover two here.
You can use the built-in array push() method to add a new element to the end of an array. Let's also use some emojis for strings!
let myArray = ["😀", "👽", "👾"];
// Add a new element at the end of the array
myArray.push("🤖")
// Show the array in the console
// It now has: 😀, 👽, 👾, 🤖
console.log(myArray);
Once an element is added, the length property automatically increases to 4 to reflect the new size of the array.
The pop() method also removes the last element from the end of the array, and also returns the value of the element it removed.
let myArray = ["😀", "👽", "👾"];
// Remove element from end of array
let removedElem = myArray.pop();
// Show the array in the console
// It now has: 😀, 👽
console.log("The array has: ", myArray);
// Show the removed element in the console (👾)
console.log(`The removed element is: ${removedElem}`);
After removing an element the array length property automatically decreases to 2.
A few more details
Back in part 7, we covered how strings and numbers are passed by value, but objects are passed by reference. Arrays are also passed by reference in JavaScript. (In fact, as noted previously, in JavaScript arrays are special kinds of objects.)
Arrays are a type of collection, which is the name given for data structures that store multiple values. Arrays are also an ordered collection, since elements have a clear order and you can tell if one element comes before or after another - and the order can be changed (although we didn't cover that here). This is in contrast to other data structures that may not have a specific ordering or cannot be re-ordered.
Arrays have a lot more features in JavaScript. They're another key fundamental part of programming, and so have a wide range of capabilities that make them flexible and useful for lots of tasks. We'll come back to a few more of these features later in this guide. However we've covered the basics of arrays, and to keep things simple we'll move along.