[JS Tip] slice() 메소드

코딩테스트를 대비하면서 배열과 관련된 문제를 많이 접하게 되는데 자주 보이는 패턴이 있었다. 자바스크립트에서 유용하게 쓰이는 등수매기기 알고리즘이기도 하여 조금 더 공부를 해봤다.

let arr = [10, 43, 24, 8]; // [2, 4, 3, 1]

위와 같은 배열이 있다고 가정을 해보자. 내가 원하는 것은 위 배열을 크기별 넘버링이 되어있는 새로운 배열을 만드는 것이다.

자바스크립트를 많이 사용해보지 않았다면 새로 정렬한 배열을 하나 만들고 반복문을 이용하여 서로 비교하고, 그것을 또 순서대로 배열에 집어넣는 아주 복잡한 과정을 거쳐야 한다. 하지만 그 복잡한 과정은 시간초과라는 결과를 낳을 확률이 아주 높다. 따라서 map()함수와 indexOf()메소드를 이용하면 조금 간단하게 코드를 짤 수 있다. 하지만 여기서 중요한 것은 slice() 메소드이다.

let sorted = arr.slice().sort((a,b) => b-a);

위 코드는 arr 배열을 sorted라는 배열에 내림차순하여 정리한 코드이다. 하지만 눈에 거슬리는 메소드 하나가 보인다. slice() 메소드는 왜 저기에 들어있을까? 없어도 되지 않을까? sorted 배열은 문제가 없지만 문제는 arr 배열에서 생긴다.

// slice()를 쓴 배열
let arr = [10, 43, 24, 8];
let sorted = arr.slice().sort((a,b) => b-a); // arr= [43,24,10,8]

// slice()를 쓰지 않은 배열
let arr = [10, 43, 24, 8];
let sorted = arr.slice().sort((a,b) => b-a); // arr= [10, 43, 24, 8]

기존 배열의 문제가 생기기 때문에 slice()를 사용한다. slice() 안에 인수를 모두 생략하면 원본 배열의 복사본을 반환한다. 따라서 기존 배열은 바뀌지 않는다.