날것 - 데이터 타입

데이터 타입 (Data Type)

모던 자바스크립트 Deep Dive 6장

데이터 타입이란 값의 종류를 말한다

원시타입과 객체타입이 있음
원시타입으로는 숫자, 문자열, 불리언, undefined, null, symbol 타입이 있고 (ES2020부터 BigInt 추가되어 현재는 7개)
객체 타입으로는 객체, 함수, 배열 등등이 있음

숫자 타입 (Number)

자바스크립트에서는 number라는 단 하나의 숫자 타입만 있다고 한다 (ES2020에서 BigInt가 추가되긴 함)
배정밀도 64비트 부동소수점 형식 <- (별도 파일 만들고 link하기) 을 따른다고 한다
2, 8, 16진수도 모두 10진수로 해석된다고 함 ㄷㄷ

var binary = 0b01000001
var octal = 0o101;
var hex = 0x41;

// 모두 65
console.log(binary);
console.log(octal);
console.log(hex);

// 모두 true
console.log(binary === octal);
console.log(hex === octal);

모든 수를 실수로 처리하기 때문에 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다

console.log(4 / 2); // 2
console.log(3 / 2); // 1.5

예외적인 타입으로는

console.log(10 / 0); // Infinity
console.log(10 / -0); // -Infinity
console.log(1 * 'String'); // NaN

또 자바스크립트는 대소문자 구분이 있어 Nan, nan 이렇게 쓰면 레퍼런스 에러(ReferenceError)가 뜬다

문자열 타입 (String)

문자열 타입이 제일 특이한듯 함

문자열 타입은 UTF-16의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.

'', "", `` 로 텍스트를 감싸서 사용

var string;
string = '문자열';
string = "문자열";
string = `문자열`;

' "문자열" ', " '문자열' " 이렇게도 사용 가능

따옴표로 문자열을 감싸지 않는다면 토큰으로 취급함

그리고 C는 배열로, Java는 객체로 문자열을 관리함
근데 자바스크립트는 문자열을 원시 타입 <- 변경 불가능함 으로 관리한다고 함

var string1 = "문자열";
var string2 = "문자열";

console.log(string1 === string2) // true

더 신기한게 원시타입임에도 string 메서드가 사용 가능한데 이는 자바스크립트 내부에서 String 객체로 wrapping해서 작업을 수행한 뒤 바로 버린다고 함 ㄷㄷ

new String("hello").toUpperCase()

템플릿 리터럴 (Template Literal)

얜 String이랑 좀 비슷함
하지만 `` 으로 선언함

var temp = `temp`
console.log(temp)

일반 문자열 내에서는 줄바꿈이 허용되지 않음. 그래서 이를 해결하기 위해 이스케이프 시퀀스를 사용함
ex) \n \f \b 등등
예를들어 줄바꿈과 들여쓰기가 적용된 HTML 문자열은 다음과 같이 이스케이프 시퀀스를 사용해 작성한다

var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';
console.log(template);

일반 문자와 달리 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용된다

var template = `<ul>
    <li><a href="#">Home</a></li>
</ul>`;
console.log(template);

추가로 표현식 삽입도 가능함 굿굿

var first = 'Byeong Jun';
var last = 'Jeon';

console.log(`My name is ${first} ${last}.`)

이때 사용하려면 위에 보이는것처럼 ${표현식} 형태로 감싸줘야함

주의해야할건 해당 표현식의 평가 결과가 문자열이 아니라도 문자열로 타입이 강제된다는것

console.log(`1 + 2 = ${1 + 2}`);

표현식 삽입은 반드시 템플릿 리터럴(백틱) 안에서만 동작함. 일반 따옴표 안에서 ${}쓰면 그냥 문자열로 출력되니깐 참고 ㄱㄱ

불리언 타입 (Boolean)

불리언 타입은 true false 단 두가지의 타입만 존재함

undefined 타입

이건 더 간단함
undefined밖에 없음
var 키워드로 선언한 변수는 암묵적으로 해당 값으로 초기화된다
처음 할당이 이뤄지기 전 undefined를 할당해줌

근데 이건 자바스크립트 내부동작에 의해 할당되는 값임으로 개발자가 직접 사용하면 혼란을 줄 수 있음
따라서 값이 없음을 표현하고 싶다면 undefined 말고 null을 사용하자

null 타입

이것도 null 타입밖에 없음

의도적으로 값이 없음을 나타낸다
이때 재밌는게 null을 할당하면 이전 값에 대한 참조가 끊기고, 그 값을 참조하는 변수가 더 이상 없으면 가비지 컬렉션이 쓱싹한다 (즉시 쓱싹하는 건 아니고 GC가 돌 때 대상이 됨)

var foo = 'Jeon';

foo = null; // 'Jeon'을 참조하는 변수가 없어지면 GC가 쓱싹함

함수가 유효한 값을 반환할 수 없는 경우에도 null을 반환하는 case가 더러 있음

심벌 타입 (Symbol)

이건 뭐냐?? 첨보는디
다른 값과 중복되지 않는 유일무이한 값이라는디
이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용된다
약간 몽고디비 ID 같은 느낌인가 봄

심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성한다.
이때 생성된 값은 외부에 노출되지 않으며 ?!?!? 다른값과 절대 중복되지 않는 유일무이한 값이다.

var key = Symbol('key');
console.log(typeof key); // symbol

var obj = {};
obj[key] = 'value';
console.log(obj[key]); // value <- 편하긴 하겠다

데이터 타입의 필요성

당연 필요하고 또 중요하다

값은 메모리에 저장하고 참조할 수 있어야함
이를 위해선 먼저 해당 데이터 타입에 따라 메모리 공간을 확보해야함
이 과정에서 낭비와 손실 없이 값을 저장할 수 있는지 알아야 최적화가 가능함

추가로 참조를 타고 들어가 값을 읽을때도 데이터 타입은 필요하다
해당 값이 문자열인지, 숫자인지 알아야 A를 표시할지, 65를 보여줄지 알 수 있기 때문임
정리하자면

• 값을 저장할 때 확보해야하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
• 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해
  데이터 타입은 필연적으로 선언되어야 한다

동적 타이핑

동적 타입 언어와 정적 타입 언어

C, Java와 같은 정적 타입(static type) 언어는 선언 시점에 데이터 타입을 명시해줘야함
그리고 그 타입은 변경할 수 없는것이 국룰
이와같이 동작하는 이유는 컴파일 시점에 타입 체크를 수행하기 때문임

하지만 자바 스크립트는 컴파일 시점에서 타입을 지정하지 않음.
인스턴스가 생성될때도 초기화, 값 할당 두단계로 나뉨
이는 즉 런타임에서 타입이 결정된다는 얘기

var foo;
console.log(typeof foo); // undefined

foo = 3;
console.log(typeof foo); // number

foo = 'Hello';
console.log(typeof foo); // string

foo = true;
console.log(typeof foo); // boolean

foo = null;
console.log(typeof foo); // object (null의 typeof는 object — JS 초기 버그)

foo = Symbol();
console.log(typeof foo); // symbol

foo = {};
console.log(typeof foo); // object

foo = [];
console.log(typeof foo); // object

foo = function () {};
console.log(typeof foo); // function

위 사례를 보면 알 수 있듯이 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정된다 (타입 결정)
그리고 재 할당또한 가능해 변수의 타입은 언제든지 동적으로 변할 수 있다.
이러한 특징을 동적 타이핑이라 하며 정적 타입 언어와 구별하기 위해 동적 타입 언어라고 한다

동적 타입 언어는 편리하지만 주의할 점도 있음

• 변수 값이 언제든 변할 수 있어서 값을 확인하기 전에는 타입을 확신할 수 없다
• 개발자의 의도와 상관없이 타입이 자동 변환되어 오류가 발생할 수 있다
• 유연성은 높지만 신뢰성은 떨어진다

그래서 변수 사용 시 지켜야 할 것들:

• 변수는 꼭 필요한 경우에 한해 제한적으로 사용
• 변수의 스코프는 최대한 좁게
• 전역 변수는 최대한 사용하지 않기
• 변수보다는 상수(const)를 사용해 값의 변경을 억제
• 변수명은 목적이나 의미를 파악할 수 있도록 네이밍

핵심 포인트

• 자바스크립트는 7개의 원시 타입(number, string, boolean, undefined, null, symbol, bigint)과 객체 타입을 가진다
• 숫자는 모두 실수(배정밀도 64비트 부동소수점)로 처리되고, 문자열은 원시 타입이면서 메서드 호출 시 임시 래퍼 객체로 감싸진다
• 데이터 타입은 메모리 확보/참조/해석을 위해 필요하며, 자바스크립트는 할당 시점에 타입이 결정되는 동적 타입 언어다

참고 자료

• 모던 자바스크립트 Deep Dive (이웅모 저) 6장
• [[Expression and Statement]]
• [[변수]]