5 Common JavaScript Array methods with quick visual examples.

I’m a visual learner and I know that having images paired with coding examples has taken me farther than code alone. Sometimes you just need that extra visual reference to commit concept to memory. This is where I come in. I’ve created visual references along with code snippets to break down the most common Javascript Array methods.

1. Array.push( )

In essence, Array.push( ) adds an element to the end of an array. An array is a mutable object in JavaScript meaning that the original array can be mutated or changed after it has been created.

Let’s use my example below:

Original List of Trees

If you look at the image above, you will see a list displaying to the DOM containing an array of four trees. The four trees are oak, pine, aspen, and bald cypress. Let’s pretend that I’m an Arborist and I’m going to be placing an order to restock the trees that I’m out of. Recently, I’ve also run out of redwood trees and I need to add that varietal to the end of my already created list. Because the list is an array, I can easily mutate it. I can use what is called a built in Array method to accomplish this task. The method for adding an element to the end of an array is called the .push( ) method. The .push( ) method not only adds an element to the end of the array, but it also returns the new length of the mutated array.

Code Example:

//original list of trees
let treeArr = ['oak', 'Pine', 'aspen', 'Bald Cypress'];
//using the .push() method to append a redwood to the end of the list
treeArr.push('redwood')

Result:

List of Trees after the .push() method has been used to add redwood to the end of the list of trees.

2. Array.unshift( )

The second built in array method that I wanted to talk about is very similar to the .push( ) array method. The only difference is that .unshift( ) adds an element to the beginning of the array and then returns the new length of the mutated array, just like the push( ) method.

In the example below I have the same original list as before.

Original List of Trees

Let’s take that same original list shown above and add a Pear tree to the beginning of the list using the Array.unshift( ) method.

Code Example:

//original list of trees
let treeArr = ['oak', 'Pine', 'aspen', 'Bald Cypress'];
//using the .push() method to append a redwood to the end of the list
treeArr.unshift('pear')

Result:

List of Trees after the .unshift() method has been used to add pear to the beginning of the list of trees.

This time you can see that the list was mutated to have the Pear tree at the beginning of the array rather than at the end. The new mutated array now also contains 5 elements.

3. Array.pop( )

The next built in array method that I wanted to talk about is called the .pop( ) method. This method is very handy and will remove or ‘pop’ off the last element in the array and return that element.

Let’s take that same original list shown below and remove the last element in the array which happens to be Bald Cypress.

Original List of Trees

Code Example:

//original list of trees
let treeArr = ['oak', 'Pine', 'aspen', 'Bald Cypress'];
//removing the last tree on the treeArr array Bald Cypress
treeArr.pop();
//I also wanted to console log this so that I could show you that the .pop() method returns the last element of the array. 
console.log(treeArr.pop());

Results:

console.log(treeArr.pop());

List of Trees after the .pop() method has been used to remove bald cypress from the end of the list of trees.

4. Array.shift( )

The next built in array method that I wanted to talk about is called the .shift( ) method. This method is similar to the .pop( ) method, but instead of removing and returning the last element of the array, it removes and returns the first element.

Let’s take that same original list shown below and remove the first element in the array which happens to be oak.

Original List of Trees

Code Example:

//original list of trees
let treeArr = ['oak', 'Pine', 'aspen', 'Bald Cypress'];
//removing the first tree on the treeArr array Bald Cypress
treeArr.shift();
//I also wanted to console log this so that I could show you that the .shift() method returns the first element of the array. 
console.log(treeArr.shift());

Results:

console.log(treeArr.shift());

List of Trees after the .shift() method has been used to remove oak from the beginning of the list of trees.

5. Array.sort( )

The last method I wanted to mention is the Array.sort( ) method. This method is different than the others I have mentioned previously. It can sort an array either alphabetically or numerically, in either ascending or descending order as specified by the programmer. By default, the .sort( ) method sorts alphabetical and in ascending order and returns the new array.

Take our original list of trees for example:

Original List of Trees

Let’s use this method to sort it.

//original list of trees
let treeArr = ['oak', 'Pine', 'aspen', 'Bald Cypress'];
//sorting the treeArr alphabetically by ascending order
treeArr.sort();
//I also wanted to console log this so that I could show you that the .shift() method returns the first element of the array. 
console.log(treeArr.sort());

Now this next answer may suprise you. JavaScript has many quirks that we as programmers have to learn and take into account and this example does expose one of them

Results:

console.log(treeArr.sort());

Ooof, you may have not seen it coming, but Bald Cypress comes before aspen. Why is this? By default JavaScript orders like the alphabet, but capital letters are sorted before lowercase. Because of this we would need to convert the array elements to lowercase letters first and then use the .sort( ) method to get our desired result.

Code Example:

//original List of Trees
let treeArr = ['oak','pine','aspen','Bald Cypress'];
//Creating an empty array to add new lowercase trees into.
let treeList = [];
// setting the empty treeList to a build in method .map() that maps over the content of the treeArr array and converts each element to lowercase and assigns it to treeList as an element in an array.
treeList = treeArr.map(treeArr => treeArr.toLowerCase());
//sorts the treeList array and displays to the console.log(treeList.sort());

Results:

console.log(treeList.sort());

List of Trees after the .toLowerCase() method & .sort() method has been used to make all elements lowercase and sort in the desired format.

See Final Project to explore More Array Methods:

Link to Github
Link to The Arborist Array Method Project

Sarah Mendez is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to Web Development in the DGM2760 Course and is representative of the skills learned.