자바스크립트 변수 복사 비교( 기본형데이터, 참조형 데이터)

아래 게시물을 다 이해했다는 가정에서 쓰는 글입니다.!!

기본형 데이터와 참조형 데이터(불변성, 가변성)

변수 선언과 데이터 할당

변수 복사 비교

var num = 7;
var cloneNum = num

var obj = {
    num1: 7,
    num2: 'one'
};
var cloneObj = obj;

 

위와 같이 변수를 복사하는 과정은 기본형 데이터와 참조형 데이터 모두 같은 주소(값)을 바라보게되는

점에서는

동일하게 느껴집니다.

기본형 데이터 복사인 num, cloneNum이 바라보는 값이 @3000번 주소로 같고,

참조형 데이터 복사인 obj, cloneObj의 바라보는 값이 @3001번으로 같기 때문입니다.

 

이렇게 복사과정은 같지만 데이터 할당 과정에서 이미 차이가 있기 때문에 복사이후의 동작에 큰 차이가

발생 합니다.

 

var num = 7;
var cloneNum = num

var obj = {
    num1: 7,
    num2: 'one'
};
var cloneObj = obj;

cloneNum = 8;
cloneObj.num1 = 14;

위의 그림과 같이 기본형 데이터를 복사한 cloneNum 변수의 값을 14로 바꾸면 값을 가르키는 주소가 @3003으로 바뀐 반면,

cloneObj의 num1 값을 14로 바꾸면  cloneObj의 값을 가르키는 주소는 역시나 obj와 같이 여전히 @3001을 가르키고 있는 것을 확인할 수 있습니다.

num !== cloneNum
obj === cloneObj

 

결국 참조형 데이터는 여전히 같은 객체를 바라보고 있는 상태인 것입니다.

 

대부분 기본형은 값을 복사하고, 참조형은 주소값을 복사한다고 하지만
사실은 우리가 봐왔던 것과 같이 어떤데이터 타입이든 변수에 할당하기 위해서는 주소값을 복사해야 하기 때문에
모든 데이터 타입은 참조형 일 수 밖에없다.

다만 기본형 데이터는 주소값을 바로 대입하며, 참조형은 한번 거치기 때문에 변수에 담겨있는 가르키는 주소값이
변하거나 변하지 않는 차이가 있습니다.

 

추가

위에서 참조형 데이터이 변경은 기본형처럼 값 자체를 변경하는 것이 아닌,

내부 프러퍼티 ( cloneObj.num1 )를변경 시켰다, 같은 조건인 값자체를 변경하면 어떻게 되는지 보자.

var obj = {
    num1: 7,
    num2: 'one'
};
var cloneObj = obj;

cloneObj = {
    num1: 14,
    num2: 'one'
};

위와 같이 새로운 객체를 할당함으로 메모리에 새로운 객체가 저장되고 값이 달라진다.!

 

핵심!
참조형 데이터가 '가변값'이라고 할때 '가변'은 참조형 데이터 자체를 변경할 때가 아닌
내부 프로퍼티를 변경할때만 성립한다!!