[JavaScript] Object 복사하기

 

 

화면

한 화면이 있다.

여기에 Button '버튼' 하나만 있는 화면이 있다.

저 화면을 누를 경우, JavaScript에서 Object를 생성할 것이고, 그 Object가 console창에 log를 남기게 된다.

log의 내용은 다음과 같다.

 

 

Object를 담아보자.

Object 변수에는 객체에 'a'에는 '몰라', 'b'에는 '피노키오'를 담았다.

그리고 test라는 Object를 또 하나를 생성하게 되는데, 여기에는 기존의 Object를 담게 된다.

 

test는 Object의 변수에서 값을 가져왔기 때문에 Object의 내용과 일치하게 된다.

그리고 test에서 'a'의 키를 변경했을 때, Object의 변화를 알아보는 실험이다.

 

변경은 test 변수에서 했기 때문에 Object에서는 변화가 있어서는 안 된다.

그러나 Object 또한 test처럼 값이 변경된 것을 알게 된다.

 

JavaScript Console창에서 Object값이 변경 된 것을 알 수 있다.

여기서 짚고 넘어가야 할 것.

 

Object의 변수를 test가 가져왔지만 이는 복사가 아니라는 것이다.

test에서 값이 변경이 되었어도 Object에서도 값이 변경되었다는 것이 이를 증명한다.

 

더 쉽게 말하면, test = Object는 Object가 나타내는 것을 test에도 공유한다는 의미를 갖게 된다.

 

그렇다면 값을 복사할 때는 어떻게 해야 할 것인가?

 

 

 

복사 방법 1 - 스프레드 연산자

let Object = {'a': '몰랑', 'b': '피노키오'};
console.log(Object);

let testObject = {...Object};
testObject['a'] = '병아리';

console.log(testObject);
console.log(Object);

 

{... Object명} 이용 하는 방법이다.

 

testObject를 생성하게 되는데, Object를 대상으로 값을 갖고 오는 것을 확인할 수 있다.

testObject는 'a'값을 '병아리'로 변경했을 때, 각각 testObject와 Object는 서로 어떻게 표현할 것인가?

 

object의 a값이 각각 다른 것을 확인 할 수 있다.

처음의 실험과 다르게, 각각 다른 것을 보여주는 것을 확인할 수 있었다.

우리가 원하는 js의 복사를 확인하게 되었다.

 

 

복사방법 2 - JSON.parse 

let Object = {'a': '몰랑', 'b': '피노키오'};
console.log(Object);

let testObject = JSON.parse(JSON.stringify(Object));
  
testObject.a = '사과는 맛있어';

console.log(Object);
console.log(testObject);

json Parse 이용하기

 

JSON.parse(JSON.stringify(Object명)); 으로 복사할 수도 있다.

 

.

 

 

복사를 = 으로 해서는 안 되는 이유

우리가 사용하는 변수명은 사람이 읽기 편하기 위해 '값'을 저장하는 것이며, 사실 이 '값'이 어디 있다는 것을 사람이 컴퓨터에게 지시하는 것과 비슷하다.

 

예를 들자면 'A1' 암호는 앞으로 대한민국의 서울이라고 약속을 하며, 'B1'암호는 'A1의 암호' 이야 라고 했을 때.

질문을 'B1'의 암호가 무엇이냐라고 질문한다면 보통 'A1'의 암호가 가리키는 '대한민국의 서울'이라고 할 것이다.

 

여기서 'A1'의 암호가 '대한민국의 부산'이라고 변경했을 때, B1의 암호는 무엇이 될까?

B1의 암호는 '대한민국의 서울'이 될 수 있을까?

 

이처럼 = 는 Object의 복사가 아닌 그 변수가 가리키는 변수의 값을 저장하는 위치라고 표현을 해야 하며, 동시에 변수의 공유로 생각하는 것이 올바르다.

 

그렇기에 = 는 사용할 일이 적으며, 이는 데이터의 복사라고 할 수가 없다.

따라서 복사는 =을 해서는 안 된다.