[ JS ] 자바스크립트 타입 총정리

자바스크립트 타입

자바스크립트는 원시 타입과 참조 타입으로 나누어진다.

 

원시 타입 ( Primitive type )

• Boolean
• String
• Number
• null
• undefined
• Symbol

 

참조 타입 ( Object type )

• Object
• Array

 

원시 타입 ( Primitive type )

Name	Description
string	문자열을 나타낸다.
number	숫자 값을 나타낸다.
boolean	true 와 false 값을 가지고 있다.
null	하나의 값을 가진다 : null 의도적으로 '값이 없음'을 나타내기 위해서 사용된다.
undefined	하나의 값을 가진다 : undefined 초기화되지 않은 변수의 기본값이다.
symbol	변경 불가능한 유일한 값을 생성할 때 사용하며, 값 자체의 확인이 불가하여 외부로 노출되지 않는다. ES6에서 새로 생긴 타입이다.

 

Javascript는 원시 타입에 대한 값을 저장할 때 고정된 크기로 Call Stack 메모리에 저장한다. 조금 더 자세히 알아보자.

 

원시 타입 변수의 생성

 

자바스크립트 엔진은 Memory Heap과 Call Stack으로 구성되어 있다.

 

Call Stack

 

• 함수 호출과 실행 순서 관리: 함수가 호출될 때마다 Call Stack에 추가하고, 실행이 끝나면 Call Stack에서 제거한다.
• 실행 컨텍스트 관리: 각 함수의 실행 컨텍스트(변수, 함수 내부 상태 등)를 관리한다.
• 실행 흐름 제어: 함수가 종료되기 전에는 다음 함수를 실행하지 않으며, 스택의 맨 위에 있는 함수만 실행한다.
• 오류 처리: 무한 재귀 호출이나 함수의 과도한 중첩 호출로 인해 Call Stack이 꽉 차면 Stack Overflow 에러를 발생시킨다.

 

Call Stack은 위의 역할을 가지는 데, 우리가 주목해야할 것은 실행 컨텍스트 관리이다.

원시 타입의 데이터 값이 어떻게 Call Stack에 저장되는지 보자.

 

 

우리가 코드를 통해 변수 a, b에 데이터를 할당하면 해당 데이터 값은 콜스택에 저장된다. 그 후, 데이터 값이 저장된 콜스택의 주소 값이 변수 a, b에 각각 저장된다.

 

 

만약, 변수 a에 20을 재할당하면 본인 메모리의 값을 변경하는 것이 아니라, 기존에 20이 저장된 메모리 주소로 교체된다. 이때 a에 저장된 주소 값은 20을 가리키고 있던 b의 주소 값과 동일해진다.

 

그렇다면 b의 값을 재할당 해주면 어떻게 될까?

 

 

변수 b에 30을 재할당하면, 변수 b의 주소 값이 가리키는 메모리에 저장된 20을 30으로 교체하는 게 아니라, 새로운 메모리를 확보하여 30을 저장하고, 변수 b에 저장된 주소 값을 해당 주소 값으로 교체한다.

 

💡Tip
변수 a와 b가 재할당되며 사용되지않는 부분이 생기게 되었다. ( 주소 : 10FF 0001  값 : 10 )
이렇듯 더 이상 참조되지 않는 데이터는 가비지 컬렉터에 의해 적절한 시점에 메모리에서 해제된다.

 

 

참조 타입 ( Object type )

 

Name	Description
function	함수를 나타낸다.
array	배열을 나타낸다.
classes	클래스를 나타낸다.
object	객체를 나타낸다.

 

Javascript는 참조 타입의 데이터의 값을 heap에 저장하며 변수에 heap 메모리의 주소값이 Call Stack에 할당된다.

 

참조 타입 변수의 생성

자바스크립트의 참조 타입은 원시 타입과는 다르게 동작한다. 간단한 예를 통해 알아보자.

 

let array = ["Jack Welker", "Gus Fring", "Tuco", "Mike"];

 

array 변수를 선언하고 "[]"같은 참조 타입을 할당했을 때, 다음과 같은 일들이 메모리에서 일어나게 된다.

 

1. 변수의 고유 식별자를 생성한다.

2. Call Stack의 메모리에 주소를 할당한다.

3. heap에 할당된 메모리 주소를 Call Stack의 값(value)으로 저장한다.

4. heap의 메모리 주소에 할당된 값을 저장한다.

 

 

그림을 보면 더 쉽게 이해가 될 것이다. 우리가 변수에 할당해준 ["Jack Welker", "Gus Fring", "Tuco", "Mike"]는 heap에 저장되어 있고 데이터가 저장된 주소를 Call Stack의 value에 넣어준다.

 

자바스크립트는 동적 타입

자바스크립트는 느슨한 타입(loosely typed)의 동적(dynamic) 언어이다. 대부분의 다른 언어는 정적(Static) 타입 언어이다.( Java, C#, C++ )

 

자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능하다.

 

let foo = 42 // foo가 숫자
foo = 'bar' // foo가 이제 문자열
foo = true // foo가 이제 불리언

 

타입을 명시하지 않아도 되며 같은 변수가 여러 개의 타입을 가질 수 있다.

 

// 원시 타입 
// String
const name = "Han"
// Number 
const age = 30
// Boolean
const hasJob = true
// Null 
const car = null;
// Undefined
let anything;
// Symbol
const sym = Symbol();

// 참조 타입 - Objects 
// Array 배열
const hobbies = ['walking', 'books']
//  Object literal 객체 리터럴
const address = {
    province: '경기도',
    city: '성남시'
}

console.log(hasJob);
console.log(typeof hasJob);