[javascript] 자바스크립트에서 속성 목록 확인 방법

가끔 javascript 사용하다가 구글링하기에는 귀찮고 함수 이름을 보면 알 것 같은데 뭐였는지 기억이 안날 때 활용할 수 있는 방법을 기록하려고 합니다.

 

console 을 예로 들면 console.log() 함수가 있고, console.debug(), console.dir(), console.clear() 등등이 있는데요. 이 외에도 많습니다.

Object.getOwnPropertyNames(console);
(25) ['debug', 'error', 'info', 'log', 'warn', 'dir', 'dirxml', 'table', 'trace', 'group', 'groupCollapsed', 'groupEnd', 'clear', 'count', 'countReset', 'assert', 'profile', 'profileEnd', 'time', 'timeLog', 'timeEnd', 'timeStamp', 'context', 'createTask', 'memory']

 

그리고 console 뿐만 아니라 window 객체에도 수많은 함수들이 있는 것을 확인할 수 있습니다.

Object.getOwnPropertyNames(window)
(1117) ['0', 'Object', 'Function', 'Array', 'Number', 'parseFloat', 'parseInt', 'Infinity', 'NaN', 'undefined', 'Boolean', 'String', 'Symbol', 'Date', 'Promise', 'RegExp', 'Error', 'AggregateError', 'EvalError', 'RangeError', 'ReferenceError', 'SyntaxError', 'TypeError', 'URIError', 'globalThis', 'JSON', 'Math', 'Intl', 'ArrayBuffer', 'Uint8Array', 'Int8Array', 'Uint16Array', 'Int16Array', 'Uint32Array', 'Int32Array', 'Float32Array', 'Float64Array', 'Uint8ClampedArray', 'BigUint64Array', 'BigInt64Array', 'DataView', 'Map', 'BigInt', 'Set', 'WeakMap', 'WeakSet', 'Proxy', 'Reflect', 'FinalizationRegistry', 'WeakRef', 'decodeURI', 'decodeURIComponent', 'encodeURI', 'encodeURIComponent', 'escape', 'unescape', 'eval', 'isFinite', 'isNaN', 'console', 'Option', 'Image', 'Audio', 'webkitURL', 'webkitRTCPeerConnection', 'webkitMediaStream', 'WebKitMutationObserver', 'WebKitCSSMatrix', 'XSLTProcessor', 'XPathResult', 'XPathExpression', 'XPathEvaluator', 'XMLSerializer', 'XMLHttpRequestUpload', 'XMLHttpRequestEventTarget', 'XMLHttpRequest', 'XMLDocument', 'WritableStreamDefaultWriter', 'WritableStreamDefaultController', 'WritableStream', 'Worker', 'Window', 'WheelEvent', 'WebSocket', 'WebGLVertexArrayObject', 'WebGLUniformLocation', 'WebGLTransformFeedback', 'WebGLTexture', 'WebGLSync', 'WebGLShaderPrecisionFormat', 'WebGLShader', 'WebGLSampler', 'WebGLRenderingContext', 'WebGLRenderbuffer', 'WebGLQuery', 'WebGLProgram', 'WebGLFramebuffer', 'WebGLContextEvent', 'WebGLBuffer', 'WebGLActiveInfo' ... ]

 

이렇듯 브라우저에 내장되어 있는 객체들 뿐만 아니라 개발된 소스코드를 탐방할 때도 해당 객체에 어떤 속성 값들이 있는지 확인하는 수단을 알고 있으면 편할 것 같습니다.

 

다만, 제가 알기로 document.querySelector() 처럼 document 밑에도 이러한 함수들이 있는 걸로 아는데, 이건 어떤 이유에서인지 location 밖에 나오지 않더군요.

 

그래서 문서를 참조해보았습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames

Object.getOwnPropertyNames() - JavaScript | MDN

해당 문서를 보면 "프로토타입 체인에 있는 요소들은 나열되지 않음"이라고 하더군요.

document 의 prototype 객체는 HTMLDocument가 있었고 또 HTMLDocument 의 prototype 객체는 Document가 있었습니다. 그리고 바로 그 Document의 prototype의 속성들로 흔히 알던 getElementById 나 querySelector 그리고 write 등의 함수들이 쭉 있었습니다.

Object.getOwnPropertyNames(Document.prototype)
(232) ['implementation', 'URL', 'documentURI', 'compatMode', 'characterSet', 'charset', 'inputEncoding', 'contentType', 'doctype', 'documentElement', 'xmlEncoding', 'xmlVersion', 'xmlStandalone', 'domain', 'referrer', 'cookie', 'lastModified', 'readyState', 'title', 'dir', 'body', 'head', 'images', 'embeds', 'plugins', 'links', 'forms', 'scripts', 'currentScript', 'defaultView', 'designMode', 'onreadystatechange', 'anchors', 'applets', 'fgColor', 'linkColor', 'vlinkColor', 'alinkColor', 'bgColor', 'all', 'scrollingElement', 'onpointerlockchange', 'onpointerlockerror', 'hidden', 'visibilityState', 'wasDiscarded', 'featurePolicy', 'webkitVisibilityState', 'webkitHidden', 'onbeforecopy', 'onbeforecut', 'onbeforepaste', 'onfreeze', 'onresume', 'onsearch', 'onvisibilitychange', 'fullscreenEnabled', 'fullscreen', 'onfullscreenchange', 'onfullscreenerror', 'webkitIsFullScreen', 'webkitCurrentFullScreenElement', 'webkitFullscreenEnabled', 'webkitFullscreenElement', 'onwebkitfullscreenchange', 'onwebkitfullscreenerror', 'rootElement', 'onbeforexrselect', 'onabort', 'onbeforeinput', 'onblur', 'oncancel', 'oncanplay', 'oncanplaythrough', 'onchange', 'onclick', 'onclose', 'oncontextlost', 'oncontextmenu', 'oncontextrestored', 'oncuechange', 'ondblclick', 'ondrag', 'ondragend', 'ondragenter', 'ondragleave', 'ondragover', 'ondragstart', 'ondrop', 'ondurationchange', 'onemptied', 'onended', 'onerror', 'onfocus', 'onformdata', 'oninput', 'oninvalid', 'onkeydown', 'onkeypress', 'onkeyup', ... ]

 

개수가 232개로 엄청 많은 것을 볼 수 있습니다. 내부에 함수가 엄청 많다는 것을 알 수는 있는데 여기서 제가 많이 사용하는 함수를 찾기에는 쉽지 않아 보입니다.

 

그냥 한번 참고하기에 좋은 함수이자 코드인 것 같습니다.

 

끝