[개발자 도구] 개발자 도구 콘솔에서 console.log를 믿으면 안되는 이유

[개발자 도구] 개발자 도구 콘솔에서 console.log를 믿으면 안되는 이유

개발을 공부하는 친구가 이런 질문을 하였습니다.
console.log를 찍었는데 값이 이상해, 값이 자꾸 바뀌어.

듣자마자 어떠한 문제인지 알고 가르쳐주었습니다.
어떠한 문제였을까요?
같이 확인해봅시다.

console.log

웹 개발자라면 F12를 눌러 개발자 도구를 사용합니다.
console 탭에서 로깅해둔 결과물을 보고 디버깅을 하는 경우도 있을 것입니다.

이때 주의해야 하는 점이 있습니다.
원시 값은 괜찮으나 참조 값일 때 문제가 발생합니다.

아래 코드를 확인해봅시다.

const obj = { a: 1 };
console.log(obj);
obj.b = 2;
console.log(obj);

위 결과 이미지를 보시면 뭔가 이상하다는 것을 확인하시 수 있습니다.
첫번째 console.log에서 객체를 열어보면 b 키 값이 포함되어 있습니다.

이것은 참조하고 있던 객체가 변경이 되어서 그렇습니다.
C, C++의 포인터라고 생각하시면 편합니다.

따라서 그 떄의 객체 값을 정확하게 알고 싶으시면 JSON.stringify를 사용하셔야 합니다.

const obj = { a: 1 };
console.log(JSON.stringify(obj, null, 2));
obj.b = 2;
console.log(JSON.stringify(obj, null, 2));

그럼 위처럼 정상적으로 해당 시점의 값을 보여주고 있습니다.

배열도 참조 값이므로 동일합니다.
빠르게 결과만 살펴보겠습니다.

const arr = [1];
console.log(arr);
arr.push(2);
console.log(arr)

이 경우도 JSON.stringify를 사용하면 됩니다.

const arr = [1];
console.log(JSON.stringify(arr, null, 2));
arr.push(2);
console.log(JSON.stringify(arr, null, 2))

정리하자면 참조 값 변수를 출력하면 값이 변할 수 있습니다.
따라서 해당 시점의 값을 정확히 보고 싶으면 JSON.stringify 를 사용해야 합니다.