[JavaScript] 자바스크립트의 자료형, 동적 타입 언어

컴퓨터는 데이터를 어떻게 처리할까?

• 컴퓨터에게 데이터의 종류를 지정하고, 알려주어서 데이터 종류에 맞게 적합한 로직처리를 할 수 있게 해주어야합니다.
• 여기서 말하는 데이터의 종류를 '데이터타입', '자료형'이라고 합니다. 

 

자바스크립트의 데이터 타입

1️⃣ 원시타입

: String, Number, BigInt, Undefined, Null, Boolean, Symbol

특징 

• 값은 변경 불가능한 값입니다. (immutable value)
• 참조 형태로 전달되는 것이 아닌, '값'으로써 전달됩니다. 
• 자바스크립트에는 원시 래퍼 객체가 따로 존재합니다. 원시 데이터를 사용할 경우, 해당 래퍼 객체들을 상속받아 사용할 수 있습니다. (원시 래퍼 객체와 원시 타입을 헷갈리지 말자!)

🤔 값은 변경되지 않나?
let a = 10;
a = 20;
10이라는 값은 그대로 존재하고, 변수 a가 새로운 값 20을 가리키게 된 것
-> 원시값 자체는 변경되지 않는다

객체타입은 객체 자체 주소는 그대로인데 내부 값이 바뀜!

 

2️⃣ 객체 타입

• 원시 타입의 값을 제외한 자바스크립트에서의 모든 것은 객체
• 여러 형태로 분류 할 수 있습니다 : 일반 객체, 함수, 날짜 ,인덱스 컬렉션, 키 컬렉션, ...
• 객체는 참조방식으로 전달됩니다. (Pass by reference) : 메모리 주소값이 전달, 의도치않게 데이터 변경될 수 있으므로 복사본을 전달해야함 (deep copy, shallow copy)
• 객체는 속성들을 변경할 수 있는 mutable한 값입니다. 

 

Number Type - 배정밀도 64비트 부동소수점(IEEE 754)

• 숫자에는 정수, 실수가 존재하는데, 자바스크립트에서는 Number라는 하나의 숫자 타입만 존재합니다.
• 자바스크립트에서는 모든 숫자를 실수로 처리하기때문에, 정수타입이 없습니다. 
• IEEE 754: 전자기술자 협회의 부동소수점 표현방식 표준
• 실수를 연산할 때 근사값으로 처리 : 0.1 + 0.2 != 0.3 
• -(2^53-1) ~ (2^53 - 1)의 수 : 원시 래퍼객체에서 상수변수로 제공
•  숫자 이외 
  1. Infinity (-Infinity) : 무한대를 나타내는 숫자
  2. Nan : Not A Number, 숫자가 아님

BigInt Type 

- 임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값으로, 매우 큰 정수를 다룰 때 사용합니다. 

- BigInt를 Number의 최대값을 넘는 정수도 안전하게 저장하고 연산할 수 있습니다. 

- 다른 타입과 혼합하여 연산할 수 없습니다.

 

String Type

• 텍스트 데이터를 나타낼 때 사용
• UTF-16 코드 단위의 시퀀스 표현 (UTF-16 : 유니코드 문자 인코딩 방식 중 하나)
  • 16bit 정수값의 요소로 구성된 집합
  • 각 요소가 string의 한 자리
  • 0번째 index부터 시작하여 배열처럼 접근 가능
• 원시값은 불변 -> 문자값은 불변!
• 표기법
  • 따옴표나 쌍따옴표, 백팃(backtick)으로 감싸서 문자열임을 표현
  • 템플릿 리터럴 표기법 (``)
    • 백팃의 표현은 ES6 이후부터 사용가능
    • 문자열 처리 기능 제공(줄바꿈 허용, 표현식 삽입 가능)
    • String interpolation : `My name is ${표현식}`

Boolean Type

• 논리적 데이터 유형
• 참 혹은 거짓의 값만 가질 수 있음
• e.g.
  • 상태값) input tag의 checkbox타입의 checked 상태
  • flag값) 특정 UI의 노출여부를 보여주는 변수의 상태 isShow

 

Undefined Type

• 변수를 선언한 후 값을 할당하지 않은 변수에 할당이 되는 값
  • 변수 초기화단계에서의 Undefined는 개발자의 의도해서 넣은 값이 아님
• 개발가 의도해서 넣을 수도 있습니다. 

 

Null Type

• 값이 없다는 것을 의도적으로 표현할 때 null을 사용합니다. 
• 이전에 참조되어있던 값을 의도적으로 더이상 참조하지 않겠다는 뜻으로도 사용합니다. 
• null 타입 체크는 일치연산자(===) 사용 <- 자바스크립트 스펙 내의 버그 : null의 type 'object'로 나옴

 

Symbol Type

const a = Symbol();
const b = Symbol();

console.log(a === b); // false

• ES6에 추가된 타입
• 중복되지 않는 유니크한 값
  • 객체의 key로 사용될 수 있음
  • 클래스나 객체형식의 내부에서만 접근할 수 있도록 전용 객체 속성의 키로 사용
• Symbol함수를 호출하여 생성

const key = Symbol();

const obj = {
  [key]: "value"
};

 

---

Reference Type

객체 타입

• 객체 타입, Object type, Reference type
• 객체 타입: 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
  • 객체: 데이터(속성), 데이터에 관련한 동작을(method) 포함하는 개념적 존재 
• 원시 타입의 값을 제외한 자바스크립트에서의 모든 것은 객체
• 변경 가능한 값(mutable): 객체의 속성을 변경, 추가, 삭제 가능
• 힙 메모리에 저장
  • 동적으로 변화 가능하므로, 메모리 공간 확보 및 저장 

---

 

동적 타입 언어

• 자바스크립트는 동적 타입 언어
• 의도적으로 타입을 변환할 수도 있지만, 의도와 상관없이 변경되기도 함
  • 명시적 타입 변환
  • 암묵적 타입 변환
    • 개발자가 의도하지 않았지만 타입이 변경될 가능성이 있습니다. -> 타입추론이 어려워져, 불필요한 디버깅 시간 발생
      • 값 + "" : 문자열 타입으로 변환
      • 값 * 1 : 숫자타입으로 변환
      • !!값 : 불리언 타입으로 변환
    • 해결 위해 전달되는 시점마다 typeof나 일치연산자 사용해 타입 guard 구현
    • 자바스크립트 superSet 타입스크립트 사용

function foo(인자) {
	if(typeof 인자 !== 'number') {
    	throw new Error('invalid 인자')
    }
    
    return 인자 + 3;
}
foo('apple');

>> Error: invalid 인자