-
자료, 객체의 복사에 대해서프론트엔드/JavaScript 2020. 9. 19. 06:07
자바스크립트의 복사
자바 스크립트를 이용하다보면 복사를 할 일이 많다.
이때 주의할 것이 자료형에 따라 복사의 형태가 달라진다는 것이다.
우선 기본 자료형인 Number의 복사를 보면 다음과 같다.
<body> <script> var num1 = 5; var num2 = 7; console.log(num1); // 5 출력 console.log(num2); // 7 출력 num2 = 9; console.log(num1); // 5 출력 console.log(num2); // 9 출력 </script> </body>그 다음은 String의 복사를 보자.
<body> <script> var string1 = "참새"; var string2 = string1; console.log(string1); // 참새 출력 console.log(string2); // 참새 출력 string2 = "독수리"; console.log(string1); // 참새 출력 console.log(string2); // 독수리 출력 </script> </body>Number, String의 경우 자료를 복사하고 자료가 본사된 변수를 수정해도 원본에 문제가 없다.
어떻게 보면 당연한 것 처럼 보이기도 하다.
하지만 기본 자료형을 제외한 객체는 다르다.
<body> <script> var array1 = ["사자","호랑이","너구리"]; var array2; array2 = array1; console.log(array1); // ["사자","호랑이","너구리"] 출력 console.log(array2); // ["사자","호랑이","너구리"] 출력 array1[0] = "반달곰"; console.log(array1); // ["반달곰","호랑이","너구리"] console.log(array2); // ["반달곰","호랑이","너구리"] </script> </body>배열 객체의 경우 복사를 시행하고 복사된 배열 객체를 수정했더니 원본이 변했다.
왜 그런것일까?
기본 자료형과 객체의 차이
자바스크립트에선 기본 자료형(primitive)과 객체(object)로 나눠진다.
그럼 이건 무슨 기준으로 나눠진걸까?
간단히 말하면 변수가 저장하고 있는 값의 차이다.
기본 자료형 데이터는 변수에 저장될 때 메모리의 크기가 고정되고 해당 변수가 그 값을 저장하게 된다.
반면 객체 데이터는 변수에 저장될 때 그 값을 같는 것이 아닌 그 값이 저장된 다른 메모리 공간의 주소를 저장하게 된다.
이게 무슨 소리냐면 그림으로 보면 더 편하다.
그림과 같이 기본 자료형은 변수가 바로 데이터를 저장한다.
하지만 객체 자료형의 경우 변수가 다른 메모리 공간에 저장된 값을 참조하여 사용자에게 보여주는 것이다.
그렇다면 위 코드처럼 객체 자료형을 복사하면 어떻게 될까?
객체 자료형을 복사하면 데이터가 서로 이전되면서 복사되는 것이 아니라 다른 메모리 공간에 있는 데이터를 같이 참조하게 되는 것이다.
즉 변수 2개에 같은 데이터가 할당되는 것이다.
그래서 원본을 복사한 변수의 자료가 바뀌면 원본이 참조하고 있는 자료도 똑같이 바뀌는 것이다.
왜냐면 원본을 복사한 변수가 참조하는 자료와 원본을 가진 변수가 참조하는 자료가 똑같은 것이기 때문이다.
Object.assign() 메서드
앞서 말했듯 기본 자료형이 아닌 객체 자료형의 복사를 할 경우 온전한 복사가 이뤄지지 않는다.
그렇다면 독립성을 지키면서 원본을 복사하고 싶다면 어떻게 해야할까?
그럴 때는 Object.assign() 메서드를 사용하면 된다.
Object.assign( 원본, 복사 결과 )
<body> <script> var array1 = ["사자","호랑이","너구리"]; var array2; Object.assign(array1, array2); console.log(array1); // ["사자","호랑이","너구리"]; 출력 console.log(array2); // ["사자","호랑이","너구리"]; 출력 array2[0] = "반달곰"; console.log(array1); // ["사자","호랑이","너구리"]; 출력 console.log(array2); // ["반달곰","호랑이","너구리"]; 출력 </script> </body>이렇게 될 경우 복사한 변수는 원본 변수의 데이터를 그대로 복사하면서도 독립성을 유지하게 된다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
Object의 분류 - 네이티브 객체, 호스트객체 (0) 2020.09.21 기본자료형/객체 비교하기, 타입 확인하기 (0) 2020.09.19 자바스크립트의 클로저(Closure) (0) 2020.09.15 자바스크립트 Object 객체 (0) 2020.09.14 자바스크립트의 상속 (inheritance) (0) 2020.09.14