[JavaScript] 자바스크립트 slice 메서드 이해하기

slice 메서드란?

slice 메서드는 배열의 일부 요소를 제거한 새로운 배열을 반환한다.

그래서 slice 메서드는 splice 메서드와 다르게 원래의(기존의) 배열 값을 수정하지 않는다.

 

다른 면에서 생각하면, 결과적으로 slice메서드는 부분 요소에 접근하는 것이라고 할 수 있다.

 

문법

slice는 시작 index와 마지막 index, 두 개의 파라미터를 가지고 있다.

첫 번째 파라미터로 들어가는 파라미터는 말 그대로 시작 index인데, 독특하게 음수 값이 들어갈 수도 있다.

그래서 만약 첫번째 파라미터로 음수 값이 전달될 경우 이 값에 배열의 길이를 더한 값을 시작 위치로 평가된다.

두 번째 파라미터는 마지막 index인데, 해당 값의 바로 직전까지의 요소를 잘라낸다. 여기서도 당연히 음수가 들어 갈 수 있는데, 동일하게 두 번째 파라미터도 음수 값이 전달될 경우 이 값에 배열의 길이를 더한 값을 마지막 위치로 평가한다.

 

결국 어떤 파라미터든 음수 값을 인수로 전달하게 되면, 끝에서부터 N번째라는 의미가 된다.

 

다음 코드는 slice 메서드를 사용한 예시다.

const myNumbers = [1, 2, 3, 4, 5];

// arr.slice(startIndex, endIndex)
console.log(myNumbers.slice(1, 3)); // [2, 3]
console.log(myNumbers.slice(-4, 3)); // [2, 3]
console.log(myNumbers.slice(1, -2)); // [2, 3]

만약 두 번째 파라미터를 생략할 경우에는 시작 index부터 마지막 요소까지 값을 잘라낸다.

const myNumbers = [1, 2, 3, 4, 5];

// arr.slice(startIndex, endIndex)
console.log(myNumbers.slice(1)); // [2, 3, 4, 5]
console.log(myNumbers.slice(-4)); // [2, 3, 4, 5]

그리고 인수로 아무 값도 전달하지 않을 경우 배열 전체가 반환된다.

const myNumbers = [1, 2, 3, 4, 5];

// arr.slice(startIndex, endIndex)
console.log(myNumbers.slice()); // [1, 2, 3, 4, 5]

 

주의사항

slice메서드는 배열을 자른다는 점에서 splice와 매우 유사해 보인다.

하지만 앞에서도 언급했듯, slice메서드는 원래의(기존의) 배열에는 아무런 영향도 미치지 않는다.

const myNumbers = [1, 2, 3, 4, 5];

// arr.slice(startIndex, endIndex)
console.log(myNumbers.slice(1, 3)); // [2, 3]
console.log(myNumbers); // [1, 2, 3, 4, 5]

// arr.splice(startIndex, endIndex)
console.log(myNumbers.splice(1, 2)); // [2, 3]
console.log(myNumbers); // [1, 4, 5]

상황에 따라서 유용하게 사용될 메서드를 잘 고려해서 사용해야 될 것 같다.

 

문자열에도!!

참고로 slice메서드는 문자열에도 사용이 가능하다.

const myString = 'BigTop';

// arr.slice(startIndex, endIndex)
console.log(myString.slice(1, 3)); // ig
console.log(myString.slice(-4, 3)); // g
console.log(myString.slice(1, -2)); // igt
console.log(myString.slice(2)); // gTop
console.log(myString.slice()); // BigTop