Picture yourself meeting a new friend or acquaintance for the first time. One of the first things that you probably learn about them is their name, right? In JavaScript, you have probably learned about variables, which are pivotal for your JavaScript foundation when first learning how to program. Variables are extremely important because they help us to store pieces of information, such as a name, so that we can access this information later and don't have to metaphorically ask for someone's name over and over again!
However, remembering a single name is not particularly difficult...but what happens when you have to start remembering tens, hundreds, or even thousands of names? Arrays help us with this problem, as they are one of the most common types of data structures found not only in JavaScript, but in almost every existing programming language. If you are unfamiliar with data structures, they are essentially "data containers" that help us organize and access data when we are programming. Today, we will be learning about and working with arrays, a relatively simple and straightforward type of data structure widely used by programmers everywhere.
You can think about arrays as a "list", where the order of items matter:
[1, 2, 3] is not the same as [1, 3, 2].
Although the two arrays above contain the same elements, these arrays are unique and distinct.
Another special note about JavaScript arrays are that the data types within an array can be mixed together: [1, "1", null]
Here, we see that we have a number (integer), a String, and a null value all contained within a single array. This property of JavaScript arrays is not universally shared across all programming languages, so it is important to know how an array handles properties in your language of choice.
So how do we create a JavaScript array? As shown above, you can create an array using array literal syntax and fill a pair of square brackets with elements of your choosing separated by commas. Logically, you can also assign an array like this to a variable:
const myArray = ["This", "is", "array", "literal", "syntax"];
Checking the length of an array is also as easy as using the built-in length property of JavaScript arrays:
myArray.length;
// => 5
Now that we can create arrays, what can we do with them? We will often find ourselves wanting to access the elements within an array, using bracket notation. Bracket notation utilizes the fact that each element of an array has a designated index, or "place in line" within the array. It is crucial to note that the index of the first element in an array starts at 0! Therefore, the last element in an array will always have an index of Array.length - 1.
myArray[0];
// => "This"
myArray[myArray.length - 1];
// => "syntax"
myArray[4];
// => "syntax"
What if we want to update existing values within an array? We can do that with bracket notation too!
myArray[0] = "Now THIS";
myArray;
// => ["Now THIS", "is", "array", "literal", "syntax"]
As you may have noticed, we can freely reassign the individual elements within an array using the = operator despite the fact that myArray was declared using const.
Now that you have the basics of arrays down, we can move onto the more complex intricacies of arrays! In my next blog post, I will be going over adding and removing array elements, iterating and looping through arrays, as well as how built-in array methods can help solve many common tasks we face when using arrays.
Top comments (0)