checking types in javascript - Lee-hyuna/33-js-concepts-kr GitHub Wiki

Javascript์—์„œ ํƒ€์ž… ์ฒดํฌ ํ•˜๊ธฐ

์›๋ฌธ: Checking Types in Javascript

Javascript ๋ณ€์ˆ˜๊ฐ€ ๋ฐฐ์—ด์ธ์ง€ ํ™•์ธํ•˜๋Š” ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉ๋ฒ•์ด ๋ฌด์—‡์ธ์ง€ ๊ถ๊ธˆํ•ด ํ•ด๋ณธ์ ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๊ตฌ๊ธ€ ๊ฒ€์ƒ‰์„ ํ•˜๋ฉด ํ›Œ๋ฅญํ•˜๊ณ  ๋‹ค์–‘ํ•œ ๋Œ€๋‹ต์„ ์–ป์„ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฌ๋‚˜, ๋ถˆํ–‰ํ•˜๊ฒŒ๋„ ์ •๋‹ต์€ ์—†๋‹ค. ์ด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์•ˆํƒ€๊นŒ์šด ์  ์ค‘ ํ•˜๋‚˜์ธ๋ฐ ๋‹ค์–‘ํ•˜๊ณ  ๋งŽ์€ ๊ตฌํ˜„๋“ค์ด ์žˆ์„ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์–ด๋–ป๊ฒŒ ํ™•์ธ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๋‹ค์–‘ํ•œ ์˜๊ฒฌ๋“ค๋„ ์žˆ๋‹ค.

์ด ํฌ์ŠคํŒ…์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋‹ค์–‘ํ•œ ํƒ€์ž… ์ฒดํฌ ๊ธฐ๋ฒ•๊ณผ ๊ฐ๊ฐ์˜ ์žฅ๋‹จ์ , ๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ๋“ค์ด ์กด์žฌํ•˜๋Š” ์ด์œ ์— ๋Œ€ํ•ด ์ข…ํ•ฉ์ ์œผ๋กœ ์„ค๋ช…ํ•˜๊ณ ์ž ํ•œ๋‹ค.

typeof ์—ฐ์‚ฐ์ž

์ฒซ์งธ๋กœ typeof ์—ฐ์‚ฐ์ž์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. ์ด ํŽธ๋ฆฌํ•œ ์—ฐ์‚ฌ์ž๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธํŠธ ๊ฐ’์˜ 'type'์„ ์ œ๊ณตํ•œ๋‹ค.

typeof 3 // "number"
typeof "abc" // "string"
typeof {} // "object"
typeof true // "boolean"
typeof undefined // "undefined"
typeof function(){} // "function"

์œ„์— ๊ฒฐ๊ณผ๋Š” ์›ํ•˜๋Š” ํƒ€์ž… ๊ฐ’์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋ฐ˜ํ™˜๋˜์—ˆ๋‹ค.

typeof [] // "object"

array์˜ ํƒ€์ž…์ด object๋ผ๊ณ  ๋ฐ˜ํ™˜๋˜์—ˆ๋‹ค. ๋ญ”๊ฐ€ ์ด์ƒํ•˜์ง€ ์•Š์€๊ฐ€?

typeof null // "object"

์ด์ œ ์ •๋ง ์ž˜๋ชป๋œ ๊ฒƒ ๊ฐ™์•„๋ณด์ธ๋‹ค.

typeof๋Š” ๋‚ ์งœ, RegExp, ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ์ฒด, DOM ์š”์†Œ ๋ฐ ๊ธฐํƒ€ ๊ฑฐ์˜ ๋ชจ๋“  ๊ฒƒ์— ๋Œ€ํ•ด object๋ฅผ ๋ฐ˜ํ™˜ํ•  ๊ฒƒ์ด๋‹ค. ๊ทธ๋ž˜์„œ typeof๋Š” ๋‹ค๋ฅธ ์ข…๋ฅ˜์˜ ์›์‹œ ๊ฐ’์„ ๊ตฌ๋ณ„ํ•˜๋Š” ๋ฐ ๊ฝค ๋Šฅํ•˜์ง€๋งŒ, ๋ฐฐ์—ด๊ณผ null์„ ํฌํ•จํ•˜๋Š” ๋‹ค๋ฅธ ์ข…๋ฅ˜์˜ ๊ฐ์ฒด๋“ค์„ ๊ตฌ๋ณ„ํ•˜๋Š” ๋ฐ ์žˆ์–ด์„œ๋Š” ์ „ํ˜€ ์“ธ๋ชจ๊ฐ€ ์—†๋‹ค.

instanceof ์—ฐ์‚ฐ์ž

instanceof ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด๊ฐ€ ํŠน์ • ํƒ€์ž…์˜ ์ธ์Šคํ„ด์Šค์ธ์ง€ ์—ฌ๋ถ€๋ฅผ ์•Œ๋ ค์ค€๋‹ค. ์—ฌ๊ธฐ์„œ ํƒ€์ž…์ด๋ž€ ์ƒ์„ฑ์ž๋ฅผ ์˜๋ฏธํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด

function Animal(){}
var a = new Animal()
a instanceof Animal // true

๋˜ํ•œ ๊ฐ์ฒด์˜ ์ƒ์„ฑ์ž ํŠน์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ์•„๋ž˜์˜ ๊ฒ€์‚ฌ๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.

a.constructor === Animal // true

๊ทธ๋Ÿฌ๋‚˜ ์ƒ์„ฑ์ž ์ ๊ฒ€์€ ๋‘ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค. ์ฒซ์งธ, prototype ์ฒด์ธ์„ ํ™•์ธํ•˜์ง€ ์•Š๋Š”๋‹ค.

function Cat(){}
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat
var felix = new Cat()
felix instanceof Cat // true
felix instanceof Animal // true
felix.constructor === Cat // true
felix.constructor === Animal // false

๋‘ ๋ฒˆ์งธ ๋ฌธ์ œ๋Š” ์งˆ์˜ ๊ฐ์ฒด๊ฐ€ null์ด๊ฑฐ๋‚˜ undefined์ธ ๊ฒฝ์šฐ ์‹ฌ๊ฐํ•œ ๋ฌธ์ œ๋ฅผ ๋ฐœ์ƒํ•œ๋‹ค.

felix = null
felix instanceof Animal // true
felix.constructor === Animal // throws TypeError

instanceof๋Š” ๋ชจ๋“  ๊ธฐ๋ณธ ํƒ€์ž…์—๋Š” ๋™์ž‘ํ•œ๋‹ค.

[1, 2, 3] instanceof Array // true
/abc/ instanceof RegExp // true
({}) instanceof Object // true
(function(){}) instanceof Function // true

๊ทธ๋Ÿผ ์•„๋ž˜๋Š” ๋™์ž‘ํ• ๊นŒ?

3 instanceof Number // false
true instanceof Boolean // false
'abc' instanceof String // false

์ด๊ฒŒ ์–ด์ฐŒ๋œ ์ผ์ผ๊นŒ? instanceof๋Š” ์›์‹œ ๊ฐ’์—๋Š” ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค. Javascript์˜ ์›์‹œ ํƒ€์ž…์€ string, number, boolean, null, undefined์ด๋‹ค. null๊ณผ undefined๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” instanceof๋Š” ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ๋งํ•ด์•ผํ•œ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ๋‹ค๋ฅธ ๊ฐ’๋“ค์€ ์–ด๋–ค ๊ฐ์ฒด์˜ ์ธ์Šคํ„ด์Šค๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

null instanceof Boolean // false
undefined instanceof Array // false

์ƒ์„ฑ์ž ์†์„ฑ(property)์„ ํ™•์ธํ•˜๋ฉด ์›์‹œ ํƒ€์ž… number, string ๊ทธ๋ฆฌ๊ณ  boolean์— ๋Œ€ํ•˜์—ฌ ๋™์ž‘ํ•œ๋‹ค.

(3).constructor === Number // true
true.constructor === Boolean // true
'abc'.constructor === String // true

์œ„์— ์˜ˆ์ œ๊ฐ€ ๋™์ž‘ํ•˜๋Š” ์ด์œ ๋Š” ์›์‹œ ๊ฐ’์˜ ์†์„ฑ์„ ์ฐธ์กฐํ•  ๋•Œ๋งˆ๋‹ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฐ์ฒด ๋ž˜ํผ๋กœ ์ž๋™์œผ๋กœ ๊ฐ’์„ ๊ฐ์‹ธ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

var wrapper = new Number(3)

๊ฐ์ฒด ๋ž˜ํผ๋กœ ๊ฐ์‹ธ๋Š” ๊ฒƒ์€ ๋‚ด๋ถ€์ ์œผ๋กœ ์ผ์–ด๋‚œ๋‹ค. ์œ„์˜ ๊ฒฝ์šฐ์—๋Š” Number ์ธ์Šคํ„ด์Šค๋ฅผ ๋ž˜ํผ๋กœ ์‚ฌ์šฉํ–ˆ์ง€๋งŒ, ์–ด๋Š ์›์‹œ ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š๋ƒ์— ๋”ฐ๋ผ Boolean์ด๋‚˜ String์ด ๋  ์ˆ˜๋„ ์žˆ๋‹ค. ์ด ์‹œ์ ์—์„œ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์„ ํ†ตํ•ด Number ํ”„๋กœํ† ํƒ€์ž…์˜ ์†์„ฑ์„ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋ช…์‹œ์ ์œผ๋กœ ๋ž˜ํผ๋กœ ๊ฐ์‹ธ๋ฉด instanceof ์—ฐ์‚ฐ์ž๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค.

new Number(3) instanceof Number // true
new Boolean(true) instanceof Boolean // true
new String('abc') instanceof String // true

ํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒ ํ•˜๋Š” ๊ฒƒ์€ ํ•ด๋‹น ์›์‹œ๊ฐ’์ด ์–ด๋–ค ํƒ€์ž…์˜ ๊ฐ’์ธ์ง€ ์•Œ๊ณ  ์žˆ์–ด์•ผํ•˜๊ธฐ ๋–„๋ฌธ์— ๋ฌด์˜๋ฏธํ•  ๊ฒƒ์ด๋‹ค.

instanceof์˜ cross-window ์ด์Šˆ

instanceof๋Š” ๋˜๋‹ค๋ฅธ ๋ฌธ์ œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์ด ๋ฐํ˜€์กŒ๋‹ค. ๋‹ค๋ฅธ window์—์„œ ์˜ค๋Š” ๊ฐ์ฒด๋ฅผ ํ…Œ์ŠคํŠธํ•˜๋ ค๊ณ  ํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธด๋‹ค. ์—ฌ๊ธฐ์„œ ๋‹ค๋ฅธ window๋Š” <iframe>, <frame> ๋˜๋Š” ํŒ์—… ์œˆ๋„์šฐ๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

var iframe = document.createElement('iframe')
document.body.appendChild(iframe)
var iWindow = iframe.contentWindow // get a reference to the window object of the iframe
iWindow.document.write('<script>var arr = [1, 2, 3]</script>') // create an array var in iframe's window
iWindow.arr // [1, 2, 3]
iWindow.arr instanceof Array // false

์œ„์˜ ์˜ˆ์ œ์—์„  iframe ์ปจํ…์ŠคํŠธ ์•ˆ์— arr ๋ณ€์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๊ทธ ์•ˆ์— ๋ฐฐ์—ด [1, 2, 3]์„ ํ• ๋‹นํ–ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ arr ๋ณ€์ˆ˜๊ฐ€ Array์˜ ์ธ์Šคํ„ด์Šค ์ธ์ง€ ํ™•์ธํ•˜์ž false๋ฐ˜ํ™˜ํ–ˆ๋‹ค. ์ด์œ ๊ฐ€ ๋ญ˜๊นŒ?

Array === iWindow.Array // false

iframe ๋ฐฐ์—ด์€ ์šฐ๋ฆฌ์˜ ๋ฐฐ์—ด๊ณผ ๊ฐ™์€ ๋ฐฐ์—ด์ด ์•„๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋ชจ๋“  ๋‚ด์žฅ ๊ฐ์ฒด์— ํ•ด๋œ๋‹ค. ๋ชจ๋‘ ๋‘ ๊ฐ€์ง€ ๋ฒ„์ „์ด ์กด์žฌํ•œ๋‹ค. ์ฆ‰, ํ‰ํ–‰์šฐ์ฃผ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ๋ณด๋ฉด๋œ๋‹ค.

์ด๊ฒƒ์€ iframe ๋‚ด์—์„œ ์ƒ์„ฑ๋œ ๋ฐฐ์—ด์ด iframe๋‚ด์˜ ๋ฐฐ์—ด ์ƒ์„ฑ์ž์˜ ์ธ์Šคํ„ด์Šค์ผ ๋ฟ์ด๋ผ๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.

iWindow.arr instanceof iWindow.Array // true

open() ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑ๋œ window์—๋„ ๋™์ผํ•œ ํ˜„์ƒ์ด ๋ฐœ์ƒํ•œ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ปค๋ฎค๋‹ˆํ‹ฐ ๋‚ด์—์„œ instanceof ์‚ฌ์šฉ์ด ๋‹ค์†Œ ์ œํ•œ๋˜๋Š”๊ฒƒ์€ ์ด cross-window ๋ฌธ์ œ ๋•Œ๋ฌธ์ด๋‹ค.

๋•ํƒ€์ดํ•‘

typeof๋‚˜ instanceof์˜ ์˜ˆ์ œ๋„ ๋งŒ์กฑ์Šค๋Ÿฝ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๋•ํƒ€์ดํ•‘์— ์˜์กดํ•œ๋‹ค. ๋•ํƒ€์ดํ•‘์€ ํ–‰๋™์„ ์ ๊ฒ€ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.

๋•ํƒ€์ดํ•‘: .๋งŒ์•ฝ ๊ทธ๊ฒƒ์ด ์˜ค๋ฆฌ์ฒ˜๋Ÿผ ๋ณด์ด๊ณ  ์˜ค๋ฆฌ์ฒ˜๋Ÿผ ์šด๋‹ค๋ฉด, ๊ทธ๊ฒƒ์€ ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ํ•œ ์˜ค๋ฆฌ๋‹ค.

๋•Œ๋ฌธ์— ๋•ํƒ€์ดํ•‘์„ ์‚ฌ์šฉํ•œ isArray๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์„ ๊ฒƒ์ด๋‹ค.

// source: http://forums.devshed.com/javascript-development-115/javascript-test-whether-a-variable-is-array-or-not-33051.html
function isArray(obj){
    return (typeof(obj.length)=="undefined") ?
        false:true;
}

 
๋˜๋Š” 
 
// source: http://www.hunlock.com/blogs/Ten_Javascript_Tools_Everyone_Should_Have
function isArray(testObject) {
    return testObject &&
	!(testObject.propertyIsEnumerable('length')) &&
	typeof testObject === 'object' &&
	typeof testObject.length === 'number';
}

jQuery์—์„œ ๊ฐ์ฒด๊ฐ€ ์œˆ๋„์šฐ์ธ์ง€ ํ™•์ธํ•˜๋Š” ํ•จ์ˆ˜๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

isWindow: function( obj ) {
    return obj && typeof obj === "object" && "setInterval" in obj;
}

isWindow ํ•จ์ˆ˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋„๋ก ์†์ผ ์ˆ˜ ์žˆ๋‹ค.

$.isWindow({setInterval: 'bah!'}) // true

๋•ํƒ€์ดํ•‘์˜ ๋ฌธ์ œ์ ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  1. ๋ถ€์ •ํ™•ํ•˜๋‹ค.
  2. ํ…Œ์ŠคํŠธ ๋Œ€์ƒ์˜ property ์ง‘ํ•ฉ์€ ์ž„์˜์ ์ด๋ฏ€๋กœ, ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ๋•ํƒ€์ดํ•‘์„ ์ˆ˜ํ–‰ํ•˜๋Š” ํ•ด๋‹น ๋ฐฉ๋ฒ•์— ๋™์˜ํ•  ๊ฐ€๋Šฅ์„ฑ์€ ๊ฑฐ์˜ ์—†๋‹ค.

๊ทธ๋ ‡๊ธฐ๋•Œ๋ฌธ์—, ๋•ํƒ€์ดํ•‘์„ ๋ณ„๋กœ ์ข‹์•„ํ•˜์ง€ ์•Š๋Š”๋‹ค.

Object.prototype.toString ๋ฉ”์„œ๋“œ

Object.prototype.toString ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ์ฒด์˜ ํƒ€์ž…์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

Object.prototype.toString.call(3) // "[object Number]"
Object.prototype.toString.call([1, 2, 3]) // "[object Array]"
Object.prototype.toString.call({}) // "[object Object]"

์ด ๋ฉ”์„œ๋“œ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ์ž˜ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค. ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์— ์žˆ๋Š” Array.prototype.toString, Number.prototype.toString ๋“ฑ์˜ ๋˜ ๋‹ค๋ฅธ toString๋ฉ”์„œ๋“œ๊ฐ€ ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ํƒ€์ž…์„ ํ™•์‹คํžˆ ๊ตฌ๋ถ„ํ•˜์ง€๋งŒ ์‚ฌ์šฉ์ž ์ •์˜ ํƒ€์ž…์—์„  ๋ชจ๋‘ "[object Object]"๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

Object.prototype.toString.call(new Animal) // "[object Object]"

๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฑด ๋‹ค๋ฅธ window ์ปจํ…์ŠคํŠธ์—์„œ๋„ ๋™์ž‘ํ•œ๋‹ค.

Object.prototype.toString.call(iWindow.arr) === "[object Array]" // true

IE์˜ ๋‹ค๋ฅธ window(popup ๊ฐ™์€)๋Š” ์˜ˆ์™ธ๋กœ ํ•œ๋‹ค.

var pWindow = open("")
pWindow.document.write('<script>var arr = [1, 2, 3]</script>')
Object.prototype.toString.call(pWindow.arr) // IEd์—์„  "[object Object]" ๋ฐ˜ํ™˜ํ•œ๋‹ค. ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋Š” "[object Array]"๋ฅผ ๋ฐ˜ํ™˜

์ด๊ฒƒ์€ ์ด์ƒํ•˜๋‹ค. ์™œ๋ƒํ•˜๋ฉด iframe์—์„œ๋Š” ์ •์ƒ์ ์œผ๋กœ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด ๋ฐฉ๋ฒ•์€ IE ๋ฒ„๊ทธ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋„ค์ดํ‹ฐ๋ธŒ ํƒ€์ž…์„ ๊ตฌ๋ณ„ํ•˜๊ธฐ ์œ„ํ•ด ์„ ํ˜ธ๋˜๋Š” ๋ฐฉ๋ฒ•์ด ๋˜์—ˆ๋‹ค. (์–ด์ฐจํ”ผ ์•„๋ฌด๋„ ํŒ์—… ์ฐฝ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋‹ˆ..)

Function.prototype.toString ๋ฉ”์„œ๋“œ

ํƒ€์ž… ์ •๋ณด๋ฅผ ํ™•์ธํ•˜๋Š” ๋˜๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์€ Function.prototype.toString๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

Function.prototype.toString.call((3).constructor)
// "function Number() {
//    [native code]
// }"

์ด ๋ฉ”์„œ๋“œ๋Š” ํ•จ์ˆ˜์˜ ์™„์ „ํ•œ source๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ๋„ค์ดํ‹ฐ๋ธŒ ํ•จ์ˆ˜์˜ ๊ฒฝ์šฐ, ๋‚ด๋ถ€์— "[native code]"๋ผ๊ณ  ๋˜์–ด์žˆ๋‹ค. ์•„๋ž˜์˜ ๋„์šฐ๋ฏธ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ•จ์ˆ˜์˜ ์ด๋ฆ„์„ ํŒŒ์‹ฑํ•˜์—ฌ ๊ฐ์ฒด์˜ ํƒ€์ž…์„ ์•Œ์•„๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

function type(obj){
	var text = Function.prototype.toString.call(obj.constructor)
	return text.match(/function (.*)\(/)[1]
}
type("abc") // "String"

์ด ๋„์šฐ๋ฏธ ํ•จ์ˆ˜(type)๋Š” ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ์ฒด์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

type(new Animal) // "Animal"

์ด ์ฝ”๋“œ๋Š” instanceof์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ IE์˜ ํŒ์—… ์œˆ๋„์šฐ์— ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด Function.prototype.toString์„ ๋‹ค๋ฅธ ํ‰ํ–‰์šฐ์ฃผ์—์„œ ์˜จ ์ƒ์„ฑ์ž์™€ ํ•จ๊ป˜ ๋ถ€๋ฅด๋ฉด,์ƒ์„ฑ์ž๋Š” ๊ฐ์ฒด(["object Object]")๋กœ ์ธ์‹ํ•˜๊ธฐ ๋–„๋ฌธ์— ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๊ฑฐ๋ถ€ํ•˜๊ณ  "Function expected" ์—๋Ÿฌ๋ฅผ ๋‚ด๋ฑ‰๋Š”๋‹ค. ์ด ๋ฌธ์ œ๋Š” toString ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ„์ ‘์ ์œผ๋กœ ์ฐธ์กฐํ•จ์œผ๋กœ์จ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

function type(obj){
	var text = obj.constructor.toString()
	return text.match(/function (.*)\(/)[1]

์ด์ œ, ์œ„์˜ ํ•จ์ˆ˜๋Š” IE์˜ ํŒ์—… ์œˆ๋„์šฐ์—๋„ ์ ์šฉ๋œ๋‹ค! ํ•˜์ง€๋งŒ ์ด ์ˆ˜์ •์€ ๋‹ค๋ฅธ ๋ฌธ์ œ์ ์„ ์•ผ๊ธฐํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

Array.toString = function(){ return "function NotArray(){ }" }
type([1,2,3]) // "NotArray"

๊ทธ๋Ÿผ์—๋„ ๊ฝค ๊ดœ์ฐฎ์•„ ๋ณด์ธ๋‹ค. ์ด์ œ ์‚ฌ์šฉ์ž ์ •์˜ ํƒ€์ž…์œผ๋กœ ์ž ์‹œ ๋Œ์•„๊ฐ€๋ณด์ž. ์ด ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ๋™์ผํ•œ ์ด๋ฆ„์˜ ๋‘ ๊ฐ€์ง€ ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž ์ •์˜ ํƒ€์ž…์„ ๊ตฌ๋ณ„ํ•  ์ˆ˜ ์—†๋‹ค.

var f = function Animal(){ "something" }
 
var g = function Animal(){ "something entirely different" }
type(new f) // "Animal"
type(new g) // "Animal"

์ด๋Ÿฌํ•œ ์ด์œ ๋กœ ์ด ๋ฐฉ๋ฒ•์€ ์‚ฌ์šฉ์ž ์ •์˜ ํƒ€์ž…์— ํ•œํ•˜์—ฌ instanceof๋ณด๋‹ค ๋ชปํ•˜๋‹ค. ์ด ์ ‘๊ทผ๋ฐฉ์‹์˜ ๋˜ ๋‹ค๋ฅธ ๋ถ„๋ช…ํ•œ ๋ฌธ์ œ๋Š” ์„ฑ๋Šฅ์ด๋‹ค.

DOM ์š”์†Œ ๋ฐ ํ˜ธ์ŠคํŠธ ๊ฐœ์ฒด

์ง€๊ธˆ๊นŒ์ง€ DOM ์š”์†Œ์™€ ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด์— ๋Œ€ํ•œ ํƒ€์ž… ์ ๊ฒ€์— ๋Œ€ํ•ด ์–ธ๊ธ‰ํ•˜์ง€ ์•Š์•˜๋‹ค. ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋•ํƒ€์ดํ•‘์„ ์ œ์™ธํ•˜๊ณ , ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ์–ด๋–ค ๋ฐฉ๋ฒ•๋„ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ IE7 ์ดํ•˜๋ฅผ ์ œ์™ธํ•˜๋ฉด ์‹ค์ œ๋กœ ๋™์ž‘ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค. ์•„๋ž˜์˜ ์ถœ๋ ฅ์€ Tutti๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑ๋˜์—ˆ๋‹ค.

> var div = document.createElement('div')
> typeof div
Safari 5.0 => object
Firefox 3.6 => object
IE 7.0 => object
IE 8.0 => object
Opera 11.01 => object
> div instanceof Element
Safari 5.0 => true
Firefox 3.6 => true
IE 7.0 => Error: 'Element' is undefined
IE 8.0 => true
Opera 11.01 => true
> div instanceof HTMLDivElement
Safari 5.0 => true
Firefox 3.6 => true
IE 8.0 => true
IE 7.0 => Error: 'HTMLDivElement' is undefined
Opera 11.01 => true

์ฒซ์งธ๋กœ, typeof ๋Š” ์˜ˆ์ƒ๋Œ€๋กœ ์“ธ๋ชจ ์—†์–ด๋ณด์ธ๋‹ค. ๋‹ค์Œ์œผ๋กœ, IE 7์„ ์ œ์™ธํ•œ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €๋Š” div๊ฐ€ HTMLDivElement๋ฟ๋งŒ ์•„๋‹ˆ๋ผ Element์˜ ์ธ์Šคํ„ด์Šค์ž„์„ ์ธ์‹ํ•œ๋‹ค. IE7์—์„œ๋Š” ์ƒ์„ฑ์ž๊ฐ€ ์กด์žฌํ•˜์ง€๋„ ์•Š๋Š”๋‹ค.

> Object.prototype.toString.call(div)
Safari 5.0 => [object HTMLDivElement]
Firefox 3.6 => [object HTMLDivElement]
IE 7.0 => [object Object]
IE 8.0 => [object Object]
Opera 11.01 => [object HTMLDivElement]

IE์—์„œ Object.prototype.toString ๊ฒฐ๊ณผ๋Š” ์œ ์šฉํ•˜์ง€ ์•Š๋‹ค.

> div.constructor.toString()
Safari 5.0 => [object HTMLDivElementConstructor]
Firefox 3.6 => [object HTMLDivElement]
IE 7.0 => Error: 'div.constructor' is null or not an object
IE 8.0 => [object HTMLDivElement]
Opera 11.01 => function HTMLDivElement() { [native code] }

Function.prototype.toString๋Š” IE8์—์„  ์œ ์šฉํ•˜์ง€๋งŒ, ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ์•ฝ๊ฐ„ ๋‹ค๋ฅธ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ€์ง„๋‹ค.

> typeof window
Safari 5.0 => object
Firefox 3.6 => object
IE 8.0 => object
IE 7.0 => object
Opera 11.01 => object
> window instanceof Window
Safari 5.0 => ReferenceError: Can't find variable: Window
Firefox 3.6 => true
IE 8.0 => true
IE 7.0 => Error: 'Window' is undefined
Opera 11.01 => ReferenceError: Undefined variable: Window
> Object.prototype.toString.call(window)
Safari 5.0 => [object DOMWindow]
Firefox 3.6 => [object Object]
IE 8.0 => [object Object]
IE 7.0 => [object Object]
Opera 11.01 => [object Window]
> window.constructor
Safari 5.0 => function Object() {
    [native code]
}
Firefox 3.6 => function Object() {
    [native code]
}
IE 8.0 => [object Window]
IE 7.0 => undefined
Opera 11.01 => function Object() { [native code] }

window์„ ์‚ฌ์šฉํ•˜๋ฉด ์ด ๋ฉ”์„œ๋“œ ๋“ค์ค‘ ์–ด๋Š๊ฒƒ๋„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š์•˜๋‹ค. ์›ํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค๋ฅธ ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด๋ฅผ ํ…Œ์ŠคํŠธํ•ด ๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ, ์ผ๋ฐ˜์ ์œผ๋กœ ํ…Œ์ŠคํŠธ๋Š” ๋ถˆ๊ฐ€๋Šฅํ•ด ๋ณด์ธ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜, ์ด ํ…Œ์ŠคํŒ…์—์„œ XMLHttpRequest ๊ฐ์ฒด ๋ฐ DOM ๋ฐ ํ…์ŠคํŠธ ์š”์†Œ๋Š” IE7 ์ดํ•˜์— ๋Œ€ํ•œ ์ง€์›์„ ์ค‘๋‹จํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ ์ธ์Šคํ„ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ธ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ๋ฐฐ์šด ๊ฒƒ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํƒ€์ž…์„ ํ™•์ธํ•˜๋Š” ๊ฒƒ์€ ๋งค์šฐ ์—‰๋ง์ด๋‹ค. ๋น„๋ก ์–ด๋–ค ํŠน์ •ํ•œ ์œ ํ˜•์„ ํ™•์ธํ•˜๋Š” ๊ฒƒ์ด ๊ทธ๋ ‡๊ฒŒ ์–ด๋ ต์ง€๋Š” ์•Š์ง€๋งŒ, ๊ทธ๊ฒƒ์€ ํ™•์‹คํžˆ ์—ฌ๋Ÿฌ ์œ ํ˜•์— ๊ฑธ์ณ ์ผ๊ด€์„ฑ์ด ์—†๊ณ , ์•„๋งˆ๋„ ๊ทธ ๊ณผ์ •์—์„œ ๋งŽ์€ ์„ ํƒ์„ ํ•ด์•ผ๋งŒ ํ–ˆ์„ ๊ฒƒ์ด๋‹ค. ๊ทธ๋ž˜์„œ ๊ทธ๊ฒƒ์€ ๋ชจ๋“  ๋‹ค๋ฅธ ์„ ํƒ์‚ฌํ•ญ๋“ค์— ๋Œ€ํ•ด ์•„๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ๋„์›€์„ ์ค„ ๊ฒƒ์ด๋‹ค. ๋‹ค๊ฐ€์˜ค๋Š” ํฌ์ŠคํŒ…์—์„œ ์ž‘์€ ์ฝ”๋“œ ์กฐ๊ฐ์œผ๋กœ ์ด ๋ชจ๋“  ๊ฒƒ์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค๋„๋ก ๋…ธ๋ ฅํ•  ๊ฒƒ์ด๋‹ค.

์ถœ์ฒ˜

โš ๏ธ **GitHub.com Fallback** โš ๏ธ