Skip to main content

ํƒ€์ž… ์ฒดํฌ

ํƒ€์ž… ์ฒดํฌ#

typeof#

null ์„ ์ œ์™ธํ•œ ์›์‹œ ํƒ€์ž…์„ ์ฒดํฌํ•˜๋Š” ๊ฒƒ์€ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ๊ฐ์ฒด์˜ ์ข…๋ฅ˜๋ฅผ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์—†๋‹ค.

typeof ""; // string
typeof 1; // number
typeof NaN; // number
typeof true; // boolean
typeof []; // object
typeof {}; // object
typeof new String(); // object
typeof new Date(); // object
typeof /test/gi; // object
typeof function () {}; // function
typeof undefined; // undefined
typeof 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("")); // String
console.log(getType(1)); // Number
console.log(getType(true)); // Boolean
console.log(getType(undefined)); // Undefined
console.log(getType(null)); // Null
console.log(getType({})); // Object
console.log(getType([])); // Array
console.log(getType(/test/i)); // RegExp
console.log(getType(Math)); // Math
console.log(getType(new Date())); // Date
console.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); // true
console.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([])); // true
console.log(Array.isArray({})); // false
console.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;
};
// true
console.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));
})();
// false
console.log(isArrayLike(123));
console.log(isArrayLike(document.querySelector("li")));
console.log(isArrayLike({ foo: 1 }));
console.log(isArrayLike());
console.log(isArrayLike(null));

Last updated on by WooodHead