🟢 🟢 🟢
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)
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.
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.
Clear article, thanks for share 🙏🏻
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 👍
Thank you!
Nice post pal.
Really informative and well ordered.
Thank you for this!
Thank You 🙏🏾
Create and modify React websites and applications with a no-code interface and powerful plugins, enriched by the community. 🌟 Star to support our work!
Catch the Latest Innovations: Get Your Monthly Dose of WebCrumbs Insights
The next evolution in React-based web development
Quick actions:
Introduction
WebCrumbs aspires to be an industry-standard solution for React applications, positioned as the "WordPress for React." Whether you're a developer or not, you'll find it effortless to create, manage, and scale your React-based websites using our intuitive admin panel.
Your Support Matters
If you find value in what WebCrumbs aims to achieve, consider starring ⭐️ us on GitHub. Your endorsement is crucial in helping us refine our product and grow our community. Star WebCrumbs on GitHub.
Key Features