Array Methods: concat(), includes(), indexOf(), reverse(), slice(), splice()

Array Methods

Let's learn a few array methods! If you want to play around to learn, please open up the console. On a mac you can press command + option + j

.concat()

If we want to combine 2 arrays we can use .concat():

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3); // ['a', 'b', 'c', 'd', 'e', 'f']

.includes()

If we want to check if an array includes a particular value we can call .includes() which will return either true or false:

const animals = ['giraffe', 'elephant', 'dog', 'zebra'];
console.log(animals.includes('dog')); // true
console.log(animals.includes('coyotte')); // false
console.log(animals.includes('elephan')); // false
console.log(animals.includes('Elephant')); // false
console.log(animals.includes('elephant')); // true

.indexOf()

If we want to find the index of a particular value we can call .indexOf which will return an index value:

const animals = ['giraffe', 'elephant', 'dog', 'zebra'];
console.log(animals.indexOf('tiger')); // -1 (not in array)
console.log(animals.indexOf('dog')); // 2

An easy way to check if an item is in an array is to also use .indexOf(). If .indexOf() returns a -1, the item is not in the array, otherwise it is in the array.

const animals = ['giraffe', 'elephant', 'dog', 'zebra'];
if (animals.indexOf('butterfly') === -1) {
   console.log('this animal is not in the array'); // this is what we get
} else {
   console.log('this animal is in the array');
}

reverse()

If we want to reverse an array, we can call .reverse()

const animals = ['giraffe', 'elephant', 'dog', 'zebra'];
animals.reverse();
console.log(animals); // ['zebra', 'dog', 'elephant', 'giraffe']

.slice()

If we want to extract a section of an array, we can call .slice(). This method will take either 0 arguments (returns whole array), 1 argument: an index value (returns this index through the last index), 2 arguments: 2 index values (returns the first index up to - not including - the last index supplied):

const animals = ['zebra', 'dog', 'elephant', 'giraffe'];
const copyAnimals = animals.slice();
console.log(copyAnimals); // ['zebra', 'dog', 'elephant', 'giraffe']

const last3Animals = animals.slice(1);
console.log(last3Animals); // ['dog', 'elephant', 'giraffe']

const first2Animals = animals.slice(0, 2);
console.log(first2Animals); // ['zebra', 'dog']

console.log(animals); // ['zebra', 'dog', 'elephant', 'giraffe']; (remains unchanged)

.splice()

If we want to insert an item into an array we can call .splice(). With .splice() there is also an option to delete elements where we are inserting into. The first argument is the index that we want to insert into, the second argument is the number of items we want to delete, and the third argument is what we want to insert:

const animals = ['zebra', 'dog', 'elephant', 'giraffe'];
animals.splice(1, 0, 'cat'); // will insert cat at index 1
console.log(animals); // ['zebra', 'cat', 'dog', 'elephant', 'giraffe']

animals.splice(2, 2, 'whale'); // will insert whale at index 2 and delete 2 elements from ['zebra', 'cat', 'dog', 'elephant', 'giraffe']
console.log(animals); // ['zebra', 'cat', 'whale', 'giraffe']

MORE METHODS WOOOO! 🎉

Note: for a list of more array methods, check out MDN: Array