Hello, future JavaScript star! Today, we're delving into the world of Lists and Arrays, in JavaScript. A list, much like a drawer, holds numerous values within a single container. By the end of this lesson, we will have mastered the essential tactics for efficiently crafting, accessing, and manipulating JavaScript lists.
Think of a list, or array, as a fleet of spaceships, where each ship carries a distinct item. So, you may ask, how does one assemble this space fleet? There are two methods:
- Using the array constructor
new Array():
JavaScript1// Define list of first four planets 2const planets = new Array("Mercury", "Venus", "Earth", "Mars"); 3console.log(planets); // Prints: ["Mercury", "Venus", "Earth", "Mars"]
- Using brackets
[]:
JavaScript1// Define list of next four planets 2const morePlanets = ["Jupiter", "Saturn", "Uranus", "Neptune"]; 3console.log(morePlanets); // Prints: ["Jupiter", "Saturn", "Uranus", "Neptune"]
Both techniques swiftly create a list, so feel free to choose the one you prefer!
Indexes in lists are akin to celestial coordinates. Each item in a list has an index that starts from 0 — this is specific to JavaScript.
JavaScript1// Access third planet in the list 2console.log(planets[2]); // Prints: "Earth" 3 4// Access first planet in the list 5console.log(planets[0]); // Prints: "Mercury" 6 7// Find the index of 'Mars' 8console.log(planets.indexOf("Mars")); // Prints: 3
The .indexOf() function assists us in locating "Mars" within the planets list.
Determining list length is analogous to counting stars in a constellation. JavaScript achieves this with the .length property:
JavaScript1// Check the number of planets 2console.log(planets.length); // Prints: 4
Easy and simple!
Just like planets may change their positions in the universe, so can the elements inside a list. We can replace, add, or modify items inside our lists or arrays.
JavaScript1// Replace "Venus" with "Cybertron" 2planets[1] = "Cybertron"; 3console.log(planets); // Prints: ["Mercury", "Cybertron", "Earth", "Mars"]
In the above example, we replaced "Venus", the second item in the list (at index 1), with "Cybertron". It's as simple as that!
What if we want to modify a value instead of completely replacing it? We can retrieve the item, make our modifications, and then put it back into the list.
JavaScript1// Append the string " - the Red Planet" to "Mars" 2planets[3] += " - the Red Planet"; // using the += operator to append to the element 3console.log(planets); // Prints: ["Mercury", "Cybertron", "Earth", "Mars - the Red Planet"]
In the above example, we updated the "Mars" element in the list, appending a string to it. The result is that "Mars" has been replaced with "Mars - the Red Planet".
Manipulating lists is a frequent operation in JavaScript. Thus, understanding how to assign and change array elements is essential for every JavaScript developer!
To interact dynamically with our list, there are two main functions - push(element) and pop().
push(element)adds theelementto the end of the list.pop()removes the last element of the list and returns it as a result.
Let's show it on example - we will add "Pluto" using .push() and then remove it using .pop():
JavaScript1// Add 'Pluto' to the list 2planets.push("Pluto"); 3console.log(planets); // Prints: ["Mercury", "Venus", "Earth", "Mars", "Pluto"] 4 5// Remove 'Pluto' from the list 6const pluto = planets.pop(); 7console.log(pluto); // Prints: "Pluto" 8console.log(planets); // Prints: ["Mercury", "Venus", "Earth", "Mars"]
During this process, you've learned how to add and remove list elements using .push() and .pop(), respectively.
Congratulations! You've orbited the realm of JavaScript lists, learning how to create them, access elements by index, and perform basic operations. As we move forward, brace yourself for practice sessions that will reinforce your understanding of the concepts covered. Ready? Set. Code!