JavaScript Array

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

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

//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'] 

//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']

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.

const array = [2,4,3]
const newArray = [1, ...array]  
console.log(newArray) //[1,2,4,3]

const array = [2,4,3]
const newArray = [...array,7, 8]
console.log(newArray) //[2,4,3,7,8]

Adding items to array

//using unshift add item at begin of the array
const array = [2,4,3]
array.unshift(1)  
console.log(array) //[1, 2, 4 ,3]

//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]

//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']

//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.

const array = [1, 2, 3]
const [takeoff, ...result] = array
console.log(result) // [2, 3]

const array = [1, 2, 3]
const newArray = array.shift()
console.log(array) // [2,3]

Removing from the end of the array

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.

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

const array = [2,3,6]
const newArray = array.filter(e => e > 3)
console.log(newArray) // [6]

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

//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}

//use for of 
const items = ['pencil', 'book','pencil']
const count = {}
for(const item of items){
  console.log(item + 's') 
}
// pencils
// books 
// pencils

//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

Comments

[pentacular]

I think it's wise to be clear and consistent regarding the terms you use.

There are several methods that you can create and change array: shift, unshift, push, pop, splice, concat, slice, rest operator, spread operator, destructing.
Mutation: You can use splice to mutate the array.

Mutation includes any change to the object, so shift, unshift, push, pop, and splice are all mutators.

Adding items: I used spread operator to add items at the begin, splice and slice for adding items in middle, push or spread at the end of the array.

The spread operator doesn't add items to an array -- it includes them in the construction of a new array.

Splice and push do add items, but slice and spread don't.

So these are quite different kinds of thing and it's a bit misleading to lump them together.

Removing from the end of the array
Removing items from the middle of the array

Slice doesn't remove items from an array -- it copies a subset of items from an array to produce a new array.

The examples here are of extraction rather than removal.

You use reduce when adding sum of the array.

Reduce isn't limited to addition.

---

I would be careful to distinguish between construction and mutation, since these have very different consequences.

Good luck.

[Huy Do]

Thanks for your comments.