19 JavaScript Array Methods Everyone Needs to Know
Tags: javascript, beginners, webdev, programming
Published: 2023-11-25 15:34:01

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

```javascript
let fruits = ['apple', 'banana'];
fruits.push('cherry'); 
// ['apple', 'banana', 'cherry']
```

**pop():** Removes the last element from an array and returns that element.

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

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

```javascript
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](https://github.com/webcrumbs-community/webcrumbs) 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!

{% cta https://github.com/webcrumbs-community/webcrumbs %}⭐️ Give WebCrumbs a Star! ⭐️ {% endcta %}

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


{% cta https://github.com/webcrumbs-community/webcrumbs %}⭐ Star the Repo{% endcta %}

{% cta https://webcrumbs.org/ %}📬 Get Newsletters{% endcta %}

{% cta https://discord.gg/ymVgdPe6rK %}💬 Chat on Discord{% endcta %}

{% cta https://github.com/webcrumbs-community/webcrumbs/discussions %}🔧 Discuss and Contribute{% endcta %}