DEV Community

OpenSourcee
OpenSourcee

Posted on • Updated on

19 JavaScript Array Methods Everyone Needs to Know

🟒 🟒 🟒

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

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

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

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

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!

⭐️ Give WebCrumbs a Star! ⭐️

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

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

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

πŸ”΅ πŸ”΅ πŸ”΅

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

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

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

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

🟑 🟑 🟑

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

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

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

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

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

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

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

toString(): Returns a string representing the specified array and its elements.

let fruits = ['apple', 'banana', 'cherry'];
let result = fruits.toString(); 
// 'apple,banana,cherry'
Enter fullscreen mode Exit fullscreen mode

These methods form the backbone of array manipulation in JavaScript, and knowing how to use them can greatly simplify your coding tasks.

⭐ Star the Repo

πŸ“¬ Get Newsletters

πŸ’¬ Chat on Discord

πŸ”§ Discuss and Contribute

Top comments (19)

Collapse
 
manchicken profile image
Mike Stemle • Edited

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...

Collapse
 
opensourcee profile image
OpenSourcee • Edited

Ow, it’s a compilation, yes. I’m sorry you didn’t like it. And thanks for the link. πŸ‘

Collapse
 
sreno77 profile image
Scott Reno

Very good information but I don't understand the colors. What does "Green" mean vs "Blue"?

Collapse
 
opensourcee profile image
OpenSourcee

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.

Collapse
 
dannyengelman profile image
Danny Engelman
Collapse
 
musfiquahaque profile image
Musfiqua haque

Very understable and clear concept. I just like it. It's out of this world.

Collapse
 
opensourcee profile image
OpenSourcee

I'm happy to read this. Thank you, my friend.

Collapse
 
nerro profile image
Nerro

Nice post pal.
Really informative and well ordered.
Thank you for this!

Collapse
 
cyrusakwaboahemmanuel profile image
Promising Notes

Thank You πŸ™πŸΎ

Collapse
 
buchslava profile image
Vyacheslav Chub

What about Array.splice?

Collapse
 
opensourcee profile image
OpenSourcee • Edited

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.

// Syntax: array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
let months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts 'Feb' at index 1: ['Jan', 'Feb', 'March', 'April', 'June']
months.splice(4, 1, 'May');
// Replaces 1 element at index 4: ['Jan', 'Feb', 'March', 'April', 'May']
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ahmedandroi profile image
Ahmedandroi

Thank you

Collapse
 
dvalin99 profile image
Domenico Tenace

Clear article, thanks for share πŸ™πŸ»

Collapse
 
glntn101 profile image
Luke

Thank you πŸ‘

Collapse
 
opensourcee profile image
OpenSourcee

Thank you!

Collapse
 
tree profile image
Root

Thank you on this artical

Collapse
 
nathanb profile image
Nathan Bridgewater

Very concise and clear good job my friend.

Collapse
 
opensourcee profile image
OpenSourcee

Thank you! Wrote for myself and though… why not sharing?

Collapse
 
opensourcee profile image
OpenSourcee

GitHub logo webcrumbs-community / webcrumbs

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

WebCrumbs open graph

WebCrumbs logo

The next evolution in React-based web development

License GitHub Discussions Open Issues GitHub contributors Open for contribution

Wiki Architecture Manifesto Motivation Thoughts Uniqueness FAQ Comparison

Countries

WebCrumbs at X Β  WebCrumbs at Discord

WebCrumbs concept

WebCrumbs open graph

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

  • Plugin Platform: Integrate and manage React plugins to extend functionality effortlessly.
  • No-Code Admin Panel: Control every aspect of your…