[JS] 원시타입과 참조타입

자바스크립트 변수타입에는 원시타입과 참조 타입이 있다.

 

원시타입

원시 타입에는 string, number,  boolean, null, undifined, ES6 부터 추가된 symbol로 구성 되어있다.

1. string: "Hongildong"
2. number: 3.141592
3. boolean: true & false
4. undefined: 변수가 정의되지 않았거나 값이 없다.
5. null: 의도적으로 비어있음을 표현하기 위해 null 이라는 것이 들어있다.
6. symbol

 

a란 변수에 300이란 값을 할당하고 2번째 라인에서 100으로 재할당을 해준 예시이다. 첫 라인이 실행되면 메모리에 Number타입의 300이란 값이 생성되고 식별자 a는 메모리에 생성된 300의 메모리 주소를 가리킨다. 그후 두번째 라인이 실행되면 이전에 메모리에 생성된 300이란 값이 100으로 수정되는것이 아닌, 새로운 Number타입의 100이란 값을 새로운 메모리에 생성하고 a가 가리키던 메모리가 바뀌는것이다.

let a = 300;

a = 100;

 

 

즉 메모리에는 300과 100이란 값이 모두 존재하고 있으며, 앞에서 말했듯이 원시타입은 불변성을 갖고 있기 때문에 기존에 메모리에 생성된 값들은 그 자체가 변경될 수 없다. 그저 식별자와 연결 되있는 메모리가 바뀌었기에 우리 눈에는 재할당 된 것처럼 보일뿐이다.

 

 

 

참조타입

참조타입에는  객체({}), 배열([]), 함수(function(){})가 있다.  원시 타입과 가장 큰 차이점은 변수 크기가 동적으로 변한다는 것이다.

참조타입에 변수는 실제 데이터가 저장된 주소를 참조하기에 참조(reference)타입이라고 불리는 것이다.

 

const a = {number: 1};
let b = a;

b.number = 2

console.log(a); // {number: 2}
console.log(b); // {number: 2}

이런한 객체의 특징 때문에 객체를 복사하는 방법은 크게 두가지로 나뉜다.

바로 얕은 복사와 깊은 복사이다.

 

 

얕은 복사(Shallow Copy)

원래값과  복사된 값이 같은 참조를 가리키고있는 것을 말한다.

 

ex 

const job = {
  job: "senior developer",
  career: '10',
  ageGroup: {
    groop: 30,
    person: {
      name:"ingoo",
      id: "web7722"},
    },
  }, 
};

const job2 = job;
console.log(job === job2)
//true

job2.job = "senior";
console.log(job)
//{job: 'senior', career:'10',ageGroop:{...}}

---

깊은 복사 (Deep Copy)

깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.

const job = {
  job: "senior developer",
  career: '10',
  ageGroup: {
    groop: 30,
    person: {
      name:"ingoo",
      id: "web7722"},
    },
  }, 
};

const job2 = {
  ...job,
  ageGroup: {
    ...job.ageGroop,
    person: {
       ...job.ageGroop.person,
    },
  },
};

console.log(job === job2) //false

,

job2