배열, 객체, NaN 구분: Array.isArray, constructor property, isNaN

Minjae Kwon·2020년 10월 28일
1
post-thumbnail
post-custom-banner

🙋🏻‍♀️ 배열은 어떻게 구분할까?

배열을 구분해내는 메소드 Array.isArray 를 사용한다. 괄호 안에 들어간 변수가 배열인지 판별해서 boolean 값을 반환해 준다. (배열과 객체는 typeof 연산자로 판별할 수 없다.)

const colors = ["pink", "orange", "apricot"]; 
const warmColor = { name: "pink" }; 

typeof colors // "object"
typeof warmColor // "object"

Array.isArray(colors) // "true"
Array.isArray(warmColor) // "false"

🙋🏻‍♀️ 객체는 어떻게 구분할까?

어떤 값이 객체인지 알고싶다면, Object.prototype.constructor 속성을 이용한다. 확인하고 싶은 값의 .constructor 가 Object 인지 boolean 값으로 확인해보면 된다.

let obj = {}
obj.constructor === Object // "true"

let obj = new Object
obj.constructor === Object // "true"

// 논리연산자로 엮어서 아래와 같이 검사해볼 수 있다.
if(typeof obj === "object" && obj.constructor === Object) 

Object.prototype.constructor 는 모든 객체가 가지는 속성이다. (Object.create(null) 로 생성된 객체는 제외) 이 속성은 객체의 Fundamental Object constructor type 을 보여주게 된다. 배열도 검사할 수 있고, null 과 undefined 를 제외한 원시자료형들도 Primitive wrapper objects 를 가지기 때문에 숫자나 Boolean도 검사할 수 있다. 👉🏼 MDN 참고자료
let arr = []
arr.constructor === Array // "true"

let arr = new Array
arr.constructor === Array // "true"

let isTrue = true
isTrue.constructor === Boolean // "true"

let num = 3
num.constructor === Number // "true"

🙋🏻‍♀️ NaN 은 어떻게 구분할까?

NaN 이 헷갈릴 수 있는 이유는, boolean 명제로 NaN끼리 비교했을 때 거짓이라고 하기때문이다. 이 때는 isNaN 함수 또는 Number.isNaN 메소드를 사용할 수 있다. Number.isNaN 이 조금 더 빡빡한 검사다.

// NaN을 검사하는 별도의 함수나 메소드가 필요한 이유: NaN은 boolean으로 검사할 수 없다. 
NaN === NaN // "false"

// isNaN(), Number.isNaN()
const highFive = "hi5"; 

isNaN(highFive); // "true" 
Number.isNaN(highFive); // "false" 
  • isNaN 은 변수가 NaN 이면 무조건 true 값을 리턴한다.
  • Number.isNaN 은 변수의 데이터 타입이 숫자이고 && NaN 일 경우에만 true 값을 리턴한다.

🙋🏻‍♀️ null 값은 어떻게 검사할까?

심플하게, boolean 값으로 검사한다.

function isNull(x) {
	if(x === null) {
		return "I am null!"
	}
}

typeof null === "object" // typeof 로는 검사할 수 없다. 
profile
Front-end Developer. 자바스크립트 파헤치기에 주력하고 있습니다 🌴
post-custom-banner

0개의 댓글