Arrays Cheat Sheet - JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2023-01-23 04:49:06


## Introduction

Hi guys, today I'm going to explain the built-in functions in arrays in JavaScript.

This means that you do not need dozens of videos that explain the functions or old documents, and I will try to explain each function in short and well explained.

***

## Arrays

Arrays are used to store multiple values in a single variable. This is compared to a variable that can store only one value.

Each item in an array has a number attached to it, called a numeric index, that allows you to access it. In JavaScript, arrays start at index zero and can be manipulated with **various methods**. [*[MDN Reference](https://developer.mozilla.org/en-US/docs/Glossary/Array)*]

**In this lesson, we will explain those methods**

***

## `Array.push()` method

Well, our first function is `push`, which is to add a new element to the end of an array.

**Let's see an example:**

```javascript
// Array
let myArray = [1, 2, 3, 4];

// Add new element
myArray.push(5);

// Print:
console.log(myArray);
```

**Output**

```javascript
[1, 2, 3, 4, 5]
```

As you can see, a new element has been added to the array.

**The push function can add more than one element.**

```javascript
// Array
let myArray = [1, 2, 3, 4];

// Add more than one element
myArray.push(5, 6, 7, 8);

// Print:
console.log(myArray);
```

**Output**

```javascript
[
  1, 2, 3, 4,
  5, 6, 7, 8 
]
```

`push` function adds the elements at the end of the array, and there's another function adds the elements at the beginning of the array called `unshift`.

***

## `Array.unshift()` method

The `unshift()` method adds one or more elements to the beginning of an array and returns the new length of the array.

**Let's see an example**

```javascript
// Array
let myArray = [1, 2, 3, 4];

// Add elements
myArray.unshift(5, 6, 7, 8);

// Print:
console.log(myArray);
```

**Output**

```javascript
[
  5, 6, 7, 8,
  1, 2, 3, 4
]
```

This is how we knew how to add an element at the end of the array and at the beginning of the array, but what about deletion?

***

## `Array.pop()` method

The `pop()` function removes the last element of the array.

**Example**

```javascript
// Array
let myArray = [1, 2, 3, 4];
console.log("Before deletion", myArray);

// Remove last element
myArray.pop();
console.log("After deletion", myArray);
```

**Output**

```
Before deletion [ 1, 2, 3, 4 ]
After deletion [ 1, 2, 3 ]
```

As you can see, this function does not take parameters, because it deletes the last element only

Well, now how do I delete the first element in the array?

***

## `Array.shift()` method

The `shift()` function removes the first element from the array.

**Let's see an example**

```javascript
// Array
let myArray = [1, 2, 3, 4];

console.log("Before deletion", myArray);

// Remove first element
myArray.shift();

// Print:
console.log("After deletion", myArray);
```

**Output**

```
Before deletion [ 1, 2, 3, 4 ]
After deletion [ 2, 3, 4 ]
```

Now we know the addition and deletion, but there are still a lot of functions in the array.

***

## `Array.includes()` method

This function performs a check on the array and sees if it contains a specific element or not, It returns `true` or `false`.

This function takes a parameter which is the element you want to search for.

```javascript
// Array
let myArray = [1, 2, 3, 4];

// Search for element
console.log(myArray.includes(1));
console.log(myArray.includes(100));
```

**Output**

```js
true
false
```

As you can see:

- because the first element exists in the array, it returns `true`.
- Because the second element does not exist in the array, it returns `false`.

***

## `Array.reverse()` method

The `reverse()` function reverses the elements in the array

**Example**

```js
// Array
let myArray = [1, 2, 3, 4];

// Reverse elements
myArray.reverse();

// Result:
console.log(myArray);
```

**Output**

```js
[ 4, 3, 2, 1 ]
```

***

## `Array.sort()` method

The `sort()` function sort the elements in the array.

**Let's see an example**

```js
// Array
let myArray = [5, 4, 3, 2, 1];

// Sort elements
myArray.sort();

// Result:
console.log(myArray);
```

**Output**

```js
[ 1, 2, 3, 4, 5 ]
```

Note that if there are two-digit numbers, the order will be incorrect.

```javascript
// Array
let myArray = [5, 4, 3, 20, 10];

// Sort elements
myArray.sort();

// Result:
console.log(myArray);
```

**Output**

```js
[ 10, 20, 3, 4, 5 ]
```

Is ten and twenty greater than the two? Here you are facing a problem, how are you going to solve that problem?

**Solving this problem is easy, let's see how to solve it:**

```js
// Array
let myArray = [5, 4, 3, 20, 10];

// Fix Problem:
myArray.sort((a, b) => a - b);

// Result:
console.log(myArray);
```

**Output**

```js
[ 3, 4, 5, 10, 20 ]
```

***

## `Array.isArray()` static method

The Array.isArray() static method determines whether the passed value is an Array. *[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)*

the `isArray` static method returns `true` if the parameter is an array, otherwise returns `false`.

**Let's see an example:**

```js
// Array
let myArray = [5, 4, 3, 20, 10];

let myObject = {};

// isArray
console.log(Array.isArray(myArray));
console.log(Array.isArray(myObject));
```

**Output**

```js
true
false
```

***

## `Array.join()` method

The `join` function converts an array into a string.

**Let's see an example:**

```js
// Array
let myArray = [5, 4, 3, 20, 10];

// Convert to string
let myString = myArray.join("");

// Result:
console.log(myString);
```

**Output**

```
5432010
```

This function takes a parameter, which is the separator between the elements.

```js
// Array
let myArray = [5, 4, 3, 20, 10];

// Convert to string with sperator
let myString = myArray.join("|||");

// Result:
console.log(myString);
```

**Output**

```
5|||4|||3|||20|||10
```

***

## `Array.at()` method

The `at` function takes the index as a parameter, and returns the value of the index.

**Let's see an example**

```javascript
// Array
let myArray = [1, 2, 3, 4, 5];

// `at` method
console.log(myArray.at(0))
console.log(myArray.at(1))

// Last index
console.log(myArray.at(-1))

// `undefined`
console.log(myArray.at(100))
```

**Output**

```js
1
2
5
undefined
```

***

## `Array.splice()` method

The `splice()` method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

```js
// Array
let myArray = [1, 2, 3, 4, 5];

// start from `0` index
// Remove 2 elements
myArray.splice(0, 2)

// Print the array
console.log(myArray);
```

**Output**

```js
[ 3, 4, 5 ]
```

**Another example**

```js
// Array
let myArray = [10, 40, 50, 60, 70];

// start from `0` index
// Don't delete anything
// Add `20..30` elements
myArray.splice(1, 0, 20, 30)

// Print the array
console.log(myArray);
```

**Output**

```js
[
  10, 20, 30, 40,
  50, 60, 70
]
```

***

## `Array.slice()` method

he `slice()` method returns a shallow copy of a portion of an array into a new array object selected from start to end.

**Example**

```js
// Array
let myArray = [10, 40, 50, 60, 70];

// Slice
let slice = myArray.slice(0, 2);

// Print slice
console.log(slice);

// The original array will not be modified.
console.log(myArray);
```

**Output**

```js
[ 10, 40 ]
[10, 40, 50, 60, 70]
```

***

## `Array.some()` method

`some` function returns `true` if, in the array, it finds an element for which the provided function returns `true`; otherwise it returns `false`.

**For example:**

```javascript
// Array
let myArray = [10, 40, 50, 60, 70];

// Test
console.log(myArray.some((ele) => ele == 10));
console.log(myArray.some((ele) => ele == 20));
```

**Output**

```js
true
false
```

## `Array.every()` method

This function also returns `true` or `false`, but all elements must be equal to the element that you are searching for.

**Example**

```javascript
// Array
let myArray = [10, 10, 10, 10, 10];

// Test
console.log(myArray.every((ele) => ele == 10));
console.log(myArray.every((ele) => ele == 20));
```

**Output**

```js
true
false
```

***

## `Array.map()` method

The `map()` method creates a new array populated with the results of calling a provided function on every element in the calling array. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

**Let's see an example:**

```js
// Array
let myArray = [1, 2, 3, 4, 5];

// Create new array
let newArr = myArray.map(ele => {
    return ele * 2;
});

// Result:
console.log(newArr);
```

**Output**

```js
[ 2, 4, 6, 8, 10 ]
```

***

## `Array.filter()` method

`filter` method filtered down to just the elements from the given array that pass the test implemented by the provided function.

**Example**

In this example, we only want to return elements greater than **five**, and we remove the remaining elements

```js
// Array
let myArray = [1, 2, 3, 4, 5, 6, 7, 8];

// Filter an array
let newArr = myArray.filter(ele => {
    if (ele > 5) {
        return ele;
    }
});

// Result:
console.log(newArr);
```

***

## `Array.reduce()` method

Reduce the array to a single value. The value returned by the function is stored in an accumulator (result/total).

```js
// Array
let myArray = [1, 2, 3, 4, 5, 6, 7, 8];

// Reduce
let reduce = myArray.reduce((total, item) => {
    return total + item
}, 0);

// Result:
console.log(reduce);
```

**Output**

```js
36
```

***

## `Array.reduceRight()` method

The same use as the previous function, but starting from right to left.

**Example**

```js
// Array
let myArray = [1, 2, 3, 4, 5, 6, 7, 8];

// reudceRight
let reduce = myArray.reduceRight((prev, curr) => {
    return prev + curr;
}, 0)

// Result:
console.log(reduce);
```

**Output**

```js
36
```

***

## `Array.fill` method

Fill the elements in an array with a specific value.

**Example**

```js
// Array
let myArray = [1, 2, 3, 4, 5, 6, 7, 8];

// Fill
myArray.fill(1);

// Result:
console.log(myArray);
```

**Output**

```
[
  1, 1, 1, 1,
  1, 1, 1, 1
]
```


***

## `Array.indexOf` method

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

**Example**

```js
// Array
let myArray = [1, 2, 3, 4, 5, 6, 7, 8];

// Tests
console.log(myArray.indexOf(5));
console.log(myArray.indexOf(8));
console.log(myArray.indexOf(11));
```

**Output**

```
4
7
-1
```

Note that the index was returned to the value that we entered in the first and second examples, and it returned `-1` in the third example because it did not find that value.

***

## Conclusion

In that article, we talked about many built-in functions in the array in JavaScript, and if you liked that lesson, I will do a lesson for the built-in functions in the strings.

And you should know that there are more functions than these, but I explained the most popular and most used.

### Thank you for reading

Thank you for reading my blog. 🚀 You can find more on [my blog](https://mo-ibra.com/articles) and connect on [Twitter](https://twitter.com/MoIbrraa)