배열과 문자열의 slice 메서드

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 배열과 문자열에서 사용가능한 메서드인 slice 메서드에 대해서 알아보도록 하겠습니다.

slice 메서드는 단어에서 의미를 유추해 볼 수 있듯이 배열이나 문자열의 원소를 잘라내 추출하는 것입니다.

먼저 표현식부터 살펴보겠습니다.

arr/str.slice([beginIndex][, endIndex])

배열이나 문자열에서 사용하는 메서드이며 파라메터로는 beginIndex 와 endIndex 가 옵니다.

beginIndex 는 말 그대로 슬라이스를 시작하는 인덱스 번호를 의미합니다.

배열과 문자열 공통으로 0부터 시작하는 인덱스를 의미합니다.

* beginIndex 값이 생략되면 0 부터 슬라이스 하겠다는 의미입니다.

* beginIndex 값이 음수라면 배열이나 문자열의 끝에서부터 슬라이스 하겠다는 의미입니다. (역방향)

endIndex 는 슬라이스를 마칠 인덱스 번호를 의미합니다.

하지만 endIndex 에 해당하는 원소는 포함시키지 않습니다.

* endIndex 가 생략되면 배열이나 문자열의 끝(arr/str.length)까지 슬라이스 하겠다는 의미입니다.

즉, beginIndex 에서부터(포함) endIndex 바로 전의 원소까지 슬라이스 하겠다는 의미 입니다.

메서드의 리턴값은 슬라이스된 요소가 보함된 새로운 배열/문자열 입니다.

이해를 돕기위해 예제를 살펴보도록 하겠습니다.

var str = "abcdefg";
 
var strSliceNoParams = str.slice();
console.log(strSliceNoParams);
// abcdefg
 
 
var strSliceOneParams = str.slice(2);
console.log(strSliceOneParams);
// cdefg
 
var strSliceTwoParams = str.slice(3, 6);
console.log(strSliceTwoParams);
// def
 
console.log(str); // abcdefg

위의 예제는 문자열 abcdefg를 할당하고 있는 변수 str에 대해 슬라이스 메서드를 실행한 예제 입니다.

str은 length가 7인 문자열 입니다.

str에 포함된 문자열의 각각의 인덱스는 a 부터 0, b는 1, c 는 2, ... , g는 6 입니다.

strSliceNoParams 는 str을 슬라이스 할 때 인자를 한 개도 주지 않은 것입니다.

beginIndex 값이 생략되면 0 부터 슬라이스 하겠다는 의미이고, endIndex 가 생략되면 끝까지 슬라이스 하겠다는 의미입니다.

즉, 파라메터를 모두 생략한 경우, 인덱스 0 부터 끝까지 슬라이스 하겠다는 것입니다.

이는 str을 그대로 복사한 것과 같습니다.

strSliceOneParams 는 str을 슬라이스 할 때 beginIndex 값만을 인자로 준 경우 입니다.

beginIndex가 추출의 시작점을 의미하므로 2는 str에서 c를 의미합니다.

그리고 endIndex가 생략된 것은 끝까지 추출 이므로 strSliceOneParams 는 c 에서부터 끝까지 추출을 의미합니다.

따라서 결과는 cdefg입니다.

strSliceTwoParams 는 str을 슬라이스 할 때 인자를 두 개 모두 줬습니다.

beginIndex가 3 -> d, endIndex 가 6 -> g 입니다.

하지만 endIndex 의 바로 앞 원소까지만을 추출하므로 결과는 def 입니다.

슬라이스 메서드는 원본을 손상시키지 않고 새로운 문자열/배열을 리턴하기 때문에 str은 세 번 슬라이스 됐지만 원본 그대로의 값을 유지하고 있습니다.

그럼 예제를 좀 더 심화 시켜보겠습니다.

배열의 메서드 중 splice 메서드를 알고 계십니까?

splice 메서드의 역할은 배열의 특정원소를 삭제하고 해당 위치에 새로운 원소를 끼워넣는 역할을 합니다.

*splice 메서드에 익숙하지 않으신 분들은 아래의 링크를 참조해 주세요

<배열의 원소를 제거/추가하는 splice 메서드>

하지만 splice 메서드는 원본 배열을 손상시킵니다.

만약 splice 가 수행하는 작업을 하면서 원본 배열을 손상시키지 않고 싶다면 어떻게 해야할까요?

slice와 ES6의 전개연산자를 이용하면 됩니다.

var arrForSplice = ["인덱스0", "인덱스1", "인덱스2", "인덱스3"];
 
var spliced = arrForSplice.splice(1, 2, "새로운 원소1", "새로운 원소2", "새로운 원소3");
 
console.log(spliced);
// (2) ["인덱스1", "인덱스2"]
console.log(arrForSplice);
// (5) ["인덱스0", "새로운 원소1", "새로운 원소2", "새로운 원소3", "인덱스3"]
 
-------------------------------------------------------------------------------------
 
var arrForSlice = ["인덱스0", "인덱스1", "인덱스2", "인덱스3"];
 
var sliced1 = arrForSlice.slice(0, 1);
var sliced2 = arrForSlice.slice(3);
 
console.log(sliced1); // ["인덱스0"]
console.log(sliced2); // ["인덱스3"]
 
var newValue = ["새로운 원소1", "새로운 원소2", "새로운 원소3"];
 
var newArr = [...sliced1, ...newValue, ...sliced2];
 
console.log(newArr);
// (5) ["인덱스0", "새로운 원소1", "새로운 원소2", "새로운 원소3", "인덱스3"]
console.log(arrForSlice);
// (4) ["인덱스0", "인덱스1", "인덱스2", "인덱스3"]

위의 예제를 천천히 살펴보겠습니다.

구분선 위의 코드는 arrForSplice 배열에 splice를 적용해 최종적으로 다음과 같은 결과를 얻었습니다.

["인덱스0", "새로운 원소1", "새로운 원소2", "새로운 원소3", "인덱스3"]

(index 1 에서 부터 2개의 원소를 제거하고 제거된 위치에 "새로운 원소1", "새로운 원소2", "새로운 원소3" 을 추가)

결과가 원하는 결과였을지 몰라도 원본 배열인 arrForSplice 은 손상되었습니다.

그렇다면 원본배열을 손상하지 않으면서 같은 결과를 splice와 전개연산자를 이용해 얻어보겠습니다.

구분선 아래의 코드입니다.

arrForSlice 는 arrForSplice 과 같은 배열을 할당하고 있습니다.

sliced1은 slice 메서드를 이용해 arrForSlice 배열을 처음부터 인덱스 1 이전까지 추출했습니다. ( ["인덱스0"] )

sliced2는 인덱스 3부터 끝까지 추출했습니다. ( ["인덱스3"] )

그리고 들어갈 새로운 원소를 배열로 정의했습니다. (newValue)

그리고 위에서 작업한 새 개의 배열을 전개 연산자를 이용하여 newArr 에 할당했습니다.

결과는 

(5) ["인덱스0", "새로운 원소1", "새로운 원소2", "새로운 원소3", "인덱스3"]

로 구분선 위의 코드인 splice를 했을 때의 결과와 같습니다.

하지만 splice는 원본을 손상시킨 반면 slice를 이용한 구분선 아래의 코드는 console.log(arrForSlice); 했을때 원본 배열인 arrForSlice가 그대로 보존 되어 있는 것을 알 수 있습니다.

(4) ["인덱스0", "인덱스1", "인덱스2", "인덱스3"]

*ES6의 전개 연산자에 대해 익숙하지 않으신 분들은 아래의 링크를 참조해 주세요

<ES6 - 3) 전개 연산자>

여기까지 배열이나 문자열의 원소를 원하는 부분만큼 추출해 내는 slice 메서드에 대해서 알아보았습니다.

감사합니다.

** 참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slice

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)