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

Blog

Huy Do

Join Our Newsletter. No Spam, Only the good stuff.

Related