HomeAbout

Array Methods

Chaining Methods

Prefer chaining methods back to back than creating new variable every transformation:

const newArr = [];

newArr
  .filter(x => x === true)
  .map(el => el)

Original Array Mutability

// non-mutating methods
array.map()
array.slice()
array.concat()
[...array] // spread operator
array.filter()

// mutating methods
array.push()
array.unshift()
array.pop()
array.shift()
array.splice()

Immutable Methods

To keep the integrity of the original array, you need to use .slice() to the original array to make exact value copy of it.

const arr = [1, 2, 3];

// immutable
function immutableRemoveElBack(arr) {
  const nArr = arr.slice(0, arr.length-1);

  return nArr;
}

// instantiate deep copy
const newArr = immutableRemoveElBack(arr);

console.log(arr); // [1, 2, 3] original untouched
console.log(newArr); // [1, 2] deep copy

Mutating Methods

// original
const arr = [1, 2, 3];

function mutableRemoveElBack(arr) {
  let nArr = arr;
  nArr.pop();
  return nArr;
}

const newArr = mutableRemoveElBack(arr);

console.log(arr); // [1, 2] modified
console.log(newArr); // [1, 2]

Common Methods

/* Element Modifiers */
arr.shift() // remove first; return removed element
arr.unshift() // add to first; return new length of array
arr.pop() // remove last; return removed element
arr.push() // add to end; return new length of array

/* Filter => shallow copy; original unmodified */
const filteredItems = items.filter( item => {
  return item.price <= 100;
});

/* Map => shallow copy; original unmodified */
const items = [1,2,3];
const itemNames = items.map( item => {
  return item + 1;
}); // [2,3,4]

/* Find => returns first matching element of condition callback */
const foundItem = items.find( item => {
  return item.name === "book";
});

/* FindIndex => index of first matching element; when no match, return -1 */
const array = [1,2,3];

const found = array.findIndex( item => {
  return item > 2;
});

console.log(found); // 2

/* IndexOf => returns int */
// used to find the index of value matching
// uses strictly equals operator `===`
const beasts = ["ant", "bison", "camel", "duck", "bison"];
beasts.indexOf("bison"); // 1
beasts.indexOf("giraffe"); // -1
// Start from index 2
beasts.indexOf("bison", 2); // 4

/* Slice => returns shallow copy (new array); does not modify original */
const animals = ["ant", "bison", "camel", "duck", "elephant"];
// start only
animals.slice(2); // ["camel", "duck", "elephant"]
// start and end (end index is excluded)
animals.slice(2, 4); // ["camel", "duck"]
// last n-number of elements
animals.slice(-2); // ["duck", "elephant"]

/* Splice => returns removed items in an array format; modifies original array */
array.splice(start_index, deleteCount, item_to_add, more_add)
// when adding at a start_index, old element is pushed to the right to start_index+1
// deletes first before adding new elements
const months = ["January", "Feb", "April", "May", "June", "July"];
months.splice(2, 2, "March", "August"); // returns ["April", "May"]
console.log(months); // ["January", "Feb", "March", "August", "June", "July"]

/* Sort => returns reference to same array; modifies original */
const months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months); // ["Dec", "Feb", "Jan", "March"]

/* Includes => boolean for whether array contains a value */
const items = [1,2,3];
const includesTwo = items.includes(2); // true

/* Some => returns boolean for whether ANY ONE element is matching */
const items = [1];
const expensiveItem = items.some( item => {
  return item <= 100;
}); // true

/* Every => returns boolean of whether every single item meets the condition */
const lessThanHundred = items.every( item => {
	return item < 100;
});

/* Reversed => returns reversed array; modifies original also */
const array1 = ["one", "two", "three"];
const arr2 = array1.reverse();

/* Join => returns string */
const elements = ["Fire", "Air", "Water"];
elements.join(); // "Fire,Air,Water"
elements.join(""); // "FireAirWater"
elements.join("-"); // "Fire-Air-Water"

/* forEach => undefined */
items.forEach( item => {
  console.log(item.name);
});

/* Reduce */
const total = items.reduce( (carryover, item) => {
  return item.price + carryover;
}, 0); // 0 is the starting value

.forEach()

forEach method calls a function once for each element in array in order

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element)); 
// a b c

Example of Creating New Modified Array

const numbers = [1,2,3];
const newNumbers = [];
numbers.forEach((x) => newNumbers.push(x*2));
console.log(newNumbers); // [2,4,6]

Chaining indexOf() and forEach() to remove duplicates from Array

function removeDup(arr) {
  const result = [];
  // iterate through passed array, check if the index is its first occurence of item
  arr.forEach((item, index) => { 
    if (arr.indexOf(item) == index) {
      result.push(item)
    }
  });
  return result
}

.from()

Static method creates a new, shallowed-copied Array instance from an iterable or array-like object

  • Iterable
    • e.g. Map, Set
  • Array-like object
    • objects with a length property and indexed elements
/* String iterated as array */
Array.from('foo'); // ["f", "o", "o"]

/* Array iterated and modified */
Array.from([1, 2, 3], (x) => x*2); // [2, 4, 6]

Async iterables

When dealing with async iterables, use Array.fromAsync()

.isArray()

Determines whether the passed value in an array in boolean

Array.isArray([1, 2, 3]) // true
Array.isArray({foo: 123}) // false
Array.isArray('foobar') // false
Array.isArray(undefined)  // false

.join()

creates and returns a new string by concatenating all of the elements in the array

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// "Fire,Air,Water"

console.log(elements.join(''));
// "FireAirWater"

console.log(elements.join('-'));
// "Fire-Air-Water"

console.log(elements.join(', '));
// "Fire, Air, Water"

.length()

returns number of elements in an array

x = ["one", "two"].length; // 2

Accessing last element

let lastIndex = array.length-1;
let lastElement = array[lastIndex];

.some()

Tests whether at least one element in the array passes the test implemented by the provided function

  • returns boolean
  • it does not modify the array
const array = [1, 2, 3, 4, 5];

// Checks whether an element is even
const isEven = (el) => el % 2 === 0;

array.some(isEven); // true
AboutContact