[IT][Javascript] console을 출력하는 여러방법

나는 거의 console.log만 찍어보는데, 은근히 방법이 여러가지로 많았으므로 메모할겸 글을 작성해봄

 

1. log(), info(), warn(), error()

일단 기본적인거부터 시작해보겠음

const text = '테스트';
const ary = [1,2,3,4,5];
const obj = { name: 'tyranno', tel: 01012345678 };

이렇게 있다고 가정하고 출력해봄

Console.log()

문자열
배열
객체

😅 Console.info() 는 Console.log()와 동일해서 스킵함

 

Console.warn()

문자열
배열
객체

 

Console.error()

문자열
배열
객체

사실 log(), warn(), error()는 따로 역할이 있는게 아니기때문에 그냥 한눈에 구분하기 쉽게 쓰면된다.

그밖의 사용법

const str = '테스트';
console.log(`${str} 텍스트임!`);
// 테스트 텍스트임!

console.log('%c이 출력문은 글자가 빨갛고 클거에요', 'color: red; font-size: 24px');

---

2. dir()

Console.log()와 비슷한데 Console.dir()은 HTML에서 DOM에 있는 속성(?)을 확인하고 싶을때 사용하면 좋다.

Console.log()로 DOM요소를 출력하면 위와같이 HTML태그 자체가 출력되지만

Console.dir()로 출력하면 안에 있는 속성을 볼 수 있다.

---

count()

count()의 인자에는 Count의 이름(?)이 들어간다. 같은 이름으로 호출할때마다 카운트된다.

예시: console.log(카운트이름)

 

특정 카운트를 다시 초기화 하려면 아래처럼 사용하면 된다.

예시: console.countReset(카운트이름)

console.count('test')
// test: 1

console.count('abc')
// abc: 1

console.count('test')
// test: 2

console.count('test')
// test: 3

console.countReset('test') 
// test만 초기화 시킴

console.count('test')
// test: 1

console.count('abc')
// abc: 2

---

table()

좀 더 그럴듯하게(?) 출력하려면 Console.table()을 사용하면 된다.

배열의 경우

객체의 경우

---

time(), timeEnd()

코드 실행시간이 얼마나 걸렸는지 확인할때 사용하면 된다.

 

time()의 인자에는 타이머이름이 들어간다. timeEnd()도 마찬가지다

 

참고로 time()과 tiemEnd()의 타이머이름은 동일해야 정상작동함

console.time('testTimer')

for(let i=0; i<100000; i++){}

console.timeEnd('testTimer')
// testTimer: 2.1650390625 ms

---

솔직히 console.log()밖에 안썼는데, 이렇게 다양한지 전혀몰랐다. (다른것들은 존재자체를 몰랐음)

 

이 기회에 활용해보면 좋을것 같다.