[자바스크립트] slice()

자바스크립트 배열에 사용할 수 있는 slice(), splice() 를 알아보자

const array = Array(20).fill().map((_, i) => {
  return {
    name : i
  }
})

console.log(array)

[
  { name: 1 },  { name: 2 },
  { name: 3 },  { name: 4 },
  { name: 5 },  { name: 6 },
  { name: 7 },  { name: 8 },
  { name: 9 },  { name: 10 },
  { name: 11 }, { name: 12 },
  { name: 13 }, { name: 14 },
  { name: 15 }, { name: 16 },
  { name: 17 }, { name: 18 },
  { name: 19 }
]

우선 다수의 객체를 담고있는 배열을 생성했다

 

1. slice()

 a. slice() 함수는 두개의 인자 startIndex, endIndex 를 받는다

 b. 배열을 startIndex 부터 endIndex 까지의 부분을 잘라내서 return을 한다 (배열의 데이터를 변경시키지 않는다)

 c. slice() 함수를 사용할때 startIndex 이상, endIndex 미만으로 생각하면 좋다

console.log(array.slice(1, 1)) // 1이상 1미만  -> []
console.log(array.slice(1, 2)) // 1이상 2미만  -> [ { name: 1 } ]
console.log(array.slice(1, 3)) // 1이상 3미만 -> [ { name: 1 }, { name: 2 } ]

 

 

slice(1,1) endIndex는 미만으로 적용되기 떄문에 1이상 1미만으로 빈 배열 [] 이 나온다

slice(1,2) 1이상 2미만이로 1개의 인덱스 [ {  name: 1} ]

slice(1, 3) 1이상 3미만으로  2개의 인덱스 [ { name: 1 }, { name: 2 } ]

 

 

splice(startIndex)  startIndex 만 존재하는 경우

startIndex를 시작으로 전부를 잘라낸다

console.log(array.slice(17)) // 17이상 ->  [ { name: 17 }, { name: 18 }, { name: 19 } ]

 

불변성

slice() 함수는 아무리 많이 사용해도 기존의 배열의 상태를 변경시키지 않는다 (불변성)

 

array.slice(3, 5)
array.slice(3, 5)
array.slice(7, 10)

// console.log(array)
[ 
  { name: 0 },  { name: 1 },
  { name: 2 },  { name: 3 },
  { name: 4 },  { name: 5 },
  { name: 6 },  { name: 7 },
  { name: 8 },  { name: 9 },
  { name: 10 }, { name: 11 },
  { name: 12 }, { name: 13 },
  { name: 14 }, { name: 15 },
  { name: 16 }, { name: 17 },
  { name: 18 }, { name: 19 }
]