[JavaScript] 데이터 타입 - 원시자료형, 참조자료형

원시자료형 종류 참조자료형 종류
  • 문자열
  • 숫자
  • 불리언
  • null
  • undefined
  • symbol
  • 배열
  • 객체
  • 함수 등..

 

원시자료형과 참조자료형 차이

 

1. 할당

 

원시자료형 : 메모리공간에 값 자체 할당

참조자료형: 값은 heap 공간에 저장하고 메모리공간에 heap을 참조하는 주소 저장

 

2. 변경

 

원시자료형: 변경 불가.

같은 변수에 값을 재할당할경우 값이 변경된 것처럼 보이나 내부에서는 메모리공간의 다른 곳에 새로운 값 저장 후 같은 변수명 등록. 먼저 등록되어있던 메모리는 garbage collector에 의해 삭제됨.

 

참조자료형 : 변경 가능

하나의 변수에 저장된 참조자료형을 다른 변수에 재할당하게되면 값 자체가 아닌 주소가 복사가 되므로 두 변수는 같은 주소를 참조하고, 참조자료형의 값을 변경하게 되면 그 변경사항이 양쪽 변수에 동일하게 적용됨.

but, 하나의 변수2에 다른 변수1의 참조자료형을 재할당해 같은 주소를 공유하게 된 후, 변수2에 다시 원시자료형을 할당하게 되면 변수1은 참조자료형 값을 유지하고, 변수2는 원시자료형을 값으로 갖게 된다. 

 

+ 원시데이터타입을 객체처럼 사용하는 경우

문자열은 원시자료형이지만 wrapper를 통해 임시로 객체처럼 사용할 수 있음. 때문에 str.length 와 같은 메서드, 프로퍼티가 사용 가능.

 

 

 

다중참조자료형 - 얕은 복사, 깊은 복사

 

1. 앝은 복사

변수를 재할당할 경우 주소가 복사되어 한 쪽 변수를 통해 값을 수정하면 다른 한 쪽이 같이 변경된 값을 참조하는 현상을 막고, 다른 주소로 같은 값을 복사하기 위해서는 slice(), 또는 spread 함수를 사용해야 한다.

 

하지만 참조자료형이 이중이거나 그 이상일 경우, 상기 방법으로는 가장 바깥의 참조자료형밖에 복사하지 못한다. 내부의 참조자료형은 여전히 같은 주소를 공유하고 있음. 위와 같이 하나의 참조자료형만 복사하는 형태를 얕은 복사라고 함.

//ex - slice()
let arr = [1,2,3];
let arr2 = arr.slice();

// -> 같은 값 다른 주소
console.log(arr === arr2); // false


//ex - spread 함수
let arr = [1,2,3];
let arr2 = [...arr];

// -> 같은 값 다른 주소
console.log(arr === arr2); // false

 + 객체의 경우 Spread 함수, 또는 Object.assign() 사용

//ex - Object.assign()
let obj = { a: "apple", b: "banana" };
let obj2 = Object.assign({}, obj);

//같은 값 다른 주소
console.log(obj === obj2) // false

 

 

3. 깊은 복사

 

이중, 삼중 구조를 이루고 있는 참조자료형을 복사하기 위해서는 JavaScript 문법만으로는 불가능하고, Json문법의 JSON.stringify() (참조자료형을 문자열로 반환)와 JSON.parse() (문자열을 객체로 반환)이용 가능.

하지만 함수가 포함되어있는 경우 null을 반환하기 때문에 Json의 경우 함수가 있으면 사용할 수 없다.

 

완전한 깊은 복사를 위해서는 node.js환경에서 lodash, 또는 ramda와 같은 외부 라이브러리 설치 필요.

 


이 글은 코드스테이츠 블로깅 과제로, 배운 것을 정리한 글입니다.

 

참고자료

  • 코드스테이츠 강의 자료