웹브라우저 console.log 의 맹점

프론트엔드를 개발하는 사람이라면 웹브라우저에 찍히는 console.log를 활용하는 경우는 종종 있을 것이다.

하지만, console.log를 사용함에 있어 주의해야할 것이 있다.

다음의 예시 코드를 보자.

 

let arr = [1, 2, 3, 4];
console.log('before : ', arr);
let test = arr.shift();
console.log('after : ', arr);
console.log(test);

shift 는 배열의 첫번째 요소를 잘라내어 반환하므로 원본 배열에서 해당 요소가 사라진다.
그런데 저렇게 console.log를 출력해 보면 before 와 after가 동일한 배열이 반환된다.

즉 before이후에 배열이 변했지만, before에서 이미 변경된 배열이 출력된다.

 

왜 그럴까?
JavaScript의 console.log() 메서드는 객체의 참조(reference)를 출력한다.

따라서 배열을 console.log()로 출력할 때, 해당 배열의 참조가 출력되는 것이다.

배열의 참조가 출력되므로 배열의 내용이 변경되었을 때 콘솔에도 반영되어 보일 수 있다.

이러한 동작은 console.log()를 사용할 때 주의할 점 중 하나이며, 실제로 배열의 내용을 보기 위해서는 배열을 복사하여 출력하거나, 배열의 요소를 순회하며 개별적으로 출력해야 한다.