자바스크립트 splice 메소드 사용시 주의점

splice 메소드를 사용하여 배열의 요소를 제거할 때 아래와 같은 문제점을 보셨을 거에요

---

let arr = [1,2,3,4,5];

for(let i = 0; i < arr.length; i++) {
	arr.splice(i, 1); // 배열의 요소를 하나씩 제거
}

// 결과 : [2,4];

---

모든 요소가 제거 된 빈배열이 나올 것 같았지만 위와 같이 한 칸씩 건너뛰어서 요소를 제거한 배열이 결과로 나왔습니다

 

위의 코드에선 어떤일이 일어나길래 모든 요소가 제거되지 않았을까요??

 

아래의 과정을 살펴보겠습니다

---

let arr = [1,2,3,4,5];

for(let i = 0; i < arr.length; i++) {
	arr.splice(i, 1);
	/*
	i = 0 일 때
	arr.splice(0, 1) // 0번째 요소 제거
	0번째 요소 제거 이후 = [2,3,4,5]
	
	i = 1 일 때 배열의 요소중 [2] 가 제거될 것 같지만 여기서 문제가 나타납니다
	arr.splice(1, 1) // 1번째 요소 제거
	현재 배열의 요소들은 [2,3,4,5] 입니다
	여기서 1번째는 [3] 이므로 [3] 이 제거됩니다
	즉, 1번째 요소가 제거된 배열은 [2,4,5] 입니다

	마찬가지로 i = 2 일 때도 우리의 생각과 다르게, [5] 가 제거됩니다
	즉, 현재 배열은 [2,4,5] 이므로 
	arr.splice(2, 1) 를 실행하면 [5] 가 2번째 인덱스이므로 [5] 가 제거되고
	배열은 [2, 4] 가 됩니다
	
	for문이 끝나고 나면 모든 요소가 제거된 빈배열이 나타날줄 알았던 처음 생각과 달리
	[2, 4] 배열이 나오게 됩니다 :(
	*/
}

---

그렇다면, 이러한 문제를 해결하기 위해선 어떻게 해야 할까요??

 

제가 생각하기엔 splice 메소드를 사용하여 배열의 요소가 제거될 때마다 인덱스를 한 칸 뒤로 빼주면 어떨까 싶습니다

 

그럼 인덱스를 한 칸 뒤로 뺄려면 어떻게 해야 할까요?

 

위의 코드에서 for 문을 이용할 때 i 가 배열의 인덱스 역할을 합니다 그렇다면 배열의 요소가 제거될 때마다 i 를 1씩 빼주면 어떨까요???

 

코드는 아래와 같습니다

---

let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  arr.splice(i, 1);
	i--;
}

console.log("출력 :", arr); // 출력 : []

---

위와 같이 배열의 요소가 제거될 때마다 i 를 1씩 빼준다면 저희가 제거하지 못했던 요소인 [2, 4]를 제거 할 수 있을 것 같습니다

 

실제로 위의 코드는 모든 요소를 제거한 빈배열을 출력합니다

 

그렇다면 어떻게 위의 코드는 저희가 생각한대로 잘 동작할까요??

 

for 문의 조건부를 보시면 i < arr.length 라고 되어 있습니다

 

처음 for 문이 실행됐을 때 arr.length 는 5입니다

 

하지만 for 문의 내부에서 splice 메소드로 배열의 요소를 제거할 때마다 배열의 길이 즉, arr.length 값은 작아질 것입니다

 

즉, 위의 코드에서 i 는 절대 0보다 커지지않고 배열의 길이는 점점 작아지므로 배열의 0번째 요소만 계속 제거 해주면서 모든 요소를 제거할

수 있습니다