Complex Manipulations of Javascript Arrays with Javascript Array Methods

A Javascript array is a special type of variable that holds multiple valid Javascript values. They help developers keep related values and objects together, while also providing the ability to change elements independently without affecting any others.

let example0a = ["a", "c", "c", 1, 2, 3];
example0a[1] = "b";
// Array after this change: ["a", "b", "c", 1, 2, 3];

Javascript arrays are distinct from JSON arrays because the contents of Javascript arrays are changeable. Many methods exist to change their contents or make them easier to handle. The Javascript standard defines 10 different methods specifically designed for manipulating Javascript arrays.

Some Javascript array methods change the contents of the array they act upon, while others do not. Some methods return a new array, while others perform an operation and return the length of the resulting array, and yet others return other, operation-appropriate, values.

This article describes each of the Javascript array methods, what they do, and what values they return. The list of methods is presented in order of increasing complexity, starting with those that don’t change an array’s contents.

Javascript Array Methods that Don’t Change Array Contents

Javascript array methods that don’t change array contents fall into two categories: those that support Javascript printing and those that create a new array from part of an original array’s contents.

Simple array access is sometimes referred to as “an array method,” but this is not correct; array methods provide complex functionality that array accesses do not. Similarly, the length property, which returns the length of an array, is also not an array method.

ToString(): Linearization and Printing

The toString() method converts the contents of an array into a single linear string representation. If an array element has its own toString() method, the Javascript array toString() method calls that instead, rather than trying to convert complex objects itself. The delimiter for the converted string is always a comma without accompanying spaces.

let example1a = ["A", "B", "C", 1, 2, 3];
let example1b = example1a.toString();     // A,B,C,1,2,3

Join(): Linearization and Printing with a Delimiter

The join() method works exactly like toString(), with the added ability to specify a string delimiter between array elements after conversion. The delimiter may be one or more characters.

let example2a = ["A", "B", "C", 1, 2, 3];
let example2b = example2a.join(" | ");  // A | B | C | 1 | 2 | 3

Slice(): Creating a New Array Subset

The slice() method creates a new array from a specified subset of existing contiguous array elements. It requires at least the starting point for the slice and optionally an endpoint, the default being the array’s end. The subset is exclusive; it does not include the final index.

let example3a = ["A", "B", "C", 1 , 2, 3];

// One parameter: subset from index 1 to the end of the array.
let example3b = example3a.splice(1);  // ["B", "C", 1, 2, 3]

// Two parameters: subset from index 2 to index 5, exclusive.
let example3c = example3a.splice(2, 5);  // ["C", 1, 2]

Concat(): Appending Arrays Together

The concat() method appends arrays and creates a new array containing the elements of the component arrays. The method can take as many parameters as necessary, and the parameters can be arrays or strings.

let example4a = ["A", "B", "C"];
let example4b = ["D", "E", "F"];
let example4c = "G";

let example4d = example4a.concat(example4b);
// ["A", "B", "C", "D", "E", "F"]

let example4e = example4a.concat(example4b, example4c);
// ["A", "B", "C", "D", "E", "F", "G"]

Javascript Array Methods that Change Array Contents

All Javascript array methods that change array contents return information about the change that occurred. Some methods return the length of the changed array, while others return the manipulated element or elements.

The functions pop(), push(), shift(), and unshift() are related, implementing basic stack operations, manipulating elements at the beginning or end of an array.

Pop(): Removing the Last Element

The pop() method removes the last element from an array and shortens that array by one index. It then returns the element removed from the array.

let example5a = ["A", "B", "C", "D"];
let example5b = example5a.pop();  // D; ["A", "B", "C"]

Push(): Adding a New Last Element

The push() method adds a new element to the end of an array and lengthens that array by one index. It then returns the new array length.

let example6a = ["A", "B", "C", "D"];
let example6b = example6a.push("E"); // 5; ["A", "B", "C", "D", "E"]

Shift(): Removing the First Element

The shift() method removes the first element from an array and shortens that array by one index. It then returns the element removed from the array.

let example7a = ["A", "B", "C", "D"];
let example7b = example7a.shift();     // A; ["B", "C", "D"]

Unshift(): Adding a New First Element

The unshift() method adds a new element to the beginning of an array and lengthens that array by one index. It then returns the new array length.

let example8a = ["A", "B", "C", "D"];
let example8b = example8a.unshift("Z");  // 5; ["Z", "A", "B", "C", "D"]

Delete(): Removing a Specific Element

The delete() method removes a single array index but does not change the length of the array, leaving the original index undefined. Only use this method if you are certain that you want an undefined element in your array, or if you know that an undefined element will not be problematic for your code.

let example9a = ["A", "B", "C"];
delete example9a[0];  // [undefined, "B", "C"]

Splice(): Adding, Removing, or Replacing Elements

The splice() method is unique because it can add, remove, or replace elements. Its first parameter defines where to add or delete new elements, its second parameter defines how many elements should be removed, and the rest of its variable parameters define which elements should be added into the array.

The method always returns an array of the elements that were deleted. This array may be empty if no elements were deleted.

let example10a = ["A", "B", "C", "D", "E"];

// Delete the first 2 elements
console.log(example10a);  // ["A", "B", "C", "D", "E"]

let example10b = example10a.splice(0, 2);
console.log(example10a);  // ["C", "D", "E"]
console.log(example10b);  // ["A", "B"]

// Replace the last 2 elements
console.log(example10b);  // ["C", "D", "E"]
let example10c = example10b.splice(1, 2, "F", "G");
console.log(example10b);  // ["C", "F", "G"]
console.log(example10c);  // ["D", "E"];

Conclusion

Javascript provides many methods to manipulate the data within arrays. Some of these methods change the contents of the arrays they manipulate, while others do not.

Some sources conflate simple array access and properties with Javascript array methods, so it is important to understand what constitutes a method and what does not. Array methods provide complex functionality, while simple accesses and properties do not.

Enroll in our Intro to Programming Nanodegree Program today to learn more about Javascript array methods and other programming concepts.

Start Learning