[Javascript] console.log는 게으르다?!

MDN 문서에는 console.log에 대해 이렇게 설명하는 부분이 있다. "객체에 대한 정보는 게으르게 검색됩니다."

이게 정확히 무슨 뜻일까?

MDN 공식문서 참조

 

예시

예를들어 아래와 같은 코드가 있다.

let obj = { count: 0 };
console.log(obj);
obj.count = 1;

 

우리는 console.log의 결과를 보통 다음과 같이 예측할 것이다.

 

그러나 객체를 펼쳐보면 count가 1이라는 결과를 확인할 수 있다.

도대체 어떻게 된 것일까?

 

console.log는 참조를 출력한다

console.log는 객체나 배열을 참조로 전달하기 때문에, 출력할 때 해당 객체의 값이 나중에 변경된다면, 변경된 값이 출력될 수 있다.

console.log가 객체의 참조를 저장하고, 실제로 콘솔에서 객체를 펼칠 때 현재 상태를 평가하기 때문

 

즉, console.log의 count가 처음에는 0이지만 펼치는 순간 참조했던 값을 보여주기 때문에 obj.count = 1로 업데이트 된 값을 보여주게 되는 것이다.

 

다만 이는 원시데이터는 해당하지 않고 객체와 배열에만 해당한다. 배열도 객체의 일종이므로 참조로 평가된다.

 

 

해결방법

MDN 문서에는 해결방법도 제시하고있다.

객체를 변경하려는 경우 로깅된 정보가 업데이트되지 않도록 하려면, 로그에 기록하기 전에 객체를 깊은 복사할 수 있다. 일반적인 방법은 JSON.stringify()를 사용한 후 JSON.parse()를 사용하는 것이다.

console.log(JSON.parse(JSON.stringify(obj)));

 

위 방법을 사용하면 예기치 못한 상황을 방지할 수 있을 것이다.

 

 

참조

https://developer.mozilla.org/ko/docs/Web/API/console/log_static

console: log() static method - Web API | MDN