Table of contents
What is an Array?
There are many ways to store information when working with data on the web. An Array is the simplest way to store a collection of data and exists in every programming language. It’s commonly used as a base for most data structures due to its widely used methods. An Array also contains two different types of values we are working with, which would be considered the element and then the assigned index number that is much referring to our element.
Array used for?
When it comes to an Array, we want to ensure that any data stored is similar or has some relationship with it. So if we have an Array of movie names, we wouldn’t want to keep music names in that same collection of data. We want to create a separate collection.
Example given
var movies = [ "incredibles", "toy story", "cars" ];
var artist = [ "James Brown", "Justin Timberlake", "Dadft Punk"];
var fruits = ["apples", "oranges", "pineapples"];
Creating an Array
We have two ways to create an array, using the Array constructor or using [] square brackets
Array constructor
var arr = new Array(); // we can initiate an array with the Array Constructor
Square brackets
var arr = []; // we can initiate an array with square brackets
Using Array
There are numerous ways to manipulate an Array. We will be diving into the most commonly used methods with the Array. There are tons of built-in methods that the engineers have created for us to use.
Adding an element to an Array
If we want to add an element to the end of our Array, we can use one of the built-in methods that come with the Array once initiated.
basic syntax
arr.push()
push()
var arr = [];
arr.push(2);
arr.push(5);
arr.push(25);
console.log(arr) // output [2,5,25]
Removing an element from an Array
The pop() method allows us to remove an element from the Array
basic syntax
arr.pop()
var arr [2,5,25]
arr.pop();
console.log(arr) // output [2,5]
Accessing an element from an Array
If we wanted to access elements in an array, we could use the square bracket notation and the index of the element we want to retrieve.
basic syntax
arr.[0]
var arr = [2,5,25]
console.log(arr[0]) // 2
console.log(arr[1]) // 5
console.log(arr[2]) // 25
Sorting an Array
If we wanted to sort our elements within an Array, we could do so with the sort method. By default, the elements are sorted out ascending. Comparing the sequence of UTF-16 code unit values.
arr.sort()
var arr = [5,3,8,2,1,6,4];
arr.sort()
console.log(arr)
Reversing an Array
We can also reverse the Array in place and return a reference to the same Array .
In other words, the Array is mirrored to the original.
basic syntax
arr.reverse()
var arr = [5,3,8,2,1,6,4];
arr.reverse();
console.log(arr) // output [4, 6, 1, 2, 8, 3, 5]
💡 With these few methods, we can see the usefulness of the Array Data Structure and how helpful it can be in cases of manipulating data
Retrieving certain elements from an Array
We could retrieve more than one element instead of accessing it individually with the square bracket notation. Using the slice method, we can have a starting index & ending index that will return a copy of the Array elements. The original Array will not be manipulated.
basic syntax
arr.slice(starting_index, ending_index)
const myArray = [1, 2, 3, 4, 5];
const extractedArray = myArray.slice(1, 4); // [2, 3, 4]
Conclusion
By the end of this article, I hope you can see the power Array data structures have when it comes to data collection. This is one of the primary key concepts in the Javascript programming language, as it’s a primary basis for many other data structures. Like Stack or Queue which we will be learning about throughout this series.
💡 If we want to learn more about the other methods, check out the MDN Docs
Top comments (0)