오늘은 splice 메소드를 이용해 문제를 풀며
해결로 가는 key point를 잡아보는 것을 정리해보려 한다.

먼저, splice 메소드의 개념을 알아본 후 문제로 넘어가보도록 하겠다.

Splice()

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나
새 요소를 추가하여 배열의 내용을 변경합니다.

1. syntax

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

splice의 매개변수

1. start
배열의 변경을 시작할 인덱스.

2. deleteCount
배열에서 제거할 요소의 수.
deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다.
이 때는 최소한 하나의 새로운 요소를 지정해야 한다.

3. item1, item2, ...
배열에 추가할 요소.
아무 요소도 지정하지 않으면 splice()는 요소 제거 용도가 된다.

4. 반환 값
제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환한다.
아무 값도 제거하지 않았으면 빈 배열을 반환.

2. 문제

2.1 splice()를 이용해 175cm 이상인 사람은 뒤에 설 수 있도록 코드를 작성.

키가 175cm 이상인 사람 전까지 잘라내면 되는 문제였고
delete count 부분에만 index number를 입력하면 됐다.

여기서 두 가지의 선택지가 주어졌는데
하나는 list.splice(5)를 입력해 5번째 index까지 자르는 방법,
다른 하나는 list.splice(-3)을 입력해 뒤에서부터 3번째 index까지
가져오는 것이었다.

별 차이는 없지만 코드가 조금이나마 짧은 list.splce(-3)을 선택했다.
그리고 결과값은 같았다.

<결과>

이어지는 문제는 해결하는 데 시간이 꽤 투자된 문제였다.

2.2 바구니에서 곰팡이를 제거하는 함수를 작성.

배열을 반복적으로 수색하기 위해선 반복문이 필요하다 느꼈고
곰팡이라는 값만을 찾아야 하니 조건문을 사용하고,
곰팡이를 제거하기 위해서는 오늘 배운 splice()를 사용해
해결해볼 수 있겠다라는 생각이 들었다.

그래서 작성한 코드는

하지만 처음에는 오류가 뜨는 걸 보고
내가 뭘 잘못썼나 싶었다.
그래서 글로 먼저 적어놓고 코드로 번역을 해봤다.
그러고 나서야 눈에 보였다. splice부분을 망치고 있었단 걸.

(한글로 먼저 풀어보니 실마리가 잡히기 시작했다. 신기한 경험!)

최종 작성 코드는

매개변수 arr는 basket과 같으므로 arr[i]로 basket의 index를
정하고, index 내부의 데이터를 정해 지우겠다는 splice(j,1)을
작성했다.

그리고 for문의 j를 쓴 부분에서 arr[i].length를 사용해줬는데
나중에 수정할 때(그럴 일이 없어야겠지만) i만 수정해주면
j는 자동으로 i를 따라가게 만들어주도록 나름의 리팩토링을 해줬다.

마치며

나를 믿기보다 코드를 믿어야 한다.
난 잘못했을 리가 없어! 라고 여기기 보단 코드를 보며 무엇이 잘못되었는가
파악할 줄 아는 개발자가 되자.

오늘 문제 풀이를 하며 한글로 내가 표현하고 싶은 코드를 먼저 작성한 다음
코드를 짜면 좀 더 수월하게 작성이 가능했다.
이게 가장 큰 수확이었다.
앞으로도 어려운 코드가 생기면 선한글 후코딩 방식을 채택해야지!

Reference
MDN
이중for문 참조 블로그