console.log에선 빈 배열/객체인데 펼쳐보면 값이 있을 때

값이 있는 빈 배열

array.push로 값을 넣어준 다음 console.log로 찍어줄 때 문제가 생겼다. 자료를 찾아본 결과 근본적인 원인은 array.push를 비동기 함수에서 진행했고, 브라우저에선 이미 출력된 console.log값을 업데이트 하지 않는 다는 점에 있었다.

 

스택오버플로우에서 똑같은 현상을 겪은 케이스가 있었는데, 아래에 참고자료로 사용해봤다.

스택오버플로우 예시코드

위와 같이 코드를 작성했을 때, 5초가 지나기 전엔 array가 비어있는 상태여서 빈 배열을 출력할 것이고, 5초가 다 지난 다음엔 배열에 값이 다 입력이 되어 console창에 꽉찬배열을 볼 수 있다. 만일 이렇게 생각한다면 큰 오산이다.

직접 그려서 조잡해보이지만, 전체적은 흐름은 이렇다:

흐름 설명도

브라우저 엔진의 console창에선 출력된 내용은 다시 업데이트 하지 않는다. 때문에 배열의 값들이 있고  prototype도 속성에서 확인 할 수 있다해도 보여지는 값 (여기서는 빈배열)은 그대로 유지되는 현상이 일어난다. 표면적으로 보여지는 것은 빈 배열이지만, 막상 펼쳐보면 값이 있는 기이한 현상은 이렇게 일어난 것이다. 이는 객체에도 동일하게 적용된다. 

fold 내부에 있는 값은 항상 배열 / 객체를 참조하고 있기에, 내용은 업데이트 되는 모양이다. 자바스크립트는 역시 매력적인 언어다.

 

https://stackoverflow.com/questions/42260524/array-length-is-zero-but-the-array-has-elements-in-it