JavaScript: Array Methods

Powerful Array Methods

Filter, map, sort, and reduce.

Reference: Wes Bos: JS Array Cardio Practice #JavaScript30 4/30

Converting arrays to strings

toString()
Converts an array to a (comma separated) string.
const names = ["Adam", "Ben", "Chris"];
let newString = names.toString();      // 'Adam,Ben,Chris'

newString;    // 'Adam,Ben,Chris'
names;        // (3) ['Adam', 'Ben', 'Chris']
Notes:
  • Separator is comma
    • Can not change the separator the way join() can.
      names.toString(" - ");
// 'Adam,Ben,Chris'
// (Changing separator doesn't work, still comma separated)
    • Changing the separator by changing rules around toString() is highly not recommended. Use join() instead.
  • Universal automatic toString() for objects.
    • JavaScript automatically converts an array to comma separated string when a primitive value is expected.
    • All JavaScript objects have toString() method.
    • This method is used internally by JavaScript when an object needs to be displayed as a text, like in HTML, or when an object needs to be used as a string.
      const names = ["Adam", "Ben", "Chris"];

document.getElementById("exampleId").innerHTML = names.toString();
// is identical to:
document.getElementById("exampleId").innerHTML = names;
join(separator)
Converts an array to a (chosen-separator separated) string. The default is comma.
const names = ["Adam", "Ben", "Chris"];
let newString = names.join(" - ");      // 'Adam - Ben - Chris'

newString;    // 'Adam - Ben - Chris'
names;        // (3) ['Adam', 'Ben', 'Chris']

"Popping out" and "pushing in" elements at arrays' end

pop()
Pops out the last element from an array.
pop() method returns the popped element.
const names = ["Adam", "Ben", "Chris"];
let popped = names.pop();       // undefined   

names;      // (2) ['Adam', 'Ben']
popped;     // 'Chris'
push(elements)
Pushes in new elements to the end of the array.
push() method returns the new array length.
const names = ["Adam", "Ben", "Chris"];
let pushed = names.push("Dodo");      // undefined

names;      // (4) ['Adam', 'Ben', 'Chris', 'Dodo']
pushed;     // 4
Pushing in several elements is possible
const names = ["Adam", "Ben", "Chris"];
let pushed = names.push("Dodo", "Didi");  // undefined

names;      // (5) ['Adam', 'Ben', 'Chris', 'Dodo', 'Didi']
pushed;     // 5

"Shift out" and "unshift (back in)" elements at array's beginning

And doing so, shifting the rest of the elements

pop-push vs shift-unshift
  • Removal vs addition:
    • pop(): pop out an element, push(): push in an element.
    • shift(): shift out an element, unshift(): unshift (back) in an element.
  • Location:
    • pop-push: Array's end.
    • shift-unshift: Array's beginning.
  • Significance to the rest of the elements:
    • pop-push: Nothing, no position / index shifting
    • shift-unshift: Their positions and indexes are all shifted, because removal/addition happens at index [0]. Because of this overall shifting effect, they called shift-unshift.
shift()
Shifts out the first element from an array.
shift() method returns the shifted out element.
const names = ["Adam", "Ben", "Chris"];
let shifted = names.shift();     // undefined   

names;      // (2) ['Ben', 'Chris']
shifted;    // 'Adam'
unshift(elements)
Unshift (back) in a new element to the beginning of the array.
unshift() method returns the new array length.
Unshifting multiple elements is possible.
const names = ["Adam", "Ben", "Chris"];
let unshifted = names.unshift("Dodo", "Didi");     // undefined

names;      // (5) ['Dodo', 'Didi', 'Adam', 'Ben', 'Chris']
unshifted;  // 5

Changing elements

[index]
Changing an element can be done simply by accessing it using its index number.
const names = ["Adam", "Ben", "Chris"];
names[1] = "Dodo";    // 'Dodo'

names;      // (3) ['Adam', 'Dodo', 'Chris']

Array length

length property
Not just great to know the array's length (numbers of elements, but provides an easy way to add an element at the end of the array.
const names = ["Adam", "Ben", "Chris"];
names.length;                      // 3
names[names.length] = "Dodo";      // 'Dodo'

names;          // (4) ['Adam', 'Ben', 'Chris', 'Dodo']
names.length;   // 4

Operator delete

delete
Operator delete only removes the content of an element, as addressed by the index number, without removing the spot itself. Leaving an undefined hole.
For removing elements without leaving holes, use other methods:
  • pop() for removing the last element
  • shift() for removing the first element
  • splice(index, number) for removing a certain number of elements at a certain position.
const names = ["Adam", "Ben", "Chris"];
delete names[1];      // true 

names;          // (3) ['Adam', empty, 'Chris']
names[1];       // undefined

Concatenate arrays

concat()
Creates a new array by concatenating existing arrays.
Notes: It creates a new array. It didn't change the original arrays.
const namesAB = ["Adam", "Ben"];
const namesCD = ["Chris", "David"];
const namesABCD = namesAB.concat(namesCD);

namesABCD;      // (4) ['Adam', 'Ben', 'Chris', 'David']
namesAB;        // (2) ['Adam', 'Ben'] 
namesCD;        // (2) ['Chris', 'David']
The method can take any number of array arguments.
const namesAB = ["Adam", "Ben"];
const namesCD = ["Chris", "David"];
const namesEF = ["Ed", "Frank"];
const namesGH = ["Gerry", "Harry"];
const namesAtoH = namesAB.concat(namesCD, namesEF, namesGH);

namesAtoH;      // (8) ['Adam', 'Ben', 'Chris', 'David', 'Ed', 'Frank', 'Gerry', 'Harry']
The method also can take a string as an arguments.
const namesAC = ["Adam", "Ben", "Chris"];
const namesABCD = namesAC.concat("Dodo");

namesABCD;      // (4) ['Adam', 'Ben', 'Chris', 'Dodo']
Or multiple strings...
const namesAC = ["Adam", "Ben", "Chris"];
const namesABCD = namesAC.concat("Dodo", "Didi");

namesABCD;      // (5) ['Adam', 'Ben', 'Chris', 'Dodo', 'Didi']
Or combinations
const namesAB = ["Adam", "Ben"];
const namesCD = ["Chris", "David"];
const namesEF = ["Ed", "Frank"];
const namesGH = ["Gerry", "Harry"];
const namesAtoH = namesAB.concat(namesCD, "Dodo", "Didi", namesEF, namesGH);

namesAtoH;      // (10) ['Adam', 'Ben', 'Chris', 'David', 'Dodo', 'Didi', 'Ed', 'Frank', 'Gerry', 'Harry']

Splicing and slicing arrays

splice()
Replaces (adds in and takes out) elements of array in certain position.
Parameters:
  • 1st: Position (index) of splice
  • 2nd: Number of elements taken out.
  • The rest: The new elements to be added.
Returns: an array with taken out items.
Original array is changed.
const names = ["Adam", "Ben", "Chris", "Daniel", "Ed"];
let newNames = names.splice(1, 3, "Dodo", "Puffin");      // undefined

newNames;     // (3) ['Ben', 'Chris', 'Daniel']
names;        // (4) ['Adam', 'Dodo', 'Puffin', 'Ed']
slice()
Slices out a piece of an array into a new array.
Parameters:
  • 1st: Marking the beginning of the slice. This is index of the the first element in the slice. "Start with this element."
  • 2nd (optional): Marking the end of the slice. This is index of the first element that is no longer part of the slice. "End before this element."
Original array is not changed
const names = ["Adam", "Ben", "Chris", "Daniel", "Ed"];
let slicedA = names.slice(2);     // undefined
let slicedB = names.slice(2, 4);  // undefined

slicedA;      // (3) ['Chris', 'Daniel', 'Ed']
slicedB;      // (2) ['Chris', 'Daniel']
names;        // (5) ['Adam', 'Ben', 'Chris', 'Daniel', 'Ed']

Other methods and properties

Sorting
W3 Schools: JavaScript Sorting Arrays
Finding max and min value
No built-in functions
W3 Schools: JavaScript Sorting Arrays
Complete array reference
W3 Schools: JavaScript Array Reference

References