[JavaScript]배열 복사 방법

JavaScript에서 기존 배열의 값을 유지하고 새로운 배열로 복사 후 값을 변경해야 하는 경우가 존재합니다. 여기서 배열을 잘못된 방법으로 복사하면 새로운 배열의 값을 변경했는데 기존 배열의 값도 변경되는 문제가 발생합니다.

 

다음은 잘못된 방법으로 배열을 복사 후 값을 변경하는 예제입니다.

let arrA = [1, 2, 3];
let arrB = arrA;

arrB[0] = 10;

console.log(arrA);
// [10, 2, 3]
console.log(arrB);
// [10, 2, 3]

배열 arrB의 0번째 위치의 값을 변경했는데 배열 arrA의 0번째 위치의 값도 변경되었습니다. 이러한 원인은 배열이 값 형식이 아닌 참조 형식이기 때문입니다.

 

이번 포스팅에서는 JavaScript에서 배열을 복사하는 몇 가지 방법을 소개합니다.

---

Spread 연산자( ... ) - 얕은 복사

Spread 연산자를 사용하여 배열을 복사할 수 있습니다. 단, 다차원 배열에서는 사용할 수 없습니다.

let arrA = [1, 2, 3];
let arrB = [...arrA];

arrB[0] = 10;

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [10, 2, 3]

배열을 복사하는 가장 간단한 방법으로 새로운 배열의 값을 변경해도 기존 배열이 변경되지 않습니다. 

---

map() 함수 - 얕은 복사

map() 함수는 배열에서 사용할 수 있는 함수로 배열의 모든 요소를 순회하여 새로운 배열을 반환합니다.

 

다음은 map() 함수를 사용하여 배열의 요소에 * 2 연산을 한 결과로 새로운 배열로 생성하는 예제입니다.

let arrA = [1, 2, 3];
let arrB = arrA.map((item) => item * 2);

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [2, 4, 6]

map() 함수에서 배열을 복사하기 위해서는 다음과 같이 사용합니다.

let arrA = [1, 2, 3];
let arrB = arrA.map((item) => item);

arrB[0] = 10;

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [10, 2, 3]

---

filter() 함수 - 얕은 복사

filter() 함수는 조건을 만족하는 요소를 모아서 새로운 배열로 반환합니다.

 

다음은 filter() 함수에서 배열 요소가 2인 값을 필터 하여 새로운 배열을 생성하는 예제입니다.

let arrA = [1, 2, 3];
let arrB = arrA.filter((item) => item === 2);

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [2]

filter() 함수를 사용하여 배열을 복사하는 경우 필터 조건을 항상 true로 설정합니다.

let arrA = [1, 2, 3];
let arrB = arrA.filter(() => true);

arrB[0] = 10;

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [10, 2, 3]

---

reduce() 함수 - 얕은 복사

reduce() 함수는 리듀서 함수를 실행하고 리듀서 함수의 반환 값은 리듀서 함수의 첫 번째 인수인 누산기에 할당됩니다. reduce() 함수는 배열을 복사하는 방법 중 가장 비효율적이고 사용 방법도 어렵습니다.

let arrA = [1, 2, 3];
let arrB = arrA.reduce((newArray, item) => {
  newArray.push(item);
  return newArray;
}, []);

arrB[0] = 10;

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [10, 2, 3]

---

slice() 함수 - 얕은 복사

slice() 함수는 시작 위치를 설정하여 특정 위치까지 배열의 복사본을 생성합니다. 주로 특정 위치의 배열을 추출하는 경우 사용합니다.

 

다음은 slice() 함수를 사용하여 배열을 복사하는 예제입니다.

let arrA = [1, 2, 3];
let arrB = arrA.slice(0);

arrB[0] = 10;

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [10, 2, 3]

slice() 함수의 시작 위치(첫 번째 매개변수)를 0으로 설정하여 특정 위치(두 번째 매개변수)를 생략하여 마지막 위치까지 배열을 복사합니다.

---

from() 함수 - 얕은 복사

from() 함수는 기존 배열을 복사하여 새로운 배열로 복사합니다. from() 함수에 기존 배열을 전달합니다.

 

다음은 from() 함수를 사용하여 배열을 복사하는 예제입니다.

let arrA = [1, 2, 3];
let arrB = Array.from(arrA);

arrB[0] = 10;

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [10, 2, 3]

---

JSON.parse() 함수 및 JSON.stringify() 함수 - 깊은 복사

위에서 설명한 방법들은 다차원 배열을 정상적으로 복사하지 못합니다. 다차원 배열을 복사해야 하는 경우 JSON.stringify() 함수로 원본 배열을 문자열로 변환 후 JSON.parse() 함수로 JavaScript Object로 파싱 합니다.

 

다음은 JSON.stringify() 함수와 JSON.parse() 함수를 사용하여 다차원 배열을 복사하는 예제입니다.

let arrA = [[1, 2, 3], ['A', 'B', 'C']];
let arrB = JSON.parse(JSON.stringify(arrA));

arrB[0][0] = 10;

console.log(arrA);
// [[1, 2, 3], ['A', 'B', 'C']]
console.log(arrB);
// [[10, 2, 3], ['A', 'B', 'C']]