문서 불러오는 중...
PLAY KEYBOARD, STRIKE A CODE
console.log()와 console.dir()의 차이점console.log()console.log()는 JavaScript에서 콘솔 출력을 위해 사용하는 함수이다.
console.log()를 사용하여 디버깅 및 로깅에 도움이 되는 정보를 콘솔에 출력할 수 있다. 주로 다음과 같은 목적으로 사용한다.
console.log()는 요소를 HTML과 같은 트리 구조로 출력 하고, DOM 요소에 대해 특별한 처리를 제공한다.
console.log()에서는 서식 문자를 이용해 문자열을 출력할 수 있다.
| 서식 문자 | 설명 | 예시 |
|---|---|---|
%d | 숫자 | console.log('Number: %d', 273); |
%s | 문자열 | console.log('String: %s', 'hi~'); |
%j | JSON | console.log('Json: %j', {name:'jay'}); |
console.dir()console.dir()은 객체의 속성을 콘솔에 출력하기 위해 사용한다. 이는 객체를 나열하거나 객체의 트리 구조를 표시하는 데 유용하다.
console.log()와 달리, 객체의 모든 속성을 확인하기 위해 사용한다. 주로 다음과 같은 목적으로 사용한다.
console.log()와 달리, 객체를 더욱 자세히 표시할 수 있어, 더 많은 정보를 얻을 수 있다.console.dir()은 요소를 JSON과 같은 트리 구조로 출력 하고, DOM JS 객체의 전체 표현을 보려고 할 때 유용하다. 즉, 객체의 데이터를 보고 싶을 때는 console.dir()을 사용하자.
| 구조 | 객체 | 함수 | |
|---|---|---|---|
console.log() | HTML과 같은 형태의 트리 구조 출력 | 태그 내용 출력 | 코드 출력 |
console.dir() | JSON과 같은 형태의 트리 구조 출력 | 태그 속성 출력 | 속성 출력 |
객체와 속성은 console.dir(), 나머지는 console.log()를 사용하면 편하다.
document 출력console.log(): HTML 형태의 트리구조 출력.
console.dir(): JSON 형태의 트리구조 출력.
document.body 출력console.log(): 해당 <body>의 요소 출력.
console.dir(): 전체 요소 출력.
a() 출력함수(객체)도 마찬가지로 출력된다.
만약, console.log(a()); 및 console.dir(a());를 사용할 경우, ()로 인해 함수를 실행하는 것이 되므로, 둘 다 true가 출력된다.
