Clone An Array

배열을 복사하는 방법은 여러가지가 있습니다. 배열은 javascript에서 reference value이기 때문에 배열을 복사 할 때 잘 생각하고 복사를 해야합니다.

=를 사용해서 값을 복사하면 안되는 이유!

const animals = ["🐶", "🐱", "🐵", "🐯", "🐷"];
const copiedAnimals = animals;
animals.push("🐨");
console.log(animals); // ["🐶", "🐱", "🐵", "🐯", "🐷", "🐨"]
console.log(copiedAnimals); // ["🐶", "🐱", "🐵", "🐯", "🐷", "🐨"]

배열은 javascript에서 reference value입니다. 따라서 원래의 값에 다른 요소를 추가하거나 제거하게 되면 복사된 값도 변하게 됩니다.

이전 값을 참조하지 않게 복사를 하는 방법

const animals = ["🐶", "🐱", "🐵", "🐯", "🐷"];
const mapAnimals = animals.map(a => a);
const sliceAnimals = animals.slice();
const jsonAnimals = JSON.parse(JSON.stringify(animals));
animals.push("🐨");
console.log(animals); // ["🐶", "🐱", "🐵", "🐯", "🐷", "🐨"]
console.log(mapAnimals); // ["🐶", "🐱", "🐵", "🐯", "🐷"];
console.log(sliceAnimals); // ["🐶", "🐱", "🐵", "🐯", "🐷"];
console.log(jsonAnimals); // ["🐶", "🐱", "🐵", "🐯", "🐷"];

es5에선 map 또는 slice를 이용하여 배열을 복사 할 수 있었습니다. JSON.stringify와 JSON.parse 두 기능을 이용하여 복사 할 수 있습니다. 이렇게 복사를 하면 새로운 배열은 이전의 메모리를 참조하지 않습니다. 따라서 복사전 값을 변경하더라도 나머지 값에 영향을 주지 않습니다.

es6의 spread operator

const animals = ["🐶", "🐱", "🐵"];
const emotion = ["😀", "😅", "😎"];
const sumArray = [...animals, ...emotion];
console.log(animals); // ["🐶", "🐱", "🐵"];
console.log(emotion); // ["😀", "😅", "😎"];
console.log(sumArray); // ["🐶", "🐱", "🐵", "😀", "😅", "😎"];

spread연산자를 사용해서 값을 복사 할 수 있습니다. 이 또한 이전의 메모리를 참조하지 않는 새로운 배열을 생성합니다.

추가로 배열의 복사 방법

const animals = ["🐶", "🐱", "🐵", "🐯", "🐷"];
const newArr = Array.from(animals);
console.log(animals); // ["🐶", "🐱", "🐵", "🐯", "🐷"];
console.log(newArr); // ["🐶", "🐱", "🐵", "🐯", "🐷"];

Array.from을 사용하면 메모리를 참조하지 않는 배열을 복사 할 수 있습니다.