# JavaScript Arrays and Array Methods

Arrays are used to store multiple values in a single variable. It is often used when we want to store a list of elements and access them by a single variable. In JavaScript, an array can contain elements of different `datatypes` 🤩

Here is an example:

```javascript
let array = [11, "twelve", true, ....];
```

Let's see another example 👇

A variable 'names' is declared using the keyword `let` and 5 names (`elements`) are stored in it. Each item in an array has a number attached to it, called index value that allows you to access the elements in the array. In JavaScript array starts at the index `0` and can be manipulated with various methods.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
```

The index value of 'Shon' is `0` , the index value of 'Shine is `1` and so on.

Let's console log the above code and see the output.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names);
// output [ 'Shon', 'Shine', 'Sharone', 'Bhavya', 'Preksha' ]
```

Before diving into the array methods, let's walk through some of the array properties

# Properties of Array

## Length property

The `length` property of an `array` shows the number of elements in that array.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names.length);
// output: 5
```

## Index value

We will now see how can we access the individual elements in the array with the help of the index value

### Accessing individual elements in an array

To access the individual elements of an array, use the variable 'names' followed by the element's index in square brackets. Array indexes start at `0` and end at its `length-1`.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names[3]);
// output: Bhavya
```

### Accessing the last element of an array when you don't know the length of the array

To get the last item of an array when you don't know the length of that array yet JavaScript arrays start from `0.`So if we want to figure out the index of the last item in a JavaScript array, we can subtract 1 from the length of the array:

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names[names.length - 1]);
// output: Preksha
```

### Replacing an element of an array

In the below example, we are accessing and replacing 'Sharone' with 'Rithu' by using the index value.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
names[2] = "Rithu";
console.log(names);
// output [ 'Shon', 'Shine', 'Rithu', 'Bhavya', 'Preksha' ]
```

# Array Methods

## Push() method

The `push()` method adds one element to the end of an array. `push()` the method modifies the original array

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
names.push("Vyom");
console.log(names);
// output: [ 'Shon', 'Shine', 'Sharone', 'Bhavya', 'Preksha', 'Vyom' ]
```

## Slice() method

The `slice()` method is used to fetch the selected elements of the array and returns them in a new array. The `slice()` method selects from a given *start*, up to a not inclusive given *end*. The original array will not be modified.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names.slice(0, 3));
// output [ 'Shon', 'Shine', 'Sharon' ]
```

## Splice()method

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

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
names.splice(2, 1, "Rithu", "Ivin");
console.log(names);
// output [ 'Shon', 'Shine', 'Rithu', 'Ivin', 'Bhavya', 'Preksha' ]
```

The first argument ie `2` says from where the adding of new elements should start in the array. And the optional second argument says how many elements should be removed from the array

## Concatenation

The `concat()` method joins two or more arrays. It does not modify the original array.

```javascript
let avengers = ["Hawkeye", "Thor", "Captain America"];
let weapons = ["Bow", "Hammer", "Shield"];
console.log(avengers.concat(weapons));
// output: ['Hawkeye','Thor','Captain America','Bow','Hammer','Shield']
```

## Fill() method

The `fill()` method changes all elements in an array to a static value, from a start index(default `0`) to an end index (default `array.length`). It modifies the original array.

```javascript
let array = [1, 2, 3, 4, 5];
console.log(array.fill("shon"));
//output: [ 'shon', 'shon', 'shon', 'shon', 'shon' ]
```

You can specify the start and end position as in the example given below.

```javascript
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.fill("shon", 2, 4);
console.log(arr);
// output [1, 2 'shon', 'shon', 5, 6, 7, 8, 9]
```

The start argument is 2 and the end argument is 4. So the numbers 3 and 4 which are at the index of 2 and 3 are replaced by 'shon'. The end argument is not inclusive.

## includes() method

The `includes()` method returns `true` if an array contains a specified value. It returns `false` if the value is not found.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names.includes("Shon"));
// output: true
```

## IndexOf()

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.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names.indexOf("Shon"));
// output : 0

console.log(names.indexOf("Ethan"));
// output -1
```

## isArray()

The `Array.isArray()` static method determines whether the passed value is an array.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(Array.isArray(names));
// output: true

let name = "Shon";
console.log(Array.isArray(name));
//output: false
```

## The join()

The `join()` method creates and returns a new string by concatenating all of the elements in an array, separated by commas or specified separator strings. It does not modify the original array.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names.join());
// output : Shon,Shine,Sharone,Bhavya,Preksha
console.log(names.join(""));
//output: ShonShineSharoneBhavyaPreksha
console.log(names.join(" "));
// output : Shon Shine Sharone Bhavya Preksha
console.log(names.join("-"));
// output : Shon-Shine-Sharone-Bhavya-Preksha
```

## LastIndexOf

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

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Shon", "Preksha"];
console.log(names.lastIndexOf("Shon");
// output : 4
console.log(names.lastIndexOf("Ethan"));
//output: -1
```

## map() method

The `map()` creates a new array calling a function for every array element.

`map()` calls a function once for each element in an array. `map()` doesn't modify the original array.

```javascript
let nums = [1, 2, 3, 4, 5];
console.log(nums.map((x) => x + 10));
// output [10, 20, 30, 40, 50]
```

## Pop() method

The `pop()` method removes the last element from an array and returns that element. This method changes the length of the array.

```javascript
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Shon", "Preksha"];
console.log(names.pop());
// output : Preksha
```

## reverse() method

The `reverse()` method reverses the order of the elements in an array.

It rewrites the original array.

```javascript
let numberNames = ["one", "two", "three", "four", "five"];
console.log(numberNames.reverse());
//output: [ 'five', 'four', 'three', 'two', 'one' ]
```

## shift() method

The `shift()` method removes and returns **the first item** of an array. This method modifies the original array.

```javascript
let order = ["first", "second", "Third"];
console.log(order.shift());
// output : first
```

## sort()method

The `sort()` method sorts the elements of an array in ascending order. The default sort order is ascending,

```javascript
let words = ["dog", "bull", "alpaca", "camel"]
console.log(words.sort());
// output : ['alpaca', 'bull', 'camel', 'donkey']
```

If you want to sort your array in descending order, then first `reverse()` the array and then `sort()`

```javascript
let words = ["dog", "bull", "alpaca", "camel"]
console.log(words.reverse(words.sort()));
//output: [ 'dog', 'camel', 'bull', 'alpaca' ]
```

The `sort()` method changes the original array.

## unshift() method

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

```javascript
let names = ["shon", "shine"];
console.log(names.unshift("ethan"));
// output : 3
console.log(names);
// output : [ 'ethan', 'shon', 'shine' ]
```

reference:

*   MDN
    
*   W3 Schools
    

Thank you,

Shon