타입 체크

타입 체크

typeof

null 을 제외한 원시 타입을 체크하는 것은 가능하지만 객체의 종류를 구분할 수 없다.

typeof ''; // stringtypeof 1; // numbertypeof NaN; // numbertypeof true; // booleantypeof []; // objecttypeof {}; // objecttypeof new String(); // objecttypeof new Date(); // objecttypeof /test/gi; // objecttypeof function () {}; // functiontypeof undefined; // undefinedtypeof null; // object (설계적 결함)typeof undeclared; // undefined (설계적 결함)

Object.prototype.toString

Object.prototype.toString 메소드는 객체를 나타내는 문자열을 반환한다.

☝️ Number.prototype.toString, Array.prototype.toString, String.prototype.toString 은 각각 숫자, 배열, 스트링 객체를 문자열로 바꿔주는메소드로 Object.prototype.toString과 다르다.

var obj = new Object();obj.toString(); // [object Object]

console.log(Object.prototype.toString.call('')); // [object String]console.log(Object.prototype.toString.call(new String())); // [object String]console.log(Object.prototype.toString.call(1)); // [object Number]console.log(Object.prototype.toString.call(new Number())); // [object Number]console.log(Object.prototype.toString.call(NaN)); // [object Number]console.log(Object.prototype.toString.call(Infinity)); // [object Number]console.log(Object.prototype.toString.call(true)); // [object Boolean]console.log(Object.prototype.toString.call(undefined)); // [object Undefined]console.log(Object.prototype.toString.call()); // [object Undefined]console.log(Object.prototype.toString.call(null)); // [object Null]console.log(Object.prototype.toString.call([])); // [object Array]console.log(Object.prototype.toString.call({})); // [object Object]console.log(Object.prototype.toString.call(new Date())); // [object Date]console.log(Object.prototype.toString.call(Math)); // [object Math]console.log(Object.prototype.toString.call(/test/i)); // [object RegExp]console.log(Object.prototype.toString.call(function () {})); // [object Function]console.log(Object.prototype.toString.call(document)); // [object HTMLDocument]
function argumentsTest() {    console.log(Object.prototype.toString.call(arguments)); // [object Arguments]}argumentsTest();
console.log(Object.prototype.toString.call(undeclared)); // ReferenceError

이를 활용한 타입 반환 함수 getType

function getType(target) {    return Object.prototype.toString.call(target).slice(8, -1);}

console.log(getType('')); // Stringconsole.log(getType(1)); // Numberconsole.log(getType(true)); // Booleanconsole.log(getType(undefined)); // Undefinedconsole.log(getType(null)); // Nullconsole.log(getType({})); // Objectconsole.log(getType([])); // Arrayconsole.log(getType(/test/i)); // RegExpconsole.log(getType(Math)); // Mathconsole.log(getType(new Date())); // Dateconsole.log(getType(function () {})); // Function

타입별로 체크하는 함수

function getType(target) {    return Object.prototype.toString.call(target).slice(8, -1);}
function isString(target) {    return getType(target) === 'String';}
function isNumber(target) {    return getType(target) === 'Number';}
function isBoolean(target) {    return getType(target) === 'Boolean';}
function isNull(target) {    return getType(target) === 'Null';}
function isUndefined(target) {    return getType(target) === 'Undefined';}
function isObject(target) {    return getType(target) === 'Object';}
function isArray(target) {    return getType(target) === 'Array';}
function isDate(target) {    return getType(target) === 'Date';}
function isRegExp(target) {    return getType(target) === 'RegExp';}
function isFunction(target) {    return getType(target) === 'Function';}

instanceof

Object.prototype.toString을 사용하여 객체의 종류까지 식별할 수 있지만 객체의 상속 관계는 체크할 수 없다.

instanceof 연산자는 피연산자인 객체가 우항에 명시한 타입의 인스턴스인지 여부를알려준다.

function Person() {}const person = new Person();
console.log(person instanceof Person); // trueconsole.log(person instanceof Object); // true

function isElement(target) {    return !!(target && target instanceof HTMLElement);    // 또는 `nodeType`을 사용할 수도 있다.    // return !!(target && target.nodeType === 1);}

배열 vs 유사 배열

배열인지 체크할 때는 Array.isArray 메소드를 사용하면 된다.

console.log(Array.isArray([])); // trueconsole.log(Array.isArray({})); // falseconsole.log(Array.isArray('123')); // false

유사 배열 객체는 length 프로퍼티를 갖고, length 프로퍼티의 최대 값은 2의 53제곱 - 1 이다. 또한 빈문자열 역시 유사 배열이다.

const isArrayLike = function (collection) {    const MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;    const length = collection == null ? undefined : collection.length;    return typeof length === 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;};
// trueconsole.log(isArrayLike([]));console.log(isArrayLike('abc'));console.log(isArrayLike(''));console.log(isArrayLike(document.querySelectorAll('li')));console.log(isArrayLike(document.getElementsByName('li')));console.log(isArrayLike({length: 0}));(function () {    console.log(isArrayLike(arguments));})();
// falseconsole.log(isArrayLike(123));console.log(isArrayLike(document.querySelector('li')));console.log(isArrayLike({foo: 1}));console.log(isArrayLike());console.log(isArrayLike(null));