궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
FRONT-END/JAVASCRIPT

(JAVASCRIPT) 원시 타입과 객체 타입 차이 정리

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

데이터 타입

객체는 Object라고 불립니다.
이번에는 데이터 타입인 단일 데이터와 복합 데이터의 차이에 대해 알아보도록 하겠습니다.

단일 데이터 원시 타입

단일한 값을 하나씩 담을 수 있는 단일 데이터인 원시(primitive) 타입.

 

단일 데이터는 원시 타입인 숫자 타입, 문자열 타입, 불리언 타입, null 타입, undefined 타입, symbol 타입이 있습니다. 

let Alphabet = ['A', 'B', 'C'];

단일 데이터인 원시 타입이 메모리에 어떻게 보관이 되냐 하면,  변수에 값을 할당하게 되면 메모리 셀에 값이 들어가게 되고, 변수는 값이 들어있는 메모리셀의 주소를 가리키게 됩니다. 

복합 데이터 객체 타입

연관된 데이터를 함께 묶어서 보관할 수 있는 복합 데이터인 객체(object) 타입.

 

복합 데이터에는 객체가 있는데 객체는 아래와 같은 형태를 띠고 있습니다.

let House = {
  address: 'Seoul',
  Apartment: 'Han',
  zipCode: 10000,
}

객체는 바로 오브젝트 { } 안에 KeyValue 형태의 데이터가 여러 개의 형태로 복합적으로 담겨 있다고 보면 됩니다.

{ 
  key:value,
  key:value,
  key:value,
}

원시 타입은 DATASTACK에 보관되게 되고, 객체 타입은 HEAP 영역에 들어가게 됩니다.

 

객체는 한 덩어리의 오브젝트로 이뤄져 있기 때문에 너무 커서 DATASTACK에 들어가지 않고, HEAP 영역으로 들어간다고 생각하시면 됩니다.

 

HEAP안에는 데이터의 사이즈가 정해져 있지 않고 동적으로 사이즈가 줄거나 늘어날 수 있습니다.

{
  address: 'Seoul',
  Apartment: 'Han',
  zipCode: 10000,
}

즉, 위와 같은 객체는 HEAP 어딘가에 보관되고

let House

House라는 변수는 메모리셀에서 객체가 할당된 곳의 주소를 갖게 됩니다.

House.Apartment

객체 사용

객체를 한번 사용해보도록 하겠습니다.

let House = {
    address: 'Seoul',
    Apartment: 'Han',
    zipCode: 10000,
};

console.log(House);
console.log(House.Apartment);
console.log(House.address);
console.log(House.zipCode);

/*
{ address: 'Seoul', Apartment: 'Han', zipCode: 10000 }
Han
Seoul
10000
*/

이런 식으로 객체를 만들어서 보관하면 동적으로 관리도 쉬워지게 됩니다.

원시와 객체 차이 정리

 
 
 

원시 타입과 객체 타입 차이
- 원시 타입은 값 자체가 메모리 셀에 들어가 있다. 원시 타입은 값이 복사되어 전달된다.

- 객체 타입은 참조값 즉 메모리 주소가 변수에 들어가 있다. 객체 타입은 참조값이 복사되어 전달된다.

아래 이미지를 보면 a1이라는 값을 할당하고, ba변수를 할당하게 됐습니다. 그럼 b변수에는 a가 가리키고 있는 1이 복사되어 할당되게 됩니다.

 

이것을 Copy by Value라고 부릅니다. 즉, 원시 타입은 값 자체가 복사되어 할당이 된다는 의미이죠.

https://dev.to/iamgjert/copy-by-value-vs-reference-1bd3

반대로 객체에서 사용하면 어떻게 될까요?

let a = {
   name: 'Object',
   color: 'blue'
}
let b = a;

메모리 셀에 a의 래퍼런스 주소가 들어가 있는데, 이것을 b에 래퍼런스를 복사해서 할당하게 됩니다.

 

이것을 Copy by Reference라고 부릅니다.

 

그럼 차이점은? 

 

다시 원시 타입으로 가서 볼께요.

let a = 1
let b = a

b = 2

console.log('b:', b);
console.log('a:', a);

/*
b: 2
a: 1
*/

baCopy by Value 해줬지만, 당연히 a는 처음 할당한 그대로 1이라는 값을 갖게 됩니다. 즉, 값이 복사가 된것입니다.

 

객체 타입을 콘솔로 찍어보면

let a = {
    name: 'Object',
    color: 'blue'
}
let b = a;

b.name = 'primitive';

console.log('b:', b);
console.log('a:', a);

/*
b: { name: 'primitive', color: 'blue' }
a: { name: 'primitive', color: 'blue' }
*/

원시 타입과 객체 타입의 차이점이 보이나요? 

 

객체 타입은 래퍼런스 주소를 복사(참조 값이 복사)해 할당해주기 때문에 b에서 name을 재할당해주게 되면 a 변수에서도 name이 같이 바뀌게 됩니다.


오늘은 이렇게 데이터 타입인 단일 데이터와 복합 데이터의 차이에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟


참고 문헌 REFERENCE
 

Copy by Value vs Reference

Intro There are two ways to pass a value to a variable in JavaScript and understanding how they...

dev.to


잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.