[Javascript] console.log() 다시 보기

 

console.log()

 
Console은 브라우저의 내장 디버거로서 웹 개발 시 수도 없이 많이 사용된다.
그중에서도 console.log()는 일반적으로 가장 많이 사용하는 함수로 자바스크립트 객체, 문자열 등의 데이터를 콘솔창에 출력시키는 데 사용된다.
 
console.log()를 출력하거나 그 기능을 사용하기 위해서는 개발자 도구를 이용해야 한다.
아래 예시는 콘솔창을 통해 실행한 것으로 마지막 라인에 '< undefined'가 출력되는 이유는 콘솔창에서 특정 함수를 실행하면 그 함수의 return 값을 출력하도록 만들었기 때문. console.log()는 return 값이 없다.
 

console.log 사용 예시

 
 

---

 
 
 

console.log()의 객체 참조

 
 
console.log()가 다른 값을 찍어 준다?
 
console.log()를 통해 로깅을 할 때 흔히 하는 실수가 있다. 바로 객체를 사용할 때다. 다음 예시에서 콘솔에 어떻게 출력될지 예상해 보자.
 
 

 

 
 
당연히 A 시점에서는 {a: 1}이 출력되고 B 시점에는 {a: 1, b: 2}가 된다. 그러나 obj 객체를 펼쳐 상세 내용을 보면 A 시점에서의 obj 객체에 b 속성이 추가된 상태로 출력된 것을 볼 수 있다. 실제 코드에서는 b에 2를 넣기 전에 로깅을 했는데도 말이다.
 

 
 
console.log()는 참조를 로깅하기 때문에 객체와 같은 것들은 내용이 실시간으로 바뀐다. 그 시점에서 객체의 스냅샷을 출력하는 것이 아니라 객체 자체에 대한 참조를 출력하는 것.
이는 개발자가 A 시점에서의 정확한 객체 상태를 파악하는 데 어려움을 준다.
 
 
코드가 가까이 있으면 그런가 보다 하고 헷갈리지라도 않겠는데 다음의 예시와 같은 경우 충분히 헷갈릴 만하다. 다음의 배열(배열도 객체임) 예시를 보자.
 
 

 
 
이번에는 배열의 length까지 로깅을 했다. 분명히 로그에는 '[] 0'이 출력되었는데 []을 펼쳐 보니 length가 1이 되어 있다.
 
 

---

 
 
 
객체를 로깅할 때는 객체의 내용 변경 사항이 실시간으로 업데이트된다.
 

이 문제를 겪지 않으려면 객체를 깊은 복사를 통해 로깅하거나 객체가 아닌 값을 로깅하면 된다(위 예시를 예로 들면 arr을 로깅하는 것이 아니라 arr.length를 로깅하는 식으로).
 

또는 아래와 같이 console.table()을 사용하는 방법도 있다. 이는 데이터를 그리드화 하여 정제된 형태로 보여주는 기능을 한다. console.table()을 사용하면 A 시점과 B 시점에서의 객체 상태를 명확하게 파악할 수 있으며, 이는 비동기적인 동작이 많은 자바스크립트 개발에서 디버깅을 훨씬 용이하게 만들어 준다.
 

 
 

또 다른 방법으로 객체를 출력할 때  console.log(JSON.parse(JSON.stringify(obj))); 와 같이 사용하면 A 시점과 B 시점 각각에서 원하는 데이터를 출력할 수 있다.

 

 

 

 

---

 

 

객체를 출력할 때의 소소한 팁 한 가지.

 

코딩을 할 때 중간중간 console.log()를 통해 데이터가 잘 나오는지 확인하는 경우가 있는데 로그를 너무 많이 찍어 놓으면  개발자 입장에서는 어떤 게 어떤 데이터인지 확인하기 어려워진다. 그래서 많은 경우 변수명 앞에 문자열로 표시해 주는 방법을 택하는데 객체를 출력할 때면 다음과 같은 난관에 부딪힐 수 있다.

 

이처럼 + 연산자를 넣어 작성하면 문자열로 출력되어 원하는 데이터를 제대로 확인하기 어렵다. 이 경우 콤마(,)를 써 주면 원하는 형식의 객체를 출력할 수 있다.