[Javascript] forEach 메서드와 splice 메서드를 함께 사용하면 안되는 이유.

오늘 코딩을 하면서 array를 순회하면서 특정 조건이 충족하는 요소를 제거하는 코드를 forEach와 splice 메서드를 사용하여 작성하였다. 그런데 뭔가 원하는데로 동작하지 않는 다는 것을 알았고, 이를 해결하여 기록으로 남기게 되었다.

문제가 되었던 코드 구조

const array1 = ['a','b','c']
const array2 = ['b','c']
array1.forEach((element1, index) => {
  array2.forEach((element2) => {
    if(element1 === element2){
      array1.splice(index, 1)
    }
  })
})
console.log(array1)

원했던 결과
'''js
//output ["a"]
'''

실제 결과

//output ["a", "c"]

필자는 array1에 있는 요소가 array2의 요소와 중복되는 것이 있다면 그것을 삭제하는 코드를 짜고 싶었다. 하지만 이상하게 b만 제거되고 c는 그대로 존재하였다. 그 이유는 다음과 같았다.

만약 array1의 'b'와 array2의 'b'가 일치하여 조건이 true가 되어 splice로 index 1을 제거하게 된다면 index2인 요소가 index1의 요소가 된다. 그리고 index2는 존재하지 않게 된다. 그렇게 된다면 자바스크립트는 존재하지 않는 index2에 대해 함수를 호출하는 것을 건너뛰게 된다.

즉 처음 코드를 동작시키면 처음 array1의 'b'와 array2의 'b'가 일치하여 array1의 index 1에 있는 'b'가 제거된다. 그 이후 'c'가 index1이 되지만 forEach는 다음 index인 2에 콜백을 호출하지 않게 되면서 'c'는 제거되지 않는다.

출처

https://stackoverflow.com/questions/21811630/splicing-a-javascript-array-from-within-the-callback-passed-to-foreach