자바스크립트 코드에서 데이터의 변경사항을 디버깅하기 위해서 console.log 메소드를 많이 사용합니다.

아래처럼 말이죠.

var arr1 = []

console.log(arr1, arr1[0])

arr1.push('a')
arr1.push('b')
arr1.push('c')

console.log(arr1, arr1[0])
실행 결과
실행결과

근데 실행 결과를 보면 아직 데이터를 추가하기 전에 출력된 로그에서도 이미 데이터가 들어가 있는 것처럼 보입니다.

버그인가? 라고 생각하실 수 있겠지만 이건 사실 console.log 메소드이 문제가 아니라 브라우저가 console.log의 데이터를 보여주는 방식때문입니다.

아래처럼 i 아이콘(크롬 브라우저에서만 표시됨)에 마우스 포인터를 올려보시면 Value below was evaluated just now. 라는 메시지를 것을 볼 수 있습니다.

즉, 화살표를 눌러서 보여지는 데이터는 화살표를 누른 시점의 데이터를 보여주는 것입니다. ( 다시말하면 console.log가 실행된 시점의 데이터가 아니라는 겁니다. )

우리가 브라우저의 콘솔을 통해 배열의 요소를 확인한 시점(화살표를 누른 시점)은 이미 모든 자바스크립트 코드가 실행완료된 시점이므로 배열의 요소들이 보여지게 된 것입니다.

다만 모든 console.log의 출력결과가 이렇게 보여지는 것은 아니고 객체(object, array, function 등)일 경우만 이렇게 처리됩니다.

마치며

console.log로 출력된 데이터가 객체타입인 경우 객체의 참조를 전달하므로 실행시점으로 처리하지 않고 조회하는 시점의 값을 보여준다는 점을 기억하세요.

감사합니다.