[JavaScript] Console 객체 (1)

Console

자바스크립트에는 console이라는 객체가 존재한다. Console은 디버깅을 위해 존재하는 객체로, console의 함수를 이용하면 크롬 개발자도구의 콘솔창에 여러 정보를 출력할 수 있다. Console 객체 내부에 존재하는 함수들에 대해서 설명하도록 하겠다. 우선 가장 많이 사용하는 log 함수부터 설명하겠다.

 

console.log()

log 함수는 가장 일반적으로 사용하는 함수로 자바스크립트 객체를 콘솔창에 출력하는 함수이다. 주로 문자열을 출력하는데 자주 사용되며 예제는 다음과 같다. 예제는 크롬 개발자도구의 콘솔창을 이용하여 구현하였다.

 

다음과 같이 console.log 함수에 전달한 문자열이 콘솔창에 출력된다. 마지막에 < undefined이 뜨는 이유는 콘솔창에서 특정 함수를 실행하면 함수의 리턴 값을 < 뒤에 출력하도록 콘솔창을 만들었기 때문이다. console.log 함수는 return값이 없다.

 

console.log을 이용해서 객체를 출력할때는 주의해야 할 점이 있다. 바로 console.log로 객체를 출력할 때 그 순간의 객체 값을 출력하지 않고 업데이트된 객체 값을 출력한다는 점이다. 이는 객체를 출력할 때 객체를 참조해서 출력하기 때문이다. 간단한 예제는 다음과 같다.

 

이 경우라면 첫 번째에는 ["a"], 두 번째에는 ["a", "b"]를 출력하기를 바라겠지만 모두 최종값인 ["a", "b"]를 출력한다. 이를 모르고 객체를 console.log로 출력한다면 디버깅 할때 어려움을 겪을 수 있다. 만약 객체가 아닌 정수나 문자열을 사용한다면 어떻게 될지 살펴보자.

 

이경우는 첫 번째에는 a, 두 번째에는 ab를 출력한다.

 

만약 꼭 console.log를 이용해서 객체를 출력해야하는 경우는 어떻게 해야 할까. MDN web docs에서 권장하는 방법은 다음과 같다.

 

객체를 바로 출력하지말고 json 객체를 문자열로 바꾸고 그 문자열을 다시 json객체로 변환시켜 출력해야 한다. 위에서 객체를 출력한 예제에 이 방법을 적용하면 결과는 다음과 같다.

 

console.info, console.warn, console.error

info, warn, error함수는 log 함수와 기능이 동일하며 콘솔창에서 확인할 때 ui상으로 다르게 보여준다는 차이가 존재한다. 출력하는 정보의 성격에 따라 다른 함수를 사용하게 되면 각 정보가 어떤 성격인지 편하게 알 수 있다. 예제는 다음과 같다.

 

또한 Filter 기능을 이용해 원하는 성격의 정보만 볼 수있다. 

 

이 경우 Errors를 제외하고 모두 필터에서 제외하였다. 네 개의 함수를 이용하여 문자열을 출력하였지만 error 함수를 이용해 출력한 문자열만 확인할 수 있다.

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/API/Console/log

console.log()