자바스크립트 배열 자르기(JavaScript Array Slice)

자바스크립트의 배열을 자르는 정석적인 방법은 보통 내장 메서드인 slice 메서드를 사용하는것입니다.

 

slice() 메서드는 어떠한 배열의 begin부터 end까지(end 미포함)에 대한

 

얕은 복사본을 새로운 배열 객체로 반환하는 메서드 입니다.

 

이때 중요한 것은 얕은 복사본을 반환 하며 원본 배열은 바뀌지 않습니다.

 

 

구문은 아주 간단한데 아래와 같습니다.

 

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

 

[간단 요약]

 

array 는 자르기를 할 원본 배열 객체명이며, begin 에는 자르기를 시작할 배열의 첫 자리수가 들어가고

end 에는 추출을 종료할 배열의 자리수 입니다.

 

 

[자세한 설명]

 

begin : 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다.

양수로 begin 인덱스를 지정하는 경우 해당 시작점 부터 배열 추출을 시작합니다. 

 

음수로 begin 인덱스를 지정하는 경우 배열의 가장 끝에서부터의 배열 추출을 시작합니다.

slice(-3) 는 배열에서 마지막 세 개의 엘리먼트를 추출합니다.

 

end : 원본 배열에서 추출을 종료 할 기준 인덱스입니다.

 

slice 는 end 인덱스를 제외하고 추출합니다.

 

예를 들어, slice(2,5)는 세번째 요소부터 다섯번째 요소까지 (2, 3 및 4를 인덱스로 하는 요소) 만을 추출합니다.

 

음수 인덱스는 배열의 끝에서부터의 길이를 나타내는 것은 begin 과 동일합니다.

 

begin 과 end  / 양수 , 음수 조합을 사용하면 다양한 방식으로 배열을 자유 자재로 자를 수 있습니다.

 

예를들자면 slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출합니다.

 

 

 

[주의사항]

 

begin이 undefined인 경우에는 자동적으로 0번 인덱스부터 slice 합니다.

 

begin이 배열의 길이보다 큰 경우에는 모두 잘려나간것으로 처리되어 빈 배열 ( [] )을 반환합니다.

 

end가 생략되면 slice()는 배열의 가장 끝까지(array.length) 추출합니다.

- 한마디로 begin 만 인자로 넘어가는 경우 해당 인덱스부터 맨 끝 까지 배열을 추출하게 됩니다.

 

만약 end 값이 배열의 길이보다 크다면, silce()는 배열의 끝까지(array.length) 추출합니다.

- 이는 begin 과는 다르게 동작하는것처럼 보이지만 기본적으로는 동일한 알고리즘으로 움직이는것을 알 수 있습니다.

 

 

 

간단하게 예시로 보시면 아래와 같습니다.

 

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

 

animals 라는 array 를 선언해주고

 

1. animals.slice(2) 를 해줌으로써 0번째 , 1번째 배열을 버리고 2, 3, 4 번째 배열만 반환 받습니다.

 

2. animals.slice(2,4) 를 해줌으로써 0,1 번째 배열은 버려지고 2,3 번째 배열까지 반환 후 end 인 4번째 부터는 마찬가지로 잘려나갑니다.

 

3. animals.slice(1,5) 를 해줌으로써 0 번째 배열은 버려지고 1,2,3,4 번째 배열까지 반환됩니다.

 

 

 

마지막으로 다시 한번 설명 드리지만 JavaScript 의 slice() 는 원본 배열을 대체하는것이 아닙니다.

 

따라서 원본 배열에서 요소의 얕은 복사본을 반환합니다.

 

원본 배열의 요소는 다음과 같이 반환 된 배열에 복사됩니다

객체 참조(및 실제 객체가 아님)의 경우, slice()는 객체 참조를 새 배열로 복사합니다.

 

원본 배열과 새 배열은 모두 동일한 객체를 참조합니다.

 

참조 된 객체가 변경되면 변경 내용은 새 배열과 원래 배열 모두에서 볼 수 있습니다.

 

String 및 Number 객체가 아닌 문자열과 숫자의 경우 slice()는 문자열과 숫자를 새 배열에 복사합니다.

 

한 배열에서 문자열이나 숫자를 변경해도 다른 배열에는 영향을 주지 않습니다.

 

새 요소를 두 배열 중 하나에 추가해도 다른 배열은 영향을 받지 않습니다.

 

위 설명을 가장 잘 설명해주는 실제 코드를 MDN 에서는 아래와 같이 예시로 보여주고 있습니다.

 

// Using slice, create newCar from myCar.
let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }
let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']
let newCar = myCar.slice(0, 2)

// Display the values of myCar, newCar, and the color of myHonda
//  referenced from both arrays.
console.log('myCar = ' + JSON.stringify(myCar))
console.log('newCar = ' + JSON.stringify(newCar))

// ★ 중요 ★
console.log('myCar[0].color = ' + myCar[0].color) // return red
console.log('newCar[0].color = ' + newCar[0].color) // // return red

// Change the color of myHonda.
myHonda.color = 'purple'
console.log('The new color of my Honda is ' + myHonda.color) // return purple


// Display the color of myHonda referenced from both arrays.
// ★ 중요 ★
console.log('myCar[0].color = ' + myCar[0].color) // return purple
console.log('newCar[0].color = ' + newCar[0].color) // return purple

 

보시면 myHonda 라는 Object 의 color 가 red 일때 정의된

 

myCar 과 newCar 배열 모두 처음에는 myHonda 와 같은 red 를 color 로 가지고 있습니다.

 

중간에 myHonda.color = 'purple' 로 myHonda 의 color 를 변경하자

 

이미 정의해두었던 myCar 와 newCar 모두 배열안에 color 가 똑같이 purple 로 변경 된것을 알 수 있습니다.

 

위에 설명 된 것처럼 원본 배열을 정의할때도, 그 배열을 slice 하여 얕은 복사 후 잘라낸 후에도

 

모두 동일한 객체(myHonda)를 참조하고 있기 때문입니다.

 

객체를 가진 배열을 slice 하여 사용할 때는

 

항상 이러한 얕은 복사에 대한 개념을 숙지하고 주의하여 사용해야 할것 같습니다^^

 

 

 

# 추가로 간단하고 재미있는 JavaScript Trick 하나 소개 해드립니다!

 

배열은 기본적으로 slice 명령어로 자르는게 정석이지만

 

아래와 같은 방식으로도 아주 간단하게 JS 배열을 자를 수 있는 트릭이 있습니다.

 

var array = [1,2,3,4,5,6,7,8,9,10];
console.log(array.length); // return 10

array.length = 5;

console.log(array.length); // return 5
console.log(array); // return [1,2,3,4,5]

 

 

 

# 출처 참조

MDN JavaScript slice( developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice )