NEW Try Dasha in your browser with Dasha Playground!
Sumudu Siriwardana, Developer Advocate
Let me ask you this,
Have you used a simple To-do app before?
Have you used a music app where you store playlists?
Have you seen any leaderboard applications?
If you have used any of these applications before, the chance is most of these apps must have used arrays to store these data lists.
Arrays are powerful data structures, and it's essential to understand how to use them. This post will cover what arrays are, how to create them, and a few array methods you will commonly use.
What is an Array?
Let's think that we have The Millenium Falcon ship. We have a few of the Star Wars characters on board. Now we want to store these data in our array.
So here's a visual representation of our array:
You can see that Hans, Luke, Leia, and Chewbacca are staying next to each other. This is what we meant by arrays organizing their items in logical order or sequentially.
This is very helpful when accessing items because the computer already knows where the value is located. It's because there's a number that refers to the location or position where the value is stored. We call this index.
The array index starts with 0, and as you move further to the right, the index increases by one. This numbering method is called Zero-Based Numbering.
So, for example, in the above array, Hans is at index 0, Luke is at index 1, Leia is at index 2, and so on. Check the below picture.
You can store any type of data in an array. For example, you can store boolean, strings, numbers, characters, objects, or even other arrays. And, it's possible to create an array with elements of multiple data types. This means creating an array with a number in the first position, a string in the second, an object in the third, etc.
Here's an array with different types of elements:
Before moving into array methods and adding and removing elements with array methods, let's look at the length property.
The length property
The length property returns the size of the array. When you access the length, it simply returns the value of the biggest index + 1.
If you wonder why it is adding 1 to the index, if you remember, the index starts with 0, so to get the actual number of elements, it doesn't count the elements; it gets the biggest numeric index plus one.
You can find out the length of the array with the length property as below:
Now let's see how to create an array and work with arrays.
How to create an array
Creating an array with the array literal
The array literal uses the square brackets  to wrap a list of elements separated by commas. This is the most common way of creating an array.
Let's declare an array with our Star Wars characters using the array literal notation.
The items or the values are defined between the open and closing brackets, and a comma separates each value. We have to add the values in an array as we add variables, which means if we add strings, we have to use quotation marks.
You can declare an empty array with empty brackets as below:
letmilleniumFalconShip = ;
Creating an array with the array constructor
We can create the same array with the array constructor. However, the syntax is slightly different with the new keyword. Check the below example.
When we create arrays with numbers using the array constructor, it behaves a little bit differently, especially when we add only one number. For example, if we create an array with one numerical value, let myArray = new Array(4), it will create a list with no elements but with a length equal to 4. So ['Han'] is identical to the new Array('Han') but  is not the same thing as to the new Array(4). Check the below example to understand this behavior.
// Array with one stringletarr = newArray("Hans");console.log(arr.length); // 1console.log(arr); // "Hans"// Array with one numerical valueletmyArray = newArray(4);console.log(myArray.length); // 4console.log(myArray); // undefinedconsole.log(myArray); // undefinedconsole.log(myArray); // undefinedconsole.log(myArray); // undefined
In the above example, the array myArray length is set to 4 since we have added one numerical value that sets the length. And it has created a list with no elements, so the value of each position is undefined.
To create an empty array, you can simply declare an empty array with no parameters:
letmyArray = newArray();
How to access elements of an array
I hope you remember that array elements already have assigned indexes positions. We can refer to this index number to access each element using the square brackets .
Let's see how we can access each member from our Millennium Falcon Ship.
Arrays can contain other arrays since it is capable of having multi-dimensional arrays. So how can we access these arrays inside arrays? Let's take an example of a multi-dimensional array representing a Star Wars family.
Here's a visual representation of our multi-dimensional array:
Also, you have to be mindful when you declare elements with an index. If you add an element with a given index and there are no other elements in-between, the array will create a list of all the elements without a value. Check the below example:
The values for indexes 2, 3, 4, 5 are undefined since we haven't added any elements to these indexes.
Adding elements to the end of an array
The push() method allows us to add one or several items at the end of an array.
Let's add a few more members to our Star Wars crew 😊
letmilleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];// Adds "Anakin" and "Padme" at the end of the arraymilleniumFalconShip.push("Anakin", "Padme"); console.log(milleniumFalconShip); //'Hans', 'Luke', 'Leia', 'Chewbacca', 'Anakin', 'Padme'
If we consider the performance, the push() method runs fast because it does not need to move any indexes since it adds elements to the end, and other elements keep their indexes.
Adding elements to the beginning of an array
The unshift() method allows us to add one or several items to the beginning of an array.
letmilleniumFalconShip = ["Hans", "Luke", "Leia", "Chewbacca"];// Adds "R2-D2" and "BB-8" at the beginning of the arraymilleniumFalconShip.unshift("R2-D2", "BB-8"); console.log(milleniumFalconShip); //'R2-D2', 'BB-8', 'Hans', 'Luke', 'Leia', 'Chewbacca'
The unshift () method is slow in performance. When an element is added to the beginning of an array, all the other elements have to shift right, renumber them from the index 0 to 1, from 1 to 2, etc. So when there are more elements in the array, more time is taken to move them, consuming more in-memory operations
Remove elements from an array
Remove elements from the end of an array
The pop() method removes the last item from an array. We don't have to pass a parameter here since it would be the last item removed when calling this method.
The shift() method is also slow since removing an element first needs to remove the element with the index 0. Then move all elements to the left, renumber them from the index 1 to 0, from 2 to 1, and so on. So when there are more elements in the array, more time is taken to move them, consuming more in-memory operations.
These are the most basic array methods, and there are many more other methods out there. We will discuss a few more methods in our future articles as well.