DEV Community

Austin Harlow
Austin Harlow

Posted on • Updated on

JavaScript Arrays

Last week I wrote about JavaScript objects and wanted to continue to write about built-in data structures in JavaScript. We are going to keep a similar structure to last weeks post where we learn about what arrays are before we dig into how they work in JavaScript and look at a few examples.

Arrays in Computer Science

In computer science, Arrays are both a data structure and a data type. According to Wikipedia, an array data structure, or simply an array, is a data structure consisting of a collection of elements (values or variables), each identified by at least one array index or key.

Lets focus on a couple key portions of this definition here. First, a collection of elements and each identified by at least one array index or key. In that sense what we have then is a data structure that is a collection of elements identified by at least one index.

Arrays in JavaScript

If we take a look at Mozilla's JavaScript webdocs, we can have an idea of how an array is defined in JavaScript. Mozilla's definition is Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations.

As JavaScript is not a strictly typed language, arrays can contain several different data types. This is similar to JavaScript objects where the values contained within do not all need to be the same type. Again similarly to objects we can create new arrays using an array literal or the new keyword.

const myArray = [ 0, "apple", [ 0, 1 ] ];
const newArray = new Array( 0, "apple", [ 0, 1 ] );

Much like how we can access the different values of our object by referencing the keys, we can access the different array values using the indices. Since JavaScript arrays are indexed starting at 0, we can access the values in our array using the same bracket notation that we saw with objects.

const myArray = [ 0, "apple", [ 0, 1 ] ];

console.log(myArray[1]);
// => apple

console.log(myArray[2]);
// => [ 0, 1 ]

Another interesting aspect of arrays in JavaScript is that they are actually objects. We can even check that by using typeof.

const myArray = [ 0, "apple", [ 0, 1 ] ];

typeof(myArray);
// => object

Although our arrays are objects, it would be more accurate to describe them as special objects which function as you would expect for an array.

There are many different built-in methods for arrays such as length, sort, push, pop, etc. For now let's just take a look at length, push, and pop.

The length method of our array will return an integer representing the number of elements within an array. The push and pop methods both deal with the end of the array. Push will allow us to add an element to the end of an array and then return the length of the array. Pop takes the opposite action, removing the last element from an array but it instead returns the removed element.

const myArray = [ 0, "apple", [ 0, 1 ] ];

myArray.length;
// => 3

myArray.push(15);
// => 4

myArray.length;
// => 4

myArray.pop();
// => 15

There are many more great built-in methods for arrays in JavaScript and particularly appreciate Geeks for geeks' list of methods.

Now we should have a better understanding of what arrays are and how they look in JavaScript. We looked at a couple of ways to create them, how to access different elements, and a few built-in methods. There is certainly much more to dig into regarding arrays but hopefully we have scratched the surface enough to interest you into learning more about JavaScript arrays.

References

Oldest comments (0)