Array Methods in JavaScript

When working with arrays in JavaScript there are some functions/methods that can be used to manipulate the array that are built into JavaScript, meaning you don't have to make your own version of them. These methods can be used to add elements, remove elements, or find out where elements are within an array. Throughout these examples it is important to note the capitalisation of the methods, these must be written in camel case which is when the first letter is lower case but the other words start with capital letters.

Pop is a method used to remove the last element from an array. This method will return the last element in the array and will remove that element from the array. If we have an array with the number 1 through 4 and call the pop method then the last number, the number 4, will be removed from the array, and the pop method will return the number 4. The first log statement below will print the number 4 and the second will print the number 1 through 3, as the last element has not been removed. To call a method on an array with start with the array name, then use a dot separator, followed by the method name and two parentheses.

Push and Pop

var myList = [1, 2, 3, 4];
console.log(myList.pop());
console.log(myList);

The push method is used to add an element to the end of an array. The push method takes one or more arguments, which are put within the parenthesis. The below code shows the use of the push method with a single argument, the number 5. The log statement will print the number 1 through 5, as the number 5 has been added to the end of the array.

var myList = [1, 2, 3, 4];
myList.push(5);
console.log(myList);

When using the push method with multiple arguments, the arguments are separated with commas inside the parenthesis, all the elements will be added to the end of the array in the order they are supplied to the method. The below log statement will print the number 1 through 6.

var myList = [1, 2, 3, 4];
myList.push(5, 6);
console.log(myList);

Shift and Unshift

The unshift method is similar to the push method but with the start of the array. The unshift method will add one or more elements to the start of an array. The below code will print the numbers 0 through 4, as the number 0 has been added to the start of the array using the unshift method.

var myList = [1, 2, 3, 4];
myList.unshift(0);
console.log(myList);

Multiple arguments can be given the unshift method and they will be added to the start of the array in the order they are given. The below log statement will print the number -1 to 4, as -1 and 0 are the two arguments given to the unshift method.

var myList = [1, 2, 3, 4];
myList.unshift(-1, 0);
console.log(myList);

The shift method is similar to the pop method but with the start of the array. The shift method will return the first element from the array and the first element will also be removed from the start of the array. The first log statement of the code below will print the number 1, as that is the first element in the array, and the second log statement will print the number 2 through 4 as the number 1 has been removed from the array.

var myList = [1, 2, 3, 4];
console.log(myList.shift()); 
console.log(myList); 

IndexOf and lastIndexOf

The 'indexOf' and 'lastIndexOf' methods are used to find where certain values are within an array. The indexOf method takes one parameter, which is the value you are searching for in the array and will return the first instance of that value inside the array. The indexOf example in the below code will print the number 1, this is being the first occurrence of the number '2' in the array is at the index 1 position. The lastIndexOf method will do something similar but will return the position of the last occurrence. The example below will print the number 5, as the last occurrence of the number '2' in the array is at index position 5.

var myList = [1, 2, 3, 4, 1, 2, 3, 4];
console.log(myList.indexOf(2)); 
console.log(myList.lastIndexOf(2)); 

Join and Split

The join and split methods are ways of converting arrays into String variable types and vice versa. The join array will take every element of an array and put them together to form a String variable. The join method takes one parameter which is the delimiter used in between each element of the array when they're joined together. The below example shows joining and array using a comma and space as a delimiter. This example prints the following string value "1, 2, 3, 4", each element has been joined together with the delimiter put in between the elements.

var myList = [1, 2, 3, 4];
console.log(myList.join(", "));

The split method isn't an array method but is used on a string variable. The split method achieves the opposite of the join method. When using the split method a string will be split apart using a delimiter to create an array. The below code example shows a string called 'myStr' whos value is the number 1 through 4 separated with commas and spaces. We can then use the split method, giving it an argument of the delimiter, to get an array. The split method will go through the string and create array elements when the delimiter is found, so in between each occurrence of the delimiter a new array element will be created.

var myStr = "1, 2, 3, 4";
console.log(myStr.split(", ")); 

Splice and Slice

The splice and slice methods are used to get sections of an array. The slice method will not affect the array and will return a sub-section of the array. The slice method takes two arguments, the index to start the slice and the index to end the slice. The second argument, the ending index, will not be included in the array as it is exclusive. In the below code the first log statement will print an array with only the number 3 in it, as the number 3 is at the 2nd index in the array and the 3rd index is not included. The second log statement will print an array of the number 1 through 4 as the array has not be affected.

var myList = [1, 2, 3, 4];
console.log(myList.slice(2, 3));
console.log(myList); 

The splice method is similar to the slice method, but it does affect the array. The splice method will remove a slice of the array and takes two arguments. The first argument is the starting index and the second index is how many elements to remove. In the below example the splice is starting at the 2nd index and then removing one element. The splice return, in the first log statement, will return an array with only the number 3 in it. The second log statement will print the number 1 through 4 with the number 3 missing, as the splice method removed it from the array.

var myList = [1, 2, 3, 4];
console.log(myList.splice(2, 1)); 
console.log(myList); 

Concat

The concat method, short for concatenation, is used to join two arrays together. However, it does not affect the array it return the result separately. The below example shows two array and a use of the concat method. The first log statement will print the number 1 through 7, as the two array have been joined together. However the next two log statements will print the arrays as they were created, the number 1 through 4 and then the number 5 through 7. This is because the concat method does not change the array, it returns a new array.

var myList = [1, 2, 3, 4];
var otherList = [5, 6, 7];
console.log(myList.concat(otherList)); 
console.log(myList); 
console.log(otherList); 

The below code examples shows how to use the result of a concat method to change an array. The result of a concat method return a new array, so we must set it's value to a variable. In the below example we create a new variable called 'newList' and set it's value to the result of the concat operation. The first two print statements will print the lists 'myList' and 'otherList' as they're initialised, as they were not changed when using the concat method. The final log statement will print the new variable 'newList' which will be the result of the concat operation and will print the numbers 1 through 7.

var myList = [1, 2, 3, 4];
var otherList = [5, 6, 7];
var newList = myList.concat(otherList);
console.log(myList);
console.log(otherList);
console.log(newList);

There are other methods that can be used with arrays and lists in JavaScript, and you can also create your own custom methods. These are the basic methods that every JavaScript developer should be aware of and know how to use. So take some time and play around with them to really learn how they work.

This article was originally posted on my website: https://acroynon.com/