Career Pivot into Development Journal, Day 3: Arrays & Array Methods
Tags: beginners, webdev, codenewbie, devjournal
Published: 2022-03-16 13:43:08

**Key Points:**
- Damn, array methods are pretty powerful!
- An array is a special type of variable, an ordered collection of items (strings, numbers, or other things)
- Array indexes start with 0. [0] is the first element. [1] is the second element.
- Arrays allow us to deal with a large quantity of strings and numbers.
- Array methods allow us to manipulate arrays.

## Arrays
This is how we declare an array:
```
const cars = ['Saab', 'Volvo', 'BMW'];
```

Arrays are also unaffected by spaces and line breaks:
```
const cars = [
  'Saab',
  'Volvo',
  'BMW'
];
```

### Change an Array Element
We can target a specific element by its index and change it:
```
const cars = ['Saab','Volvo', 'BMW'];
cars [0] = 'Toyota';
```

### Accessing the First Array Element
```
const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits[0];
```

### Accessing the Last Array Element
```
const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits[fruits.length - 1];
```
`fruits.length` gives us the number of elements in the array. In the case, there are 4 elements. However, the 4th index in this array is non-existent since the indexes are from 0-3. Therefore, we must subtract 1 to access the last array element.

### Adding Array Elements
```
const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.push('Kiwi');
```

### Difference Between Arrays and Objects
Arrays are a type of object. However, the difference is that array items are indexed with numbers, whereas objects are indexed with names.

---

## Array Methods
### `toString()`
Converts an array to a string of (comma separated) array values:
```
const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.toString() // Banana,Orange,Apple,Mango;
```

### `join()`
Behaves like `toString()` but we can specify a separator:
```
const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.join(', '); // 'Banana', 'Orange', 'Apple', 'Mango'
```

### `pop()`
Popping in Javascript means taking out elements. Think of it like "popping" out elements from an array. This method "pops" out the last element:
```
const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.pop(); // 'Mango'
fruits; // ['Banana', 'Orange', 'Apple']
```

### `push()`
Pushing in Javascript means adding element. Think of it like "pushing" in a new element into an existing array. This method pushes a new element to the end of the array:
```
const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.push('Kiwi'); // 5
fruits; // ['Banana', 'Orange', 'Apple', 'Mango', 'Kiwi']
```

### `shift()`
Similar to popping, but works on the first element instead of the last:
```
const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.shift(); // 'Banana'
fruits; // ['Orange', 'Apple', 'Mango']
```

### `unshift()`
Similar to pushing, but adds elements to the beginning instead of end of array:
```
const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.unshift('Lemon'); // 5
fruits; // ['Lemon', 'Banana', 'Orange', 'Apple', 'Mango']
```

### `concat()`
Allows us to combine (concatenate) multiple arrays together:
```
const arr1 = ['Apple', 'Microsoft', 'Amazon'];
const arr2 = ['Netflix', 'Google', 'Facebook'];

arr1.concat(arr2); // ['Apple', 'Microsoft', 'Amazon', 'Netflix', 'Google', 'Facebook']
 
```

We can combine as many arrays as we want:
```
const arr1 = ['Apple', 'Microsoft', 'Amazon'];
const arr2 = ['Netflix', 'Google', 'Facebook'];
const arr3 = ['Tesla', 'Samsung', 'Huawei'];

arr1.concat(arr2, arr3); // ['Apple', 'Microsoft', 'Amazon', 'Netflix', 'Google', 'Facebook', 'Tesla', 'Samsung', 'Huawei']
```

### `splice()`