console.log()는 비동기인가요, 동기인가요?

Question

저는 현재 Trevor Burnham의 "Async Javascript"를 읽고 있습니다. 이것은 지금까지 훌륭한 책입니다.

그는 Safari 및 Chrome 콘솔에서 이 코드 조각과 console.log가 "비동기적"이라고 말합니다. 불행히도 나는 이것을 복제할 수 없습니다. 코드는 다음과 같습니다.

var obj = {};
console.log(obj);
obj.foo = '바';
// 내 결과: Object{};
// 책 결과: {foo:bar};

만약 이것이 비동기적이라면 결과는 책에 나오는 것과 같을 것으로 예상됩니다. console.log()는 모든 코드가 실행될 때까지 이벤트 큐에 넣은 다음 실행되고 bar 속성을 갖습니다.

동기적으로 실행되는 것 같습니다.

이 코드를 실행하는 것이 잘못된 것인가요? console.log는 실제로 비동기적인가요?

Answer 1

이것은 실제로 질문에 대한 답변은 아니지만 이 게시물을 우연히 발견한 사람에게는 도움이 될 수 있으며 댓글이 너무 깁니다.

으아악

이것은 console.log의 의사 동기 버전을 생성하지만 허용되는 답변에서 언급한 것과 동일한 주의 사항이 있습니다.

요즘 대부분의 브라우저console.log는 어떤 면에서는 비동기식인 것 같으니, 어떤 경우에는 이와 같은 기능을 사용하고 싶을 수도 있습니다.

Answer 2

console.log 표준화가 없으므로 동작이 정의되지 않고 다양한 버전의 개발자 도구 간에 쉽게 변경될 수 있습니다. 귀하의 책은 최신 정보가 아닐 수 있으며, 제 답변도 곧 최신 정보가 아닐 수 있습니다.

우리 코드의 경우 console.log가 비동기인지 여부에 차이가 없으며 어떤 종류의 콜백도 제공하지 않으며 전달한 값은 함수를 호출할 때 항상 참조되고 평가됩니다.

다음에 무슨 일이 일어날지 실제로는 모릅니다(Firebug, Chrome Devtools, Opera Dragonfly는 모두 오픈 소스이므로 알 수 있습니다). 콘솔은 로깅된 값을 어딘가에 저장하고 화면에 표시해야 합니다. 렌더링은 확실히 비동기식으로 발생하며(속도 제한 업데이트에 따라) 콘솔에 기록된 객체와의 향후 상호 작용(예: 객체 속성 확장)도 마찬가지입니다.

따라서 콘솔은 기록된 변경 가능한 객체를 복제(직렬화)하거나 해당 객체에 대한 참조를 저장할 것입니다. 첫 번째는 깊거나 큰 개체에서는 작동하지 않습니다. 또한 적어도 콘솔의 초기 렌더링에는 객체의 "현재" 상태, 즉 기록 당시의 상태가 표시될 수 있습니다. 예에서는 Object {}가 표시됩니다.

그러나 개체의 속성을 자세히 검사하기 위해 개체를 확장하면 콘솔은 개체 및 해당 속성에 대한 참조만 저장할 수 있으며, 지금 표시하면 현재(변형된) 상태가 표시됩니다. +，您应该能够在示例中看到 bar 속성을 클릭하면.

다음은 "수정 사항"을 설명하는 버그 보고서에 게시된 스크린샷입니다.

따라서 일부 값은 기록된 후 오랫동안 참조되지 않을 수 있으며 이러한 값에 대한 평가는 오히려 lazy("필요할 때")입니다. 이러한 차이점의 가장 유명한 예는 Chrome의 JavaScript 콘솔이 배열의 지연 평가를 처리합니까?라는 질문에 있습니다.

해결 방법은 예를 들어 console.log(JSON.stringify(obj))를 수행하여 객체의 직렬화된 스냅샷이 항상 기록되도록 하는 것입니다. 그러나 이는 원형이 아니고 상당히 작은 개체에만 적용됩니다. Safari에서 console.log의 기본 동작을 변경하는 방법도 참조하세요. .

더 나은 해결책은 디버깅에 중단점을 사용하는 것입니다. 중단점에서는 실행이 완전히 중지되고 각 지점에서 현재 값을 검사할 수 있습니다. 직렬화 가능하고 변경할 수 없는 데이터에만 로깅을 사용하세요.