[JavaScript-44] 배열과 객체를 복사할 때의 주의사항

결론부터 말씀드리면,

배열과 객체를 할당 연산자로 복사해서 새로 생성하면,

둘 중 하나의 값만 바꿔도 변경사항이 두 객체나 배열 모두에 적용됩니다!

(숫자, 문자, 불린은 아님)

 

말이 조금 어려운 것 같으니, 코드로 보시죠!

let arr1 = [1, 2, 3];
let arr2 = arr1;

arr1.push(4);
console.log(arr1); //[1, 2, 3, 4]
console.log(arr2); //[1, 2, 3, 4]

위의 코드를 보시면, arr2라는 새로운 배열을 할당 연산자를 통해 arr1의 내용을 복사해와서 생성하고 있죠?

그런데, 위에서 말씀드렸듯, 배열과 객체는 저렇게 할당연산자로 내용을 복사하면, 

둘이 같은 주소를 갖게 되므로, 하나의 내용만 바꿔도 서로에게 반영이 됩니다. 

 

그래서, arr2 = arr1을 한 순간, 두 배열은 사실상 이름만 다르지, 같은 배열을 가리키게 됩니다. 

그래서, arr1에 4를 넣어주면, arr1과 arr2에 동시에 4가 들어가게 되는 것이죠!

 

그럼, 둘을 독립된 별개의 배열로 만들되, arr2는 arr1의 내용을 모두 가져오게 만드는 방법은 뭘까요?

바로, splice메소드의 파라미터를 비워주는 것입니다! 

 

splice메소드, 기억 나시나요?

배열에서 특정 요소들을 삭제해주는 메소드였죠!

파라미터를 비우면, 그냥 배열 전체의 내용을 출력해줍니다. 

 

이를 활용해 배열의 내용은 모두 가져오되, 주소값은 다른 배열을 새로 생성할 수 있습니다.

코드로 보시죠

let arr1 = [1, 2, 3];
let arr2 = arr1.splice();

arr1.push(4);
console.log(arr1); //[1, 2, 3, 4]
console.log(arr2); //[1, 2, 3]

이제 arr1과 arr2는 별개의 주소값을 갖는 독립된 배열이기에, arr1의 변경 사항은 arr2에는 반영되지 않겠죠!

 

객체에 대해서도 살펴보죠. 

객체의 경우는 

 

let 새 객체 이름 = Object.assign({}, 내용을 가져오고 싶은 객체 이름);

의 형태로 써주시면 됩니다!