챕터 1 타입
Type = 자바스크립트 엔진, 개발자가 모두에게 어떤 값을 다른 값과 구별할 수 있는, 고유한 내부 특성의 집합
1.1 타입의 실체를 이해하자
타입별 내재된 특성을 알고 있어야 값을 다른 타입으로 변활하는 방법을 정확히 이해가능하다.
어떤 형태로든 강제변환(coercion)이 이러나므로 인지하고 사용하는 것이 중요하다.
1.2 내장타입
◽null
◽undefined
◽boolean
◽number
◽string
◽object🔰
◽symbol
object를 제외한 나머지 타입은 "원시타입" 이다.
typeof 연산자를 이용해 반환값의 타입을 알 수 있다.
ex ◽typeof undefined === "undefined" // true
◽typeof true === "boolean" // true
하지만, null의 타입은 버그와 같아서 객체로 나오지만 falsy(false나 다름없는)한 유일한 원시값인 특별한 존재이다
또한 function의 타입은 function이고 object의 하위 타입이다.
함수는 프로퍼티를 줄 수 있다. function a (b, c){ ... } a.length // 2
❗주의❗
❗주의❗
익명의 즉시 실행 함수 표현식으로 선언된 함수는 typeof로 타입을 불러올 시 "undefined"가 반환된다.
결과는 기명함수와 같지만, 한번 사용하면 다시 사용할 일이 없기에 사라진다.
또한 배열은 숫자 인덱스를 갖으며, length 프로퍼티가 자동으로 관리되는 등의 추자 특징을 갖는 객체 하위 타입이며
"object"가 타입으로 반환된다.
1.3 값은 타입을 갖는다.
변수에는 타입은 없지만, 변수에 할당된 값은 값에 내제된 특성을 정의하는 타입이 있다.
JS에서 타입 강제를 하지 않기에 변수값이 처음 할당된 값과 다른 타입으로 할당 가능하다.
typeof를 변수에 사용하는 것은 "변수에 할당된 값의 타입을 묻는 것"이다. 또한 typeof 연산자의 반환값은 문자열 이다
1.3.1 값이 없는 VS 선언되지 않은
undefined(값이 없는) : 접근 가능한 스코프에 변수가 선언되었으나 아무런 값이 할당안된 상태
undeclared(선언되지 않은) : 접근 가능한 스코프에 변수 자체가 선언되지 않은 상태
브라우저 에러 메시지 is not defined는 undeclared, is not declared(실제론 없지만 이해를 위한 것)라 생각하면 편함
typeof를 이용하면 선언 되지 않은 변수 a를 typeof a 로 오류를 피할 수 있는 안전 가드가 됨.
1.3.2 선언되지 않은 변수
typeof의 안전가드를 이용하여 브라우저에 JS코드 처리시 에러를 피한다.
특히, 여러 스크립트 파일의 변수들이 전역 네임 스페이스를 공유할 때 유용함
네임 스페이스
네임 스페이스 패턴 : 구분이 가능하도록 정해놓은 범위나 영역을 뜻함
네임 스페이싱 : 객체나 변수의 이름이 겹치지 않는 안전한 코드를 만드는 개념
➖객체 리터럴 네임 스페이싱 : 하나의 전역 객체를 만든 후 모든 함수, 객체, 변수를 추가(전역 선언시 추가해도 됨)
네임 스페이싱 객체에서 this 사용에 조심해야 한다. 전역변수에 ㄱ밧을 대입하면 부모가 아닌 전역참고를 해서 에러발생.
➖범용 네임 스페이스 함수 : 프로그램이 복잡해지며, 코드의 각 부분들이 별개로 분리되어 선택적으로 문서에 포함되는 경우가 많은데, 이때 네임스페이스로 재정의 하여 내용을 덮어쓰는 문제가 발생
➡ 조건식 or 논리 연산자를 이용해 미리 선언되어 있는지 확인후 선언하자.
typeof를 이용하여 변수의 선언 여부 체크
if ( typeof atob === "undefined"){
atob = function () { ... };
};
임의로 정의한 변수를 쓰지 않더라도 체크하는게 좋으며, 내장 API기능 체크시 에러가 발생하지 않게 도와줌
또한, 존재하지 않은 기능 추가를 위해 폴리필을 정의하려면 함수내부 atob선언시 const, let, var 같은 키워드 사용X
( 사용하게 되면, 최상위로 호이스팅되어 중복 선언되어 에러발생된다 )
폴리필
폴리필 : 브라우저가 지원하지 않는 JS코드를 지원 가능하도록 변환한 코드
typeof 없이 체크하는 방법은 전역변수가 모두 전역객체(window)의 프로퍼티라는 점이다.
어떤 객체 (window포함)의 프로퍼티에 접근시 그 프로퍼티가 존재하지 않더라도 ReferenceError가 없다.
하지만~~~~ 가급적이면 안하는것이 좋다. 특히 다중 JS 환경(NODE.js)에서는 추천을 못하겠다.
즉, typeof 안전가드는 전역변수를 사용하지 않을때 유용하다.
🔷종합 정리🔷
1️⃣7가지 타입(null, undefined, Boolean, Number, String, Object(Array포함), Symbol)
2️⃣typeof 연산자를 이용해 타입명을 알안낸다.
3️⃣변수는 타입이 없지만, 변수에 할당된 값은 타입을 갖는다.
4️⃣undefined는 값이, undeclared는 정의가 안된 것이다.
5️⃣typeof 안전 가드를 선언되지 않은 변수에 사용하면 제법 쓸만함
'JavaScript > You Don't know JS' 카테고리의 다른 글
I don't know JS YET 특수값(값이 아닌 값, undefined, 특수 숫자, 특이한 동등비교, 값과 레퍼런스) (0) | 2022.03.29 |
---|---|
I don't know JS YET 값( 배열, 문자열, 숫자 ) (0) | 2022.03.25 |
JS 코딩의 기술) 24일차 빌드 도구를 이용한 컴포넌트 결합 (0) | 2022.03.16 |
JS 코딩의 기술) 23일차 컴포넌트 아키텍처를 이용해 애플리케이션 만들기 (0) | 2022.03.16 |
JS 코딩의 기술) 22일차 npm을 이용해 외부 코드 가져오기 (0) | 2022.03.16 |