JavaScript Array
Tags: javascript
Published: 2020-07-12 20:01:22

There are several methods that you can mutate array: `shift`, `unshift`, `push`, `pop`, `splice` are mutators.  `concat`, `slice`, `rest operator`, `spread operator`, `destructing`.

`Slice` copy the subset of items from array and produce the a new array
```javascript
const array = [1,2,3]
const newArray = array.slice()
console.log(newArray) //[1,2,3]
```
```javascript
//using slice 
const colors = ['yellow','red','blue']
const index = colors.indexOf('red')
const newColors = [...colors.slice(0, index),
'white', ...colors.slice(index +1 ) ]
console.log(newColors) //['yellow','white','blue'] 
```

```javascript
//using slice
const colors = ['red', 'blue', 'white']
let index = colors.indexOf('blue')
const newColors = [
	...colors.slice(0,index),
	...colors.slice(index + 1)
]
console.log(newColors) // ['red', 'white']
```

```javascript
const array = [1, 2, 3]
const newArray = array.slice(0,-2)
console.log(newArray) // [1]
```

You can use `spread operator` adding items to the construction of a new array.  

```javascript
const array = [2,4,3]
const newArray = [1, ...array]  
console.log(newArray) //[1,2,4,3]
```
```javascript
const array = [2,4,3]
const newArray = [...array,7, 8]
console.log(newArray) //[2,4,3,7,8]
```
Adding items to array 
```javascript
//using unshift add item at begin of the array
const array = [2,4,3]
array.unshift(1)  
console.log(array) //[1, 2, 4 ,3]
```

```javascript
//using push to add item at the end of the array
const array = [2,4,3]
array.push(5)  
console.log(array) //[2,4,3,5]
```

```javascript
//using splice add item in middle of array
const colors = ['red', 'blue', 'white']
let index = colors.indexOf('blue')
const newColors = colors.slice()
newColors.splice(index, 1)
console.log(newColors) // ['red', 'white']
```

```javascript
//using splice for adding items in the middle the array
const colors = ['yellow','red','blue']
const index = colors.indexOf('red')
const newColors = colors.slice()
newColors.splice(index + 1, 0, 'white')
console.log(newColors) //['yellow', 'red', 'white', 'blue']
```
Remove items from the array: You can remove items by using `destructure the array`, `shift`.

Remove from the beginning of the array.

```javascript
const array = [1, 2, 3]
const [takeoff, ...result] = array
console.log(result) // [2, 3]
```
```javascript
const array = [1, 2, 3]
const newArray = array.shift()
console.log(array) // [2,3]
```
Removing from the end of the array
```javascript
const array = [1, 2, 3]
const newArray = array.pop()
console.log(array) // [1,2]
```

Loop through the array: You can use `map` and `filter`, `reduce`, `forEach`, `for of` to iterate through the array. I only use `reduce` when adding sum of the array. But it can be used for other things.

```javascript
const array = [2,3,6]
const newArray = array.map(e => e + 1)
console.log(newArray) // [3,4,7]
```
```javascript
const array = [2,3,6]
const newArray = array.filter(e => e > 3)
console.log(newArray) // [6]
```

```javascript
const array = [2,3,6]
const newArray = array.reduce((sum,num) => sum + num, 0)
console.log(newArray) // 11
```

```javascript
//use forEach to count each item quantity
const items = ['pencil', 'book','pencil']
const count = {}
items.forEach(item => {
    if (count[item]) {
       count[item] +=1
       return
    }
    count[item] = 1
})
console.log(count) // {pencil: 2, book: 1}
```
```javascript
//use for of 
const items = ['pencil', 'book','pencil']
const count = {}
for(const item of items){
  console.log(item + 's') 
}
// pencils
// books 
// pencils
```

```javascript
//using reduce 
const items = ['pencil', 'book','pencil']
const count = items.reduce((count, item) => {
   if (count[item]) { 
      count[item] +=1
   } else {
      count[item] = 1
   }
   return count
}, {})

console.log(count) // {pencil: 2, book: 1}
```
[Credit to Zell](https://zellwk.com/blog/how-i-work-with-arrays/?ck_subscriber_id=448109187)