Javascript Primitive type vs Reference type (원시자료형 vs 참조자료형)

자바스크립트는 원시자료형과 참조자료형으로 나뉜다.

Primitive type(원시자료형)

원시자료형에는 6개의 타입이 있다.

1. Number(숫자)
2. String(문자열)
3. Boolean(불리언)
4. null
5. undefined
6. Symbol

원시자료형은 모두 하나의 값을 담고 있으며 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 데이터를 재할당은 가능하다.

let cat = "야옹";
cat = "멍멍";

위의 코드에서 cat이라는 변수에 "야옹"이라는 값을 할당하였고 cat이라는 변수에 다시 "멍멍"이라는 값을 재할당 해주었다. 원시자료형은 값이 변하지 않는다는 불변성을 가지고있다 했는데 재할당된다는게 이해가 안될것이다. 하지만 "야옹"이라는 값이 사라진게 아니라 새로운 메모리에 "멍멍"이라는 값이 저장되었고 새로운 메모리를 가리키는 것 뿐이다.

let dog = "멍멍";
let cat = dog;

dog = "야옹";

console.log(dog); // "야옹"
console.log(cat); // "멍멍"

위의 코드를 보면 dog라는 변수에 "멍멍"이라는 값을 할당했고 cat이라는 변수에 dog를 할당하였다. 그리고 dog에 "야옹"이라는 값을 재할당하더라도 cat이라는 변수는 dog의 값을 통째로 복사하여서 변수의 메모리에 담으므로 영향을 받지 않는다.

Reference type(참조자료형)

자바스크립트에서 원시자료형을 제외한 나머지는 참조자료형이다.
참조자료형은 원시자료형 처럼 값이 아니라 주소를 저장한다.
참조자료형에서 배열,객체,함수가 대표적이다.

let obj = {
    q : 'q',
    w : 'w',
    e : 'e'
}

let copyObj = obj;

copyObj.q = 'a';

console.log(obj.q); // 'a'
console.log(copyObj.q); // 'a'

위의 코드를 보면 참조자료형들은 데이터가 저장된 주소를 참조하기 때문에 어느하나에 값을 재할당 할 경우 주소를 참조한 모든 값이 영향을 받는다.

참고한 사이트 :
https://hanamon.kr/javascript-%EB%B3%80%EC%88%98%EC%9D%98-%ED%83%80%EC%9E%85-%EC%9B%90%EC%8B%9C%ED%98%95%EA%B3%BC-%EC%B0%B8%EC%A1%B0%ED%98%95/
https://comp-jae.tistory.com/103
https://velog.io/@nomadhash/Java-Script-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC