slice()와 concat()

slice() 메서드는 배열을 복사하여 새로운 배열을 반환하기 때문에 배열을 복사하는 좋은 방법입니다.

 

아래 예시 코드와 함께 사용법을 정리해보겠습니다.

 

 

const arr1 = [1, 2, 3, 4, 5, 6];

const copyArr = arr1;

arr1.push(10);

console.log(`arr1 : ${arr1}  / copyArr : ${copyArr}`);
// arr1 : 1,2,3,4,5,6,10  / copyArr : 1,2,3,4,5,6,10 출력

배열의 경우 객체이기 때문에 상수 copyArr에 할당된 것은 참조값입니다.

 

즉 배열 자체가 할당된 것이 아니라 배열이 저장된 메모리 공간의 주소를 할당받은 것입니다.

 

때문에 상수 copyArr에 할당된 것은 상수 arr1이 가지고 있는 메모리 공간의 주소이기 때문에 arr1이 참조하는 배열의 값이 바뀌면 

 

copyArr이 참조하는 배열의 값도 바뀌게 됩니다.

 

 

 

하지만 위의 경우와 다르게 값을 복사는 하되 분리된 메모리 공간에 저장된 복사본을 사용하고 싶은 경우가 생길 수도 있습니다.

 

이때 slice() 메서드를 사용하면 새로운 메모리 공간에 배열을 복사하여 저장을 하게 됩니다.

const arr1 = [1, 2, 3, 4, 5, 6];

const copyArr = arr1.slice();

arr1.push(10);

console.log(`arr1 : ${arr1}  / copyArr : ${copyArr}`);
// arr1 : 1,2,3,4,5,6,10  / copyArr : 1,2,3,4,5,6

위의 예시 코드처럼 splice() 메서드를 사용하여 배열을 복사하게 되면 새로운 메모리 공간에 복사한 배열을 저장하기 때문에

 

원본 배열에 값을 추가해도 상수 copyArr이 참조하는 배열의 값은 변하지 않게 됩니다.

 

 

 

splice() 메서드를 사용하면 인덱스 기반으로 접근하여 배열의 범위를 선택하여 복사하는 것도 가능합니다. 

 

const arr1 = [1, 2, 3, 4, 5, 6];

const copyArr = arr1.slice(3);

console.log(copyArr); // [4, 5, 6] 출력

splice() 메서드에 인자로 복사를 시작할 인덱스를 줄 경우 해당 인덱스부터 마지막 요소까지를 복사하여 반환하게 됩니다.

 

만약 마지막 요소까지가 아니라 범위를 지정하여 복사를 하고 싶다면 복사를 하고 싶은 인덱스 + 1을 두 번째 인자로 주면 됩니다.

 

const arr1 = [1, 2, 3, 4, 5, 6];

const copyArr = arr1.slice(2, 4); // 2 인덱스, 3 인덱스에 위치한 값 복사

console.log(copyArr); // [3, 4] 출력

위의 예시 코드처럼 두 번째 인자로 4를 주었을 경우 4 인덱스 위치에 있는 값까지 복사가 되는 것이 아닌

 

4 인덱스 앞에 위치한 값까지 복사를 하기 때문에 2 인덱스, 3 인덱스에 위치한 값을 복사한 값을 반환하게 됩니다. 

 

 

 

---

 

concat() 메서드 또한 배열을 복사하는데 유용하게 사용되며 기능으로는 배열에 배열을 합치는 것이 가능합니다.

 

const arr1 = [1, 2, 3, 4, 5, 6];

const arr2 = [7, 8, 9];

const copyArr = arr1.concat(arr2);

console.log(copyArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9] 출력

인자로는 배열을 받을 수 있으며 기존 배열의 끝에 요소를 추가합니다.

 

이는 push() 메서드와 비슷하지만 push() 메서드의 경우 인자로 받은 배열을 중첩 배열로 추가하지만

 

concat() 메서드의 경우 인자로 받은 배열의 요소를 기존 배열에 추가하는 것입니다.