Array Manipulation Methods
In coding, you will often find yourself working with Arrays. They are very common, and very useful when working with large data sets. In JavaScript, there are many built in functions that are used to manipulate Arrays. Let’s start off with learning what an Array is, and then we can learn how to manipulate them!
What is an Array?
An Array is an object that stores values, and is most often used for storing data that will later be used throughout your program. Each element in an array can be a different data type such as a String, Number, and Boolean value. An Array element can also be another Array, or an Object. Lets take a look at an example.
var array = [1, "hello", true, ["Another", "Array"], {}];In the example above, we have an Array called ‘array’ which contains multiple different types of data, even another array.
Arrays are indexed, meaning each element in an array has a corresponding number starting from 0.
var names = ["Taylor", "Jackson", "Carly", "Charlotte"];
0 1 2 3Here, we have an Array of strings called ‘names’. There are a total of 4 elements in this array, but the index only goes up to 3 since it starts at 0.
If you want to learn more about the basics of Arrays in JavaScript, you can look here.
Arrays are great, but often times the data inside an Array isn’t enough. We always find ourselves wanting to perform some sort of task to manipulate the data itself. What if we had an Array of numbers that we want to add together? What if we wanted to remove certain elements from an Array? What if we wanted to check and see if an array contains a specific element? Well, thats what Array manipulation methods were created for! Lets looks at some common Array methods that every programmer should familiarize themselves with.
Filter
This Array method goes back to my earlier question… What if we wanted to remove certain elements from an array? Well, that is what the filter method is for. The filter method returns an array that meets the requirements specified in the function passed into the method. Take a look:
var names = ["Taylor", "Jackson", "Carly", "Charlotte"];var shortNames = names.filter( name => name.length <= 6 );console.log(shortNames);
// ['Taylor', 'Carly']
In this example, we wanted to return any names with a length that is less than, or equal to 6.
Reduce
The reduce function executes a ‘reducer’ callback function on each element in the array. It executes the reducer on an element and returns a value, then passes in the returned value from the previously executed function when running the reducer on the next element. It also takes a second argument, which is a value that the reducer starts with. This one is a tough concept to understand, and is best explained with an example.
var nums = [10, 20, 30];// add all the numbers in the array togethervar total = nums.reduce((previousValue, currentValue) => {
return previousValue + currentValue;
}, 0);console.log(total);
// 60
In this example, we used the reduce method to add all of the numbers in the array together. We started at 0 (the second argument passed into the method) and went through each element in the array, adding them together.
Map
The map method is given a function to perform on each element in the Array. It returns an array where each element is the result of the function performed on the element.
var nums = [1, 2, 3, 4, 5];var squaredNums = nums.map(num => num * num);console.log(squaredNums);
// [1, 4, 9, 16, 25]
In this example, we called a function on each element in the array that multiplied the number by itself, AKA squared the number.
ForEach
This method executes a provided function once for each element in the Array.
var names = ["Taylor", "Jackson", "Carly", "Charlotte"];names.forEach(name => console.log(name));// Output:
// "Taylor"
// "Jackson"
// "Carly"
// "Charlotte"
Here, we logged each element in the array to the console.
Join
The join method creates a new string and adds each element of the Array to that string. We give this method an argument which is put in between each element of the Array when joined to the string.
var names = ["Taylor", "Jackson", "Carly", "Charlotte"];var sayTheNames = `Hello ${names.join(", ")}`;console.log(sayTheNames);
// Hello Taylor, Jackson, Carly, Charlotte
In this example, we added each element of the array to a string, and separated them with a comma and a space so it lists each name off as if we were writing a sentence.
Every
This method performs a test on each element in the array. If all of the elements pass the test, it returns true. If just one element does not pass the test, it returns false.
var nums = [2, 4, 6, 8, 10];var isEven = nums.every(num => num % 2 === 0);console.log(isEven === true);
// true
Here, we checked the ‘nums’ array to see if every element in this array is in an even number.
Some
This method is very similar to the ‘.every()’ method, except this method returns true if at least one element passes the test.
var nums = [1, 3, 5, 7, 9, 10];var anyEven = nums.some(num => num % 2 === 0)console.log(anyEven === true)
// true
This example returns true because there is one element in the array that passes our test (is an even number).
Includes
This method checks to see if the Array contains the given value passed to the method.
var names = ["Taylor", "Jackson", "Carly", "Charlotte"];var includesTaylor = names.includes("Taylor")console.log(includesTaylor)
// true
This example checks the ‘names’ array to see if it contains the value ‘Taylor’.
Slice
This method returns an Array that is within the provided ‘start’ and ‘end’ indexes of the Array. If no ‘end’ is specified, then it returns the rest of the Array.
var names = ["Taylor", "Jackson", "Carly", "Charlotte"];console.log(names.slice(2));
// ['Carly', 'Charlotte']console.log(names.slice(0, 2));
// ['Taylor', 'Jackson']console.log(names.slice(1));
// ['Jackson', 'Carly', 'Charlotte']
Splice
The splice method changes the data inside the Array by removing or replacing elements. It can also be used to add elements elements at a specific index in the Array. Here are the arguments passed into the function:
splice(start, deleteCount, item)
var names = ["Taylor", "Jackson", "Carly", "Charlotte"];names.splice(2, 0, "Aaron");console.log(names);
// ['Taylor', 'Jackson', 'Aaron', 'Carly', 'Charlotte']names.splice(4, 1, "Madeline");console.log(names);
// ['Taylor', 'Jackson', 'Aaron', 'Carly', 'Madeline']
Concat
The concat method is used to merge two Arrays together and returns the merged Array without changing the original Arrays
var nums1 = [1, 2, 3];var nums2 = [4, 5, 6];var nums3 = nums1.concat(nums2);console.log(nums3);
// [1, 2, 3, 4, 5, 6]
In this example, we have two Arrays of numbers. We created a new variable (‘nums3') that has merged the first two Arrays together.
Sort
The sort method returns the Array called upon sorted in ascending order.
var names = ["Taylor", "Jackson", "Carly", "Charlotte"];var sortedNames = names.sort();console.log(sortedNames);
// ['Carly', 'Charlotte', 'Jackson', 'Taylor']var nums = [10, 27, 1000, 62, 45, 400];var sortedNums = nums.sort();console.log(sortedNums);
// [10, 1000, 27, 400, 45, 62]
Notice how in the above example, the ‘names’ Array is sorted in alphabetical order based on the first letter of each string, but the ‘nums’ Array does not put the numbers in order from smallest to largest. This is because with numbers, it only sorts them in order of the elements first number, not the actual size of the number. If we wanted to sort the numbers from smallest to largest, we would have to add some additional code:
var nums = [10, 27, 1000, 62, 45, 400];var sortedNums = nums.sort((a, b) => a - b)console.log(sortedNums)
// [10, 27, 45, 62, 400, 1000]
Reverse
The reverse method returns the same Array, but in reversed order. In other words, the first element, now becomes the last, and the last element, now becomes the first element and so on.
The reverse method is destructive, meaning it changes the original Array once the method is called on the Array.
var names = ["Taylor", "Jackson", "Carly", "Charlotte"];console.log(names)
// ['Taylor', 'Jackson', 'Carly', 'Charlotte']names.reverse()console.log(names)
// ['Charlotte', 'Carly', 'Jackson', 'Taylor']
Arrays are very common, and very useful! In this article we went over what an Array is, and how we can use built in JavaScript methods to manipulate them. Feel free to save this article as a cheat sheet for future coding endeavors. Happy coding!
