[You don't know JS] Chap1 ~ 1-3. 값은 타입을 가진다.

 Chap 1. 3값은 타입을 가진다

3. 값은 타입을 가진다

- 자바스크립트에서는 값에는 타입이 있지만, 변수에는 별도의 타입이 존재하지 않아.
- 변수는 언제라도 어떤 형태의 값이라도 가질 수 있어. 또한, 자바스크립트는 타입 강제(Type Enforcement)를 하지 않아.
- 변수에 처음 할당된 값과 동일한 타입일 필요없어. 예를 들어, 문자열을 넣었다가 나중에 숫자를 넣어도 상관없어.

 

-숫자 42는 내장된 숫자 타입의 값이야. 이 타입은 변경할 수 없어.
- 반면, "42"는 문자열 타입의 값이지만, 강제 변환을 통해 숫자 42로 생성될 수 있어.
- 변수에 typeof 연산자를 사용하는 건 "이 변수의 타입은 무엇이니?"라는 질문과 같지만,
- 실제로 변수에 타입이 존재하지 않으닌까 "이 변수에 들어있는 값의 타입은 뭐야?" 라고 묻는 거야.

<예시>

var a = 42;
typeof a;  // "number"

a = true;
typeof a;  // "boolean

 

typeof 연산자의 반환값은 언제나 문자열.

<예시>

typeof typeof 42; // “string”

그래서 typeof 42는 “number”를 반환하고, typeof “number”의 결괏값은 “string”이야.

 

3-1 값이 없는 vs 선언되지 않은

값이 없는 변수의 값은 undefined이고, typeof 결과는 "undefined"야.

var a;

typeof a;  // "undefined
var b = 42;
var c;

// 그러고 나서,
b = c;

typeof b; // "undefined
typeof c; // "undefined

 

"undefined"(값이 없는)와 "undeclared"(선택되지 않은)는 JavaScript에서 다른 개념이야.

- "undefined"는 접근 가능한 스코프에 변수가 선언되었지만 현재 값이 할당되지 않은 상태를 가리켜.
- "undeclared"는 접근 가능한 스코프에 변수 자체가 선언되지 않아 사용할 수 없는 상태를 의미해.

var a;
a;  // undefined
b;  // ReferenceError： b가 정의되지 않았습니다.

 

에러 메시지 "b is not defined"는 "b is undefined"와 의미가 달라
- "b is not defined"는 변수 "b"가 선언되지 않아 사용할 수 없는 상태를 나타내.
- "b is undefined"는 변수 "b"가 선언되었지만 현재 값이 할당되지 않아 "undefined"인 상태를 나타내.

즉, "undefined"와 "undeclared"는 다른 개념이고,
"is not defined"와 "is undefined"도 다른 의미를 가지고 있다는 걸 상기해.

자바스크립트에서 변수의 선언 상태와 값의 할당 여부를 명확히 이해하고 사용하는 게 중요해.

 

선언되지 않은(undeclared)변수의 typeof 연산 결과는 더 헷갈려.

var a;
typeof a; // "undefined"
typeof b; // "undefined"

 

typeof 연산자는 선언되지 않은 변수를 확인하면 "undefined"를 반환해.
b는 분명 선언조차 하지 않은 변수인데 typeof b를 해도 브라우저는 오류 처리를 하지 않아.
이건 typeof만의 독특한 안전 가드(safety guard)야.

- 자바스크립트의 typeof 연산자가 변수가 선언되어 있던 없던 간에 "undefined"를 반환하는 동작을
가지고 있기 때문이야.
- 자바스크립트의 동적 타입 언어(dynamic typing) 특성과 관련이 있어.

ㅇ 나 자신 왈:  변수가 선언되어 있던 없던 상관없이 동일한 결과를 반환하기 때문에 혼동이 있을 수 있겠다.

글쓴이 왈;
typeof로 선언되지 않은 변수를 undeclared 정도로 했다면,
진짜 “undefined인 변수와 쓸데없이 충돌할 일도 없었을거라 아쉬워.

 

3-2 선언되지 않은 변수

브라우저에서 자바스크립트 코드를 처리할 때,
특히 여러 스크립트 파일의 변수들이 전역 네임스페이스를 공유할 때, typeof의 안전 가드는 의외로 유용할 수 있어.

글쓴이 왈

일부 개발자들이 주장하는 자신의 코드의 모든 변수가 전역 네임스페이스에 없고 전용 또는 별도의 네임스페이스에만 존재한다는 주장은 이론적으로 그럴듯하지만, 실제로는 거의 불가능해.
ES6부터는모듈을 일급 개념으로 지원해. 모듈을 활용해서 전역 네임스페이스를 피하는 것이 현실적으로 가능할 것 같아. *

* ES6부터는 import/export 키워드로 와부 모듈의 함수/변수를 사용할 수 있어.

<글쓴이왈-예시>

[utility.js]
function sum(a, b)  {
return a + b；
)
function product(a, b)  {
return a * b;
)

export  { product, sum}


[app.js]
import{product, sum} from 'utility'；
console.log(product(1, 2))；  //2
console.log(sum(1, 2))；      //3

 

예를 들어, 프로그램의 디버그 모드를 제어하는 전역 변수(DEBUG)를 체크할 때, typeof 안전 가드를 사용하면 ReferenceError가 발생하지 않도록 할 수 있어. 그렇게 최상위 전역 스코프에만 var DEBUG = true라고 ‘debug.js’ 파일에만 변수를 선언하고, 개발/테스트 단계(운영 다계는 제외)에서 이 파일을 브라우저가 로딩하기만 하면 될 거야.

나머지 애플리케이션 코드에서도 참조오류(ReferenceError)를 방지하는데 도움이 되게, typeof 안전 가드를 사용해서 DEBUG 전역 변수의 존재 여부를 체크할 수 있어.

 

임의로 정의한 변수(DEBUG같은)를 안 써도 이런 식으로 체크하는 게 편리해. 내장 API 기능을 체크할 때도 에러가 나지 않게 도와줘.