[You don't know JS] Chapter1 - 타입

you don't know js 내용을 정리 해보자

Javascript 의 타입

javascript 도 타입이 있다. 단지, c++ 같은 언어와는 조금 다른 느낌 일뿐

ECMA 의 명세에 따르면 타입은

자바스크립트 엔진, 개발자 모두에게 어떤 값을 다른 값과 분별 할 수 있는, 고유한 내부 특성의 집합 이다.

즉, 10 과 "10" 은 사람이나 기계가 봤을 때, 각각 숫자와 문자열이라는 다른 타입으로 구분할 수 있다.
이렇게 구분할 수 있는 것들을 자바스크립트에서는 타입이라고 한다.

Javascript 의 내장 타입

총 7가지의 내장 타입이 존재 한다.

• null
• undefined
• boolean
• number
• string
• object
• symbol (es6 추가)

여기서 object 를 제외한 타입들은 primitives (원시 타입) 이라고 한다.

typeof

값 타입을 알 수 있는 연산자다.
타입을 string 으로 반환한다.

typeof undefined === "undefined"
typeof true === "true"
typeof { test :10 } === "object"
typeof Symbol() === "symbol"

위 코드를 실행해보면 모두 true 가 나온다.

typeof null

null 은 type 은 object 지만, falsy 한 유일한 원시 값이다.

typeof null === "object" // true!

책의 피셜로는 버그인데 이제와 손을 댈 수 없어 안 고친다고 한다...(세상에....)

그래서 null 값을 정확히 확인하기 위해서는 아래와 같이 하면 된다.

var a = null;
(!a && typeof a === "object"); // true

typeof function

function 의 타입은 "function" 이다.
명세에 따르면 function 은 object 의 하위 타입 이다.
구체적으로는 함수는 호출 가능한 객체 라고 명시되어 있다.

그러나 배열의 타입은 그냥 "object" 다.

typeof [1,2,3] === "object"

변수와 타입

자바스크립트에서 값은 타입을 가지지만, 변수는 가지지 않는다.
변수는 어떤 형태의 값이라도 가질 수 있다.

값이 없는 vs 선언 되지 않는

처음 js 를 접했을 때 많이 헷갈렸던 부분이다. 책에서 명확하게 얘기를 해줘서 이해가 갔다.
일단 "undefined" 와 "undeclared" 는 완전히 다르다.

• undefined
  • 접근 가능한 스코프에 변수가 선언은 되었으나 어떠한 값도 할당되지 않는 상태
  • 값이 없는 변수의 값은 undefined 이고, typeof 값은 "undefined" 이다.

• undeclared
  • 접근 가능한 스코프에 변수 조차 선언되지 않은 상태다.

다음 코드를 보면 좀더 이해가 명확히 간다.

var a;

a; // undefined . 선언은 되었으나 값은 할당하지 않았다. 
b; // Uncaught ReferenceError: b is not defined  선언조차 되지 않았다. 

typeof 의 안전 가드

위에 선언되지 않는 변수에 typeof 를 적용하면 "undefined" 가 나온다.
typeof 에서 Uncaught ReferenceError 가 나지 않도록, 선언되지 않는 변수도 "undefined"를 결과값으로 내도록 한것이다.
이것은 typeof 만의 안전 가드이다.

typeof b; //"undefined"

전역 변수의 선언여부 확인

typeof 의 안전가드 때문에 특정 변수가 선언되어 있는지 확인할 수 있다.

if(DEBUG) { // DEBUG 변수가 선언되지 않았다면 에러가 난다!

} 

if(typeof DEBUG !== 'undefined') { // 이렇게 하면 에러 없이 확인이 가능하다.

}

typeof 를 쓰지 않고 window 객체를 통해 확인하느 방법도 있다.
하지만 이 방법은 지양하길 권하고 있다.
전역 변수를 window 객체로만 호출하지 않는 다중 자바스크립트의 환경에서는 더더욱!