Category: Javascript

In this tutorial we are going to review the most common and used methods to manipulate arrays in Javascript. A cheat
sheet of array methods are listed below:

To add/remove elements:

• push(...items) – add an item to the end of array.
  Example:
  const arr = ["Black", "Green", "Yellow", "Red"];
arr.push("Orange"); // Adds "Orange"
• pop() – extracts an item from the end of array.
  Example:
  const arr = ["Black", "Green", "Yellow", "Red"];
const str = arr.pop(); // Removed "Red" from arr and assign
it to str
• shift() – extracts an item from the beginning of array.
  Example:
  const arr = ["Black", "Green", "Yellow", "Red"];
const str = arr.shift(); // Removed "Black" from arr and
assign it to str
• unshift() – adds items to the beginning of array and returns the new length.
  Example:
  const arr = ["Black", "Green", "Yellow", "Red"];
const str = arr.unshift("Orange", "Violet"); // Adds
["Orange", "Violet"] to the beginning or arr which will now be ["Orange", "Violet", "Black", "Green", "Yellow",
"Red"] and assign new length i.e 6 to str
• splice(pos, deleteCount, ...items) – at
  index pos deletes deleteCount elements and inserts items
  Example:
  const arr = ["Black", "Green", "Yellow", "Red"]; arr.splice(2, 0, ["Orange", "Violet"]); // Adds ["Orange",
"Violet"] after "Green", new arr will now be [ "Black", "Green", "Orange", "Violet", "Yellow", "Red"]
• slice(start, end) – creates a new array, copies elements from
  index start till end (not inclusive) into it.
  Example:
  const arr = ["Black", "Green", "Yellow", "Red"];
const arrNew = arr.slice(1, 3); //Assign ["Green", "Yellow"]
to arrNew, arr remains unaffected
• concat(...items) – returns a new array: copies all members of the current one and
  adds items to it. If any of items is an array, then its elements are taken.
  Example:
  const arr = ["Black", "Green", "Yellow", "Red"];
const arr2 = ["Violet", "Pink"];
const arrConcated = arr.concat(arr2); //new array with Values ["Black", "Green", "Yellow", "Red", "Violet", "Pink"], arr and arr2 remains unaffected

To search among elements:

• indexOf/lastIndexOf(item, pos) – look for item starting from
  position pos, return the index or -1 if not found.
  Example:
  const arr = ["Black", "Green", "Yellow", "Red", "Green"];
const found = arr.indexOf("Green"); //returns 1
const foundLast = arr.indexOf("Green"); //returns 4 i.e the lastIndex
• includes(value) – returns true if the array has value,
  otherwise false.
  Example:
  const arr = ["Black", "Green", "Yellow", "Red"];
const found = arr.includes("Green"); //returns true
• find/filter(func) – filter elements through the function, return first/all values that
  make it return true.
  Example:
  const arrAge = [15, 18, 21, 12];
const arrFiltered = arrAge.filter(function(currentValue, index, arr){
return currentValue > 15 }); //returns all ages greater than 18 i.e [18, 21]
const intFind = arrAge.find(function(currentValue, index, arr){ return currentValue > 18 }); //returns the first age found greater than 18 i.e 21
• findIndex –  is like find, but returns the index instead of a value.
  Example:
const arrAge = [15, 18, 21, 12];
const intIndexFound = arrAge.findIndex(function(currentValue, index, arr){ return currentValue > 15 }); //returns the first index of
age found greater than 15 i.e 1

To iterate over elements:

• forEach(func) – calls func for every element, does not return anything.
  Example:
  const arrAge = [15, 18, 21, 12];
arrAge.forEach(function(item, index, arr){ arr[index] = item * 2; }); //[30,36,42,24]


To transform the array:

• map(func) – creates a new array from results of calling func for every element.
  Example:
  let arr = [15, 18, 21, 12];
arr = arr.map(int => { return int * 2 } );
//[30,36,42,24]
• sort(func) – sorts the array in-place, then returns it.
  Example:
  let arr = [15, 18, 21, 12];
arr.sort((a, b) => (a > b ? -1 : 1));
//[12,15,18,21]
• reverse() – reverses the array in-place, then returns it.
  Example:
  let arr = [15, 18, 21, 12];
arr.reverse(); //[12,21,18,15]
• split/join – convert a string to array and back.
  Example:
  //split const str = "Hello There";
const arr = str.split(" "); //returns ["Hello",
"There"] //join
const arr = [12,21,18,15]; arr.join() // Returns "12,21,18,15"
• reduce/reduceRight(func, initial) – calculate a single value over the array by
  calling func for each element and passing an intermediate result between the calls.

Other Functions:

• Array.isArray(arr) checks arr for being an array.

Please note that methods sort, reverse and splice modify the array itself. These
methods are the most used ones, they cover 99% of use cases.