값 할당 !== 선언 #타입

 

0. 개요

YOU DON'T KNOW JS의 주요 내용을 정리한다. 프로젝트 진행 중 막히는 개념이 있으면 챕터 별로 찾아서 읽는 것을 목적으로 한다. 예시 코드들은 ES6 기반으로 테스트하며 학습하며 정리 내용은 블로그에 에러노트와 함께 포스팅하며 복기한다.

 

 

 

220215_localStorage, 상태관리 목적으로 this 접근이 어려워서 this / 타입 / 스코프 부분을 공부했다.

 

PART 1. 타입과 문법

---

1. 타입

1.2. 내장 타입

자바스크립트의 7가지 내장 타입

• null → 얘네도 타입이다!
• undefined → 얘네도 타입이다!
• boolean
• number
• object → 유일한 참조타입. 나머지는 원시(primitives) 타입
• symbol (ES6 new!)

 

 

typeof 연산자로 확인한 값은 7가지 내장 타입과 정확히 매치되지 않는다.

 

 

typeof null === “object” // true

var a = null; // 타입으로 null 값을 정확히 확인하려면 조건이 하나 더 필요하다.
(!a && typeof a === “object”); // true

typeof function a() {} === “function” // true

function a(b,c) {}
a.length // 2

 

 

 

1.3. 값은 타입을 가진다

값에는 타입이 있지만, 변수엔 따로 타입이 없다.

 

 

 

1.3.1. 값이 없는 vs 선언되지 않은

“undefined” vs “undeclared”

• “undefined” : 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당되지 않은 상태
• “undeclared” : 접근 가능한 스코프에 변수 자체가 선언조차 되지 않은 상태

 

이 둘은 엄연히 다르지만 선언되지 않은 변수도 typeof하면 “undefined”로 나온다. 선언조차 하지 않은 변수인데 브라우저는 오류 처리를 하지 않는다. (typeof 만의 독특한 안전가드 - safty guard)

 

 

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

 

 

선언되지 않은 변수를 “undeclared” 정도로 했다면 쓸데없이 헷갈리지 않았을텐데, 이 와중에도 typeof의 안전가드는 여러 스크립트 파일의 변수들이 전역 네임스페이스를 공유할 때 의외로 쓸모가 있다.

import / export 키워드로 외부 모듈의 함수 / 변수를 접근할 때, 여러 애플리케이션 코드에서 ReferenceError가 나지 않도록 조건에 그대로 변수명을 접근할 게 아니라 typeof 안전가드를 사용하는 것이다. (선언되지 않은 변수를 걸러내는 조건 용도로 사용하기 엄청 유용!)

 

 

// Reference Error
if (DEBUG) {
	console.log("디버깅을 시작합니다.");
}

// 안전하게 존재 여부 체크!
if (typeof DEBUG !== "undefined") {
	console.log("디버깅을 시작합니다.");
}

if (typeof atob === "undefined") {
	atob = function() {};
}

 

 

또는 전역 객체(브라우저는 window)의 프로퍼티라는 점을 이용해 window.DEBUG / !window.DEBUG 조건을 통해서도 구분할 수 있다. 어떤 객체의 프로퍼티를 접근할 때 그 프로퍼티가 존재하지 않아도 ReferenceErrorr가 나지는 않는다. 하지만 node.js와 같은 다중 자바스크립트 환경에선 전역 변수를 window 객체로만 호출하지 않기 때문에 가급적 사용을 삼가하자.

 

 

Ref

---

[도서] 카일 심슨, ⌜YOU DON'T KNOW JS - 타입과 문법, 스코프와 클로저⌟, 한빛미디어, 2017