[팁] Array.splice로 배열 전체 replace하기!

전부터 자바스크립트를 공부하고, 실제로 개발해오면서 굉장히 유용하게 잘 썼던 함수가 Array의 splice 함수이다. 

array를 변경할 일이 있을 때 insert / delete / replace 모두 파라미터를 적절히 넣는다면 잘 동작하기 때문이다. 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN

이번에 vue로 프론트엔드를 개발하던 중 배열 전체를 replace할 일이 생겼다.

const a = reactive([])

간단하게는 a를 let으로 선언한 후, a 전체를 다른 array로 넣어주면 될 것이다.

 

let a = reactive([2])
...

a = reactive([1, 3])

하지만, 이렇게 변경을 한다면 v-for를 이용해서 template 렌더링하는 부분에서 reactivity가 사라져서 제대로 렌더링을 못하는 오류가 생기게 된다.

그래서 객체 자체를 변경하기보다는 객체 내부 값을 변경해서 같은 객체를 유지해야 했다.

물론 for문을 이용해서 객체를 모두 비우고, 하나씩 넣어주는 방법도 있을 수 있고, 이 문제를 해결할 수 있는 수많은 방법이 존재할 것이다.

하지만 좀 더 깔끔하고 간결한 해결책을 갈구하였고, 결과적으로 찾은 방법은 다음과 같다.

const a = reactive([1])
...

a.splice(0, a.length, ...[2, 3, 4])

위 구문의 의미는 a의 시작점부터 a.length만큼의 요소를 삭제하고, [2, 3, 4] 아이템을 순서대로 넣어준다는 의미이다. 

구조 분해 할당을 통해 배열의 아이템을 분해해서 인수로 넣어주었다.

이렇게 처리한다면 a를 const 동일 객체로 유지하면서 간결하게 해결할 수 있다.