[javascript] 배열 slice() 사용하기

오늘은 배열을 공부하면서 자주 등장하는 slice()에 대해 알아보겠습니다.  

 

slice() 란? 

slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다

여기서 중요한 점은 복사본으로 새로운 배열 객체로 반환하고 원본 배열은 바뀌지 않는다는 점입니다 !

배열의 맨 뒤에 원소를 추가하거나 제거하는 push() ,pop() 

배열의 맨 앞에 원소를 추가하거나 제거하는 unshift(), shift() 

위의 4가지 메서드는 원본 배열을 바꾸면서 배열을 수정합니다. 따라서 원본 배열을 수정하지 않고 배열을 만들기 위해선 slice()가 필요합니다!! 

 

slice()의 사용법  

    arr.slice([begin[, end]])

사용하고자 하는 배열.slice(begin,end)

매개변수로 사용되는 begin은 추출 시작점에 대한 인덱스를 의미합니다. 음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다 -1은 가장 마지막이 됩니다. 만약 slice(-2)로 작성하였다면 배열에서 마지막 두개의 엘리먼트를 추출합니다. begin은 써도 되고 안써도 되는데 begin이 선언되지 않은경우에는 0번 인덱스부터 추출합니다. 만약 begin이 배열의 길이보다 큰 경우에는 빈 배열을 반환합니다.   

 

매개변수로 사용되는 end는 종료할 기준 인덱스입니다. end 인덱스를 제외하고 바로 앞 인덱스까지 추출합니다. 만약 slice(1,4) 는 두번째 요소부터 네번쩨 요소 까지 추출합니다. 음수 인덱스는 배열의 끝에서 부터의 길이를 나타냅니다. 만약 slice(3,-1)이라면 네번째요소부터 끝에서 두번째 요소까지 추출합니다. end가 선언되지 않은 경우에는 배열의 끝까지 추출합니다. 만약 end 값이 배열의 길이보다 크다면 , 배열의 길이 즉 배열의 끝까지 추출합니다. 

 

반환값으로는 추출한 엘리먼트를 포함한 새로운 배열을 반환합니다. 

 

예제로 slice()의 사용법에 대해 알아보겠습니다.

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
let citrus = fruits.slice(1, 3)
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

 

fruits.silce(1,3) 은 인덱스 1번째있는 요소부터 인덱스 3번째 요소의 바로 앞까지의 요소를 추출해서 새로운 배열을 만듭니다. 

따라서 위의 예제에서는 1번째 요소인 'Orange', 2번째 요소인 'Lemom'이 추출되어 반환되는 것을 알 수 있습니다. 

 

오늘은 이렇게 배열 slice()에 대해 알아보았습니다. 

 

오늘도 열공!!