DEV Community

Huy Do
Huy Do

Posted on • Updated on

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]
Enter fullscreen mode Exit fullscreen mode
//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'] 
Enter fullscreen mode Exit fullscreen mode
//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']
Enter fullscreen mode Exit fullscreen mode
const array = [1, 2, 3]
const newArray = array.slice(0,-2)
console.log(newArray) // [1]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode
const array = [2,4,3]
const newArray = [...array,7, 8]
console.log(newArray) //[2,4,3,7,8]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode
//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]
Enter fullscreen mode Exit fullscreen mode
//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']
Enter fullscreen mode Exit fullscreen mode
//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']
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode
const array = [1, 2, 3]
const newArray = array.shift()
console.log(array) // [2,3]
Enter fullscreen mode Exit fullscreen mode

Removing from the end of the array

const array = [1, 2, 3]
const newArray = array.pop()
console.log(array) // [1,2]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode
const array = [2,3,6]
const newArray = array.filter(e => e > 3)
console.log(newArray) // [6]
Enter fullscreen mode Exit fullscreen mode
const array = [2,3,6]
const newArray = array.reduce((sum,num) => sum + num, 0)
console.log(newArray) // 11
Enter fullscreen mode Exit fullscreen mode
//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}
Enter fullscreen mode Exit fullscreen mode
//use for of 
const items = ['pencil', 'book','pencil']
const count = {}
for(const item of items){
  console.log(item + 's') 
}
// pencils
// books 
// pencils
Enter fullscreen mode Exit fullscreen mode
//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}
Enter fullscreen mode Exit fullscreen mode

Credit to Zell

Discussion (2)

Collapse
pentacular profile image
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.

Collapse
huyddo profile image
Huy Do Author

Thanks for your comments.