Common Array Methods in Javascript

Wether you are building the new facebook or studying for that next technical interview, you are going to be working with arrays. In Javascript and Array is an object that stores multiple values to a single variable. This data structure can be manipulated in many different ways with array methods. There are tons of array methods built into Javascript. In this article I’ll go over some very common methods and let you know what they look like and what they do!

unshift()

unshift() will add elements to the beginning of the array. This method modifies the original array and will return the length of the array after adding the element.

let numbers = [2,3,4,5,6]
numbers.unshift(1) //returns 6
numbers == [1,2,3,4,5,6]

pop()

pop() will remove the last element of an array. This methods return value is the last element that it just removed. IMPORTANT: This will change the original array.

let dogs = ["Ada", "Taz"]
dogs.pop() //returns "Taz"
dogs == ["Ada"] //true

forEach()

forEach() will iterate through the entire array and pass the element into a function where you can then do some logic. This methods return is dependent on what is inside of the function that the elements are being passed to.

let dogs = ["Ada", "Taz"]
dogs.forEach(dog => {
console.log(`Who is a good dog? ${dog} is!`);
}

join()

join() will take all the elements of an array and make them a string. This string will have all the elements separated by a comma. This method will return a string and will not modify the original array.

let smallNumbers = [1,2,3,4,5,6,20]
smallNumbers.join() // returns “1,2,3,4,5,6,20”

map()

map() is very similar to the forEach(). They both iterate through an array but map() will create and return a new array. This new array will be made based on the logic you pass inside of the function. This does not modify the original array.

let numbers = [2,4,6,8]
numbers.map(num => num * 2) 
//returns [4,8,12,16]

filter()

filter() creates a new array with elements of the original array that pass a test. This method returns a new array and does not alter the original array.

let smallNumbers = [1,2,3,4,5,6,20]
smallNumbers.filter(num => num < 10); //returns [1,2,3,4,5,6]

concat()

concat() is used to join two or more arrays. This method will return a copy of the joined arrays. This way you don’t have to worry about changing the original arrays.

let dogs = ["Ada", "Taz"]
let owners = ["Tripp", "Melissa"]
let dogsAndOwners = dogs.concat(owners)

every()

every() will check to see if all the elements pass a certain test. If all elements pass the test it will return true. If even on element fails the test then it will return false. This does not modify the original array. It just returns a boolean value based on your test.

let smallNumbers = [1,2,3,4,5,6,20]
smallNumbers.every(num => num < 10); //returns false since 20 is larger than 10

find()

find() will look for the first element in the array that passes a condition. Its important to remember that if there are more than one match in the test array that it will only return the first match. If this method finds a match it will return true and stop. If it finds no match it will return undefined.

let smallNumbers = [1,20,3,4,5,6,20]
smallNumbers.filter(num => num > 10); //returns 20. To be specific it returns the second element since it is the first to pass the conditional.

includes()

includes() will look in the array for a specific element that you tell it to. If it finds the element it will return true if it does not find the element it will return false. It is important to remember that this is case sensitive.

let dogs = ["Ada", "Taz"]
dogs.includes("snoopy") //returns false
dogs.includes("ada") //returns false since "ada" is lower case and its capitalized in the array
dogs.includes("Taz") //returns true

reduce()

reduce() can be a tricky method to get down but it is so useful in the right situations. This method will iterate through the entire array and return a single value that is the accumulated result of all the elements being passed through the reducer function. This will perform logic on one element and remember the results and then use that results on the next element in the array. You can also set the default value that the reducer will start. It defaults to 0 but if you prefer to start you calculations at 100 you can. This does not change the original array.

let numbers = [1,2,3]
let reducer = (accumulator, currentValue) => accumulator + currentValue

numbers.reduce(reducer) //returns 6
numbers.reduce(reducer, 100) //returns 106

reverse()

reverse() will reverse the order of the array. This will modify the original array.

let dogs = ["Ada", "Taz"]
dogs.reverse() //returns ["Taz", "Ada"]

shift()

shift() will remove the first element of an array and will return the element it removed. This method does change the original array.

let dogs = ["Ada", "Taz"]
dogs.shift() //returns ["Ada"]
dogs == ["Taz"]

slice()

slice() will return a selection of elements in the array as a new array. You can be very creative with this method to get the section of the method you want. This method requires a start argument and and end argument. The end argument you pass is where you want it to stop, but it does not include that number. The start and stop locations are based off the array index. Its easy to forget this. This does not change the original array.

let number = [1,2,3,4,5,6]
number.slice(1,4) // returns [2,3,4]

sort()

sort() will modify the original array and sort it. This is great to use if you want to sort and array of strings. It will default to sorting it alphabetically. You can also sort numbers and it will default to sorting in ascending order.

let dogs = ["Taz", "Ada"]
let numbers = [1,3,2,4,6,5]

dogs.sort() //returns ["Ada", "Taz"]
numbers.sort() //returns [1,2,3,4,5,6]

splice()

splice() adds and removes elements from the array. This method requires an index to start at. It also takes an argument for how many you would like to remove and the new element(s) you want to add. Basically you tell it what element to start if/how many elements you want to remove and then the elements in the order that you want to add in that place. This changes the original array. It will return the removed elements.

let numbers = [1,3,4,5,6]
//splice(start, deleteCount, item1ToAdd, item2toAdd, etc);
numbers.splice(1,0,2) //returns [ ] because it did not remove anything
numbers == [1,2,3,4,5,6]

I hope you found this list of methods helpful. Bookmark this page and use it as a quick reference as you learn these methods and become an expert JavaScript programmer!