이건 내가 복습할겸 해당 주소에서 퍼왔다.
정말 알기쉽게 정리가 되어있어서 별다른 설명필요없이 이것만 봐도 될것같다. 나도 복습할때 써야지 ㅎㅎ
자바스크립트의 타입은 크게 2가지로 나뉩니다. 기본형 데이터(Primitive) 와 참조형 데이터(Reference) 입니다.
기본형 데이터에는 string, number, bigint, boolean, undefined, symbol, null 이 있습니다.
참조형 데이터에는 object 가 있고, 거게에 포함이 되는 array, function, RegExp(정규표현식), map, set 등이 있습니다.
두 타입의 가장 큰 차이는 값을 저장하는 방식입니다.
기본형 데이터는 바로 값을 메모리에 할당하지만, 참조형 데이터는 값이 들어 있는 메모리의 주소를 할당합니다.
예를 들어보면,
먼저 a 에 1 을 넣습니다.
let a = 1;
let b = a;
a의 값을 받은 b를 출력하면 1이 나옵니다. 이것을 Copy by Value 라고 합니다
그렇다면 b의 값을 변경하고 출력하겠습니다.
b = 2;
b를 출력하니 이제 2가 나왔습니다. 다시 a를 출력해 보니 여전히 1이 나왔습니다.
당연히 b의 값만 바꿨으니까요.
그러나 이 당연한 이야기 참조형 데이터에서는 다른 결과를 보여 줍니다!
참조형의 예시로 object 를 하나 만들었습니다. cat 이라는 object 를 만들어서 dog 에 넣어 줍니다.
let cat = {
name : 'cat';
}
let dog = cat;
dog 를 출력해보면, { name : 'cat' } 이 나옵니다.
이렇게 보면, 위와 다를 것이 없는 것 같죠? 값이 똑같이 복사가 되니까요.
하지만, 이렇게 해보면 어떨까요?
dog.name = 'dog';
dog 의 name 값을 바꿨습니다. dog 를 출력하니 { name : 'dog' } 가 나왔습니다.
그리고 cat 을 출력해보니 dog 과 동일하게 { name : 'dog' } 가 나왔습니다.
아니, cat 의 name 은 바꾼 적이 없는데 왜 cat 의 객체도 변경된 것일까요?
그 이유는 object 는 위의 첫 번째 예시(Copy by Value)와 달리 참조 값! 즉, 값을 가지고 있는 주소의 값이 할당 되기 때문입니다. 이것을 Copy by Reference 라고 합니다.
위의 코드 중 let dog = cat; <- 이 부분이 { name : 'cat' } 이 값을 dog 에 넣는 것이 아니라, 이 값이 들어가 있는 주소! 0x0000001 같은 주소를 넘겨 주는 거랍니다.
때문에 dog.name = 'dog'; 이 순간에 아까 cat 한테 받은 주소로 가서 cat 이랑 함께 사용하고 있는 데이터를 수정한 것입니다.
(집 주인 허락도 없이 주소를 공유한다는 이유만으로 이렇게 데이터를 바꿀 수 있다니..)
때문에 object 같은 참조형 데이터를 사용할 때는 주의 해야 합니다.
