🟢 🟢 🟢
Green Methods
Adding and Removing Elements
push(): Adds one or more elements to the end of an array and returns the new length of the array.
let fruits = ['apple', 'banana'];
fruits.push('cherry');
// ['apple', 'banana', 'cherry']
pop(): Removes the last element from an array and returns that element.
let fruits = ['apple', 'banana', 'cherry'];
let last = fruits.pop();
// 'cherry', now fruits = ['apple', 'banana']
shift(): Removes the first element from an array and returns that element.
let fruits = ['apple', 'banana', 'cherry'];
let first = fruits.shift();
// 'apple', now fruits = ['banana', 'cherry']
unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.
let fruits = ['banana', 'cherry'];
fruits.unshift('apple');
// ['apple', 'banana', 'cherry']
Support us! 🙏⭐️
By the way, I'm part of the WebCrumbs team, and it would mean a lot if you could check out our no-code solution for Node.js that simplifies web development. Giving us a star would be fantastic.
We're putting in a ton of effort to help devs take their ideas to a live website as quickly and easily as possible (think: effortless plugin and theme integration), and every bit of support is truly appreciated!
Ok. Now, let's dive back into JavaScript!
🔴 🔴 🔴
Red Methods
Searching and Slicing
indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.
let fruits = ['apple', 'banana', 'cherry'];
let index = fruits.indexOf('banana');
// 1
includes(): Determines whether an array includes a certain element, returning true or false as appropriate.
let fruits = ['apple', 'banana', 'cherry'];
let hasApple = fruits.includes('apple');
// true
slice(): Returns a shallow copy of a portion of an array into a new array object.
let fruits = ['apple', 'banana', 'cherry'];
let someFruits = fruits.slice(0, 2);
// ['apple', 'banana']
🔵 🔵 🔵
Blue Methods
Reordering and Joining
reverse(): Reverses an array in place. The first array element becomes the last, and the last array element becomes the first.
let fruits = ['apple', 'banana', 'cherry'];
fruits.reverse();
// ['cherry', 'banana', 'apple']
concat(): Merges two or more arrays. This method does not change the existing arrays but instead returns a new array.
let fruits = ['apple', 'banana'];
let moreFruits = ['cherry', 'date'];
let allFruits = fruits.concat(moreFruits);
// ['apple', 'banana', 'cherry', 'date']
join(): Joins all elements of an array into a string and returns this string.
let fruits = ['apple', 'banana', 'cherry'];
let result = fruits.join(', ');
// 'apple, banana, cherry'
lastIndexOf(): Returns the last index at which a given element can be found in the array, or -1 if it is not present.
let numbers = [1, 2, 3, 2, 1];
numbers.lastIndexOf(2);
// 3
🟡 🟡 🟡
Yellow Methods
Looping and Iterating
forEach(): Executes a provided function once for each array element.
let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => console.log(fruit));
// 'apple'
// 'banana'
// 'cherry'
map(): Creates a new array with the results of calling a provided function on every element in the calling array.
let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
// [1, 2, 3]
filter(): Creates a new array with all elements that pass the test implemented by the provided function.
let numbers = [1, 4, 9];
let bigNumbers = numbers.filter(number => number > 5);
// [9]
reduce(): Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// 10
some(): Tests whether at least one element in the array passes the test implemented by the provided function. Returns a Boolean.
let numbers = [1, 2, 3, 4];
let hasNegativeNumbers = numbers.some(number => number < 0);
// false
every(): Tests whether all elements in the array pass the test implemented by the provided function. Returns a Boolean.
let numbers = [1, 2, 3, 4];
let allPositiveNumbers = numbers.every(number => number > 0);
// true
find(): Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.
let numbers = [1, 5, 10, 15];
let found = numbers.find(function(element) {
return element > 9;
});
// 10
toString(): Returns a string representing the specified array and its elements.
let fruits = ['apple', 'banana', 'cherry'];
let result = fruits.toString();
// 'apple,banana,cherry'
These methods form the backbone of array manipulation in JavaScript, and knowing how to use them can greatly simplify your coding tasks.
Top comments (19)
I wish this wasn’t just a list of headings. I read it and didn’t feel like I learned anything other than what you are promoting.
Mozilla Developer Network (MDN) has this documentation and more, with explanations and comparability notes. It can be found here: developer.mozilla.org/en-US/docs/W...
Ow, it’s a compilation, yes. I’m sorry you didn’t like it. And thanks for the link. 👍
Very good information but I don't understand the colors. What does "Green" mean vs "Blue"?
Thank you, I’m glad. The colora are just a way of naming the groups in an easier to remember way. But feel free to ignore it and keep the “subtitle” only.
Cheat sheet
array-methods.github.io
Very understable and clear concept. I just like it. It's out of this world.
I'm happy to read this. Thank you, my friend.
Nice post pal.
Really informative and well ordered.
Thank you for this!
Thank You 🙏🏾
What about Array.splice?
I should probably add it to green:
🟢 🟢 🟢
Green Methods
Adding and Removing Elements
splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new ones.
Thank you
Clear article, thanks for share 🙏🏻
Thank you 👍
Thank you!