A Beginner's Guide to Manipulating Arrays in Javascript

JS_Manipulation_Arrays.jpg In simple terms, arrays in Javascript allows you to store multiple values in a single variable. The values stored could be strings, numbers, arrays e.t.c.

const quote = ["stay", true, 2, "yourself"]; 
/* A simple array taking multiple values */

In this article, I would be highlighting a few array methods for array manipulation, each with an example to illustrate how to use them.

Some Array Methods in Javascript

Array methods are built-in functions that can be applied to arrays to make changes or perform an operation. These methods save the developer, time and effort in writing functions to perform the required operation from scratch.

1. push()

This method "pushes" new item(s) to the end of the array and returns the new length of the array.

var foods = ["bread", "egg", "fish"];
foods.push(["rice", "beans"]);

console.log(foods); 
/* ["bread", "egg", "fish", "rice", "beans"]*/

2. pop()

This method is used to remove the last item from an array and returns that item.

var foods = ["bread", "egg", "fish", "rice", "beans"];
var popped = foods.pop(); 

console.log(popped); // "beans"
console.log(foods); /* ["bread", "egg", "fish", "rice"]*/

3. shift()

This method removes the first element of an array and returns that item.

var foods = ["bread", "egg", "fish", "rice", "beans"];
var removed = foods.shift(); 

console.log(removed); // "bread"
console.log(foods); /* ["egg", "fish", "rice", "beans"]*/

4. unshift()

This method adds new item(s) to the beginning of an array and returns the new length of the array.

var books = ["sci-fi", "adventures"];
books.unshift("fantasy");

console.log(books); 
/* ["fantasy", "sci-fi", "adventures"]*/

5. splice()

This method allows us to remove/replace an existing element or add a new element to an array. This method changes the original array. splice() can take up to 3 parameters.

var countries = ["China", "Italy", "England"];
countries.splice(1, 0, "Brazil");

console.log(countries); 
/* ["China", "Brazil", "Italy", "England"] */

The first parameter in splice() defines the start index to begin insertion, the second parameter defines the number of element to be removed after the start index (in our case, it's zero - meaning, no element should be removed), then the last parameter specifies the element to be added to the array.

Removing elements

splice() can take just two parameters as well. The first being the start index to begin deletion of items while the second indicates how many items are to be removed.

var countries = ["China", "Brazil", "Italy", "England"];
countries.splice(2, 1);

console.log(countries);
/* ["China", "Brazil", "England"] */

6. slice()

This method extracts a given part of the array and returns the extracted parts as a new array object. slice() takes just two parameters - the first being the index to begin extraction while the second is the index to end extraction (not including the item at that index). The array itself is not modified.

var shapes = ["square", "circle", "triangle", "trapezium"];
var sliced = shapes.slice(1, 3);

console.log(sliced); 
/* ["circle", "triangle"]*/

7. indexOf()

This method returns the index or position of the given element or -1 if the element does not exist.

var shapes = ["square", "circle", "triangle", "trapezium"];
console.log(indexOf("circle")); // 1 
console.log(indexOf("oval")); // -1

8. filter()

This method creates a new array by returning the items that return true.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = numbers.filter(number => number > 5);

console.log(result); // 6, 7, 8, 9, 10

9. map()

This method creates a new array by "doing something" with each item in the array.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(number => number * 2);

console.log(result);
/* 2, 4, 6, 8, 10 */

10. reduce()

This method executes a function on each value of an array to return a single value. The return value is stored in an accumulator.

const numbers = [1, 2, 3, 4, 5];
const result = (accumulator, currentValue) => accumulator + currentValue;

console.log(numbers.reduce(result));  // 15

Conclusion

The array methods highlighted above are just a few, there are many other array methods to explore. For further reading on array methods and other topics, you can check out resources at MDN and freecodecamp . These websites have greatly influenced my learning.

If you enjoyed reading this article, feel free to leave a reaction, comment and share. Thanks for reading.