콘솔 라이브 로깅 사고 및 함정과 이를 방지하는 방법

MDN에 따르면 문서화console.log에 척추를 오싹하게 만드는 한 줄이 있으며 이에 대한 적절한 문서를 찾을 수 없습니다.

Otherwise, many browsers provide a live view that constantly updates as values change.

그래서 나는 그것이 어떻게 일어날 수 있는지 알아보기 위해 간단한 테스트를 작성했습니다.

var x = {name: "foo"};
console.log(x);

x.name = "bar";
console.log(x);

x = {name: "oops"};
console.log(x);

이것은 다음과 같은 일반 객체를 생성합니다


그러나 개체를 확장합니다.


첫 번째 개체 이름이 더 이상 "foo"가 아니라 "bar"라는 점에 유의하십시오. console.dir 및 console.log({x}) 를 사용할 때도 마찬가지입니다. 마지막 로그는 새 개체로 참조를 재설정했기 때문에 실용적이지 않습니다.

따라서 이를 방지하려면 두 가지 옵션이 있습니다. 정확한 속성x.name을 로그아웃하거나 MDN에서 제안한 대로 로그하기 전에 개체를 복제합니다.

var x = {name: "foo"};
console.log(JSON.parse(JSON.stringify(x)));

x.name = "bar";
console.log(x);

출력은