JavaScript Array Methods Level 2 shift unshift join sort reverse includes

The array methods in this article are next level (a.k.a. level 2), in my opinion. Learn these array methods after Level 1 Array Methods. Remember, I am trying to make this easy to understand without the extra fluff. For more in-depth array method explanations, go to the Mozilla Developer Network website.

This is part 2 of my “Array Series.” If you missed part 1 then go here: Level 1 Array Methods.


Add Item at Beginning of Array

arrayName.unshift('New York'); // adds 'New York' to beginning of array

Unshift adds the item in parenthesis to the beginning of the array and returns the number of items in the array. The array becomes one item larger and moves existing items up one index.

Use case: When you are taking a coding challenge and they ask you to add an item to the beginning of the array.

// Example:
// Index                                0              1          2
const mostPopulatedUSCitiesInOrder = ['Los Angeles', 'Chicago', 'Houston'];

// add New York to beginning of array and log count of array
console.log(mostPopulatedUSCitiesInOrder.unshift('New York'));
//output: 4

// log array to console
console.log(mostPopulatedUSCitiesInOrder);
// Index         0              1          2         3
// output: ['New York', 'Los Angeles', 'Chicago', 'Houston'];

Los Angeles went from an index of 0 to an index of 1 when you add an item to the array using unshift.


Remove Item at Beginning of Array

arrayName.shift(); 

Shift removes the first item in the array and returns it.

Use case: When you are taking a coding challenge and they ask you to remove an item from the beginning of the array.

// Example:
const mostPopulatedUSCitiesInOrder = ['New York', 'Los Angeles', 'Chicago', 'Houston'];

// remove first item in array and console log removed item
console.log(mostPopulatedUSCitiesInOrder.shift());
// output: 'New York'

// log array to console
console.log(mostPopulatedUSCitiesInOrder);
// output: ['Los Angeles', 'Chicago', 'Houston'];


Join Items in Array into One String

arrayName.join(); 

Join concatenates all the items in the array into a string. (Concatenate is another way to say put together.) Each item from the array will be separated by what you put in the parenthesis. Commas will be used if you leave join parenthesis blank.

// Example:
const arrayName = ['Harry', 'Steve', 'Jack', 'Tom'];

// join array items and console log result
console.log(arrayName.join());
// output: Harry,Steve,Jack,Tom

Use case: When you receive data that is separated in an array, but you need it in one string.

// Example:
const arrayName = ['H','e','l','l','o',' ','W','o','r','l','d','!'];

// join array items and console log the output
console.log(arrayName.join(''));
// output: Hello Word!


Sort an Array

arrayName.sort(); 

Sort reorders items in the array into alphabetical order, then returns the array in its new order. The array items are sorted as strings (UTF-16).

Use case: When you need to sort an array in alphabetical order.

// Example:
const mostPopulatedUSCitiesSortByName = ['New York', 'Los Angeles', 'Chicago', 'Houston'];

// sort array
mostPopulatedUSCitiesSortByName.sort();

// log sorted array to console
console.log(mostPopulatedUSCitiesSortByName);
// output: ['Chicago', 'Houston', 'Los Angeles', 'New York'];


Reverse an Array

arrayName.reverse(); 

Reverse reverses items in the array, then returns the array in its new order. The last item in the array becomes the first, first to last item becomes the second, and so on.

Use case: When you are in a coding challenge interview and they ask you to reverse an array.

// Example:
const theArray = ['a', 'b', 'c', 'd'];

// reverse array
theArray.reverse();

// log array to console
console.log(theArray);
// output: ['d', 'c', 'b', 'a'];


Check if Item is in Array Using Includes

arrayName.includes('Tom'); 

The Includes array method checks the array for the value in parenthesis and returns true or false. True if includes found a match and false if it did not.

Use case: When you need to check if Oranges are already in your grocery list array.

// Example:
const groceryList = ['Apples', 'Bananas', 'Oranges', 'Mangos'];

// check if Oranges are on grocery list array
console.log(groceryList.includes('Oranges'));
// output: true


Bonus: Iterate through an Array Using forEach

array1.forEach(function(item) {
  console.log(item);
}); 

ForEach loops through each item in the array and executes the declared function. If there are 4 items in the array, forEach will run 4 times.

Use case: When you need to check the length of each item in the array.

// Example:
const theArray = ['Apples', 'Bananas', 'Oranges', 'Mangos'];

// check length of each item in the array using forEach
theArray.forEach(function(item) {
  console.log(item + ' - ' + item.length);
});
// output: 
// Apples - 6
// Bananas - 7
// Oranges - 7
// Mangos - 6


Those are what I classify as level 2 array methods.

I hope this article was quick, easy to follow, and helped you learn. Let me know if I need to expand on something or explain it better (in the comments section below).

Next up… Level 3 Array Methods.