클린코드 자바스크립트 강의를 듣고 얻은 정보를 참고하여 기록한 내용입니다.
타입 검사하기
typeof
typeof 연산자는 피연산자의 평가 전 자료형을 나타내는
문자열을 반환합니다.
| Type | Result |
|---|---|
| Undefined | "undefined" |
| Null | "object" |
| Boolean | "boolean" |
| Number | "number" |
| BigInt | "bigint" |
| String | "string" |
| Symbol(ECMAScript 2015) | "symbol" |
| Function 객체 | "function" |
| 다른 모든 객체 | "object" |
typeof로 모든 타입을 확인할 수 없다.
object 타입인 다양한 객체들이 존재하고 그 타입인지function을 제외하고는 여부를 검사할 수 없다.
const a = new String("A");
class A {}
typeof a; // 'object'
typeof A; // 'function'instanceof
생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별합니다.
const arr = [];
const func = function() {
}
arr instanceof Array; // true
func instanceof Function; // true잘 동작하지만 객체의 프로토타입 체인 어딘가 존재하는지 판별한다는 말을 주의해야 한다.
즉 객체들의 최상위 객체인 Object 타입으로 모두 귀결될 수 있다는 것이다.
arr instanceOf Object; // true
func instanceof Object; // true
new Date() instanceof Object; // true타입 검사야 되긴 되지만 정확한 참조형 객체 타입 검사가 힘들다.
타입검사를 할 때는
타입이 동적이다보니 타입검사가 힘들다.
문서, 스오플을 뒤져가며 정밀하고 안전한 타입검사 방법을 늘 찾아보고 적용하자!
null?
typeof null === 'object';
!null // true
!!null // false
null + 4 // 5 : 숫자연산에서는 0으로 변환됨.자바스크립트를 처음 구현할 때, 자바스크립트 값은 타입 태그와 값으로 표시되었습니다. 객체의 타입 태그는 0이었습니다. null은 Null pointer(대부분의 플랫폼에서 0x00)로 표시되었습니다. 그 결과 null은 타입 태그로 0을 가지며, 따라서 typeof는 object를 반환합니다.
이래서 null ==== 'null'로 수정이 제안된적도 있는데 거절되었다고 한다.
null & undefined
undefined는 무언가를 만들어는 뒀는데 정의하지 않은 것이라면
null은 없다는 것을 명시적으로 표현하고 있다.
undefined가 휴지 걸개에 아무것도 없는 것이라면
null은 휴지 걸개에 휴지가 없는 휴지심만 있는 것이라는 밈도 있다고 한다.
null은 숫자 연산에서 0으로 사용될 수 있는 반면 undefined는 정말 아무것도 없는 것이라 숫자 연산이 불가능하다.
let a;
a + 123; // NaN너무 헷갈리는데 어떻게 하면 좋을까
팀 작업 시 컨벤션을 정하여 통일해서 사용하는 방법
형변환과 비교를 명시적으로 해라
// inputNumber: 입력받은 숫자 문자열 '0' 이라고 가정
function hello(inputNumber) {
return inputNumber == 1; // ??
}eqeq (==) 피하기
얻은 결과는 문자열이나 당연히 숫자로 생각되어서 수치적인 처리를 해야된다고 생각했을 때
위 코드 처럼 자바스크립트의 유연함을 활용한 의도적인 느슨한 비교 연산도 가능하다.
하지만 본인 외 다른 이가 보기에 혼란스럽고 신뢰하기 어려운 코드가 될 수 있다.
의도에 맞는 타입 변경자를 사용하거나 명시적으로 타입을 변경하여 엄격한 비교를 수행하자
명시적 형변환 지향하기
자바스크립트가 알아서 판단해서 무언가 형변환이 일어난다면 암묵적 형변환 이 일어났다고 볼 수 있다.
경우에 따라 복잡한 암묵적 형변환이 마구 동반될 경우 큰 혼란을 줄 수 있고 읽기도 힘들어진다.
isNaN의 문제
숫자인지 여부를 검사할 때 isNaN()을 사용하고는 한다.
정확하게 생각해보면 숫자여부가 아니라 Not A Number인가? 를 검사하는 함수라고 봐야한다.
하지만 NaN일 때만 true여야 하는데 숫자를 제외한 이상한 똥을 넣어도 true가 나온다.
isNaN("똥"); // true
isNaN(123 + "HELL"); // true
isNaN(NaN); // true따라서 우리가 NaN 여부를 검사하려고 이를 사용하는 것은 어떻게 보면 옳지 않을 수 있다.
ES2015에 나온 Number.isNaN을 사용하자
주어진 값이 NaN인지 판별합니다. 기존부터 존재한 전역 isNaN() 함수의 더 엄격한 버전입니다.
Number.isNaN("똥"); // false
Number.isNaN(123 + "HELL"); // false
Number.isNaN(NaN); // trueReference
