splice

배열은 참 많은 메소드를 제공해준다. 그중에 splice 의 특징에 대해서 알아보자.

원본 배열 직접수정

말 그대로다. 원본 배열에 호작질 수정을 한다.

원본 배열에서 빠지는 값을 리턴한다

명확하게 나와있다. 인자로 3개를 받는데
첫번째 인자는 원본 배열의 시작 인덱스
두번째 인자는 첫번째 인자로 지정한 인덱스부터 몇개 날릴 것인지 (0 이면 아무것도 안날림, 그러면 리턴되는 것이 없음)
세번째 인자는 추가할 요소, 여기에 값이 없으면 추가는 없고 원본 배열에서 원하는 만큼 삭제만 한다. (그래서 배열에서 값을 뽑을 때 splice 를 쓰는 듯..)

slice

splice랑 비슷한 듯 다르다.

원본 배열 터치 없음

원본 배열을 건들이지 않는다. (splice와 차이점)

원본 배열에서 원하는 만큼 빼낸다

첫번째 인자는 원본 배열에서 시작하는 인덱스
두번째 인자는 splice 와 같은 듯 다른 듯 싶다. splice는 첫번째 인자의 인덱스부터 카운트였는데 여기는 종료하는 인덱스를 적는다. 종료하는 인덱스에 해당되는 값은 빠지지 않는다. 이게 0부터 양수일 때는 splice 와 리턴되는 값이 같은데 음수일 경우 얘기가 다르다.

const a = [1, 2, 3, 4, 5];
const b = [1, 2, 3, 4, 5];

const c = a.splice(0, 2);
const d = b.slice(0, 2);

console.log("a:: ", a);
console.log("b:: ", b);
console.log("c:: ", c);
console.log("d:: ", d);

이런 게 있다고 할 때, splice 를 한 c의 결과와 slice 를 한 d 의 값이 같다. 틀려지는 건 원본 배열 밖에 없다. 하지만 음수일 때는 다르다. 그래서 같은 듯 다르다라고 얘기했다. 생략할 경우 원본 배열의 length 가 들어간다. 음수일 경우 결과가 다른 이유는 splice 의 경우는 아무것도 내놓지 않는데(원본 배열도 변화 없음) slice 의 경우는 원본 배열의 끝에서부터 카운트를 한다.

글을 쓰게된 이유

한 때 온라인으로 멘토링을 하던 친구가 있었다. 그 친구에게 위 두 메소드의 차이에 대해서 전달하고자 작성한 글이다. 이런 이유까지 쓰게된 이유는, 최근에 채용관련된 서비스 (리멤버 같은)에서 내 이력서를 검색하고 열람한 사람들이 왜 이런 글이 쌩뚱맞게 있냐는 얘기를 많이 해주더라. 그래서 사유를 남기게 되었다. 한참 코로나로 시끌시끌하고 나도 그렇고 당사자도 그렇고 만나기가 어려운데 전화만으로 설명해주는데 한계가 있어서 글로 남겨놓고 링크를 주기 위함이었다. 물론 나도 다시 관련 지식을 되돌아보는 계기였고..