This value was evaluated upon first expanding. it may have changed since then.

아래 파란색 `i`를 누르면 This value was evaluated upon first expanding. it may have changed since then. 안내 문구가 나온다. 해당 상황의 경우, 클릭했을 때, console.log로 해당 className을 출력한 뒤, 클래스 이름 'open'을 추가시켜주었다.

화살표를 눌러서 확장했을 때, 현재 상태의 객체의 값이 나온다. 즉, console.log가 찍힌 시점에서는 item만 있었지만, 이후 DOMTokenList에 open이 추가가 됐고, 화살표를 눌러서 확장했을 때, 현재 상태인 item과 open을 둘 다 가지고 있다고 출력된 것이다.

 

console.log는 비동기적으로 실행되는데, 객체의 참조를 동기적으로 받지만, 확장되기전까지는 객체의 속성을 보여주지 않는다.

 

아래가 비슷한 개념인 console lazy evaluation에 대해 간단하게 실험해볼 수 있는 또 다른 예시이다.

var s = ["hi"];
console.log(s);
s[0] = "bye";
console.log(s);

 

 

참고

https://stackoverflow.com/questions/23429203/weird-behavior-with-objects-console-log

Weird behavior with objects & console.log

https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays

Is Chrome's JavaScript console lazy about evaluating arrays?