DEV Community

Megan Paffrath
Megan Paffrath

Posted on

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']
Enter fullscreen mode Exit fullscreen mode

.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
Enter fullscreen mode Exit fullscreen mode

.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
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

.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)
Enter fullscreen mode Exit fullscreen mode

.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']
Enter fullscreen mode Exit fullscreen mode

MORE METHODS WOOOO! 🎉

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more