conole.log()의 반전

 

스터디 중에 어떤 분이 결과가 이상하다며 코드를 보내왔는데, 내가 보기에도 이상해서 알아보게 되었다.

 

(아래는 그 분이 보낸 코드에서 임의로 식별자 이름을 수정한 것이다.)

const obj = {
 id:1,
 title:'none',
 cat:true,
}

function toggleObj(obj) {
 obj.cat = !obj.cat;
 return obj
}

console.log(obj);
toggleObj(obj);
console.log(obj);

위 코드의 결과가 어떻게 나올 것 같은가?

이미 결과를 알고 있지 않다면, 스크롤을 내리기 전에 잠시 고민을 해보기 바란다.

 

어라 잘 나오는데..?

예상대로 로그가 잘 나온다. 하지만 여기엔 반전이 있다.

저 토글 버튼을 눌러 내부의 값을 살펴보자.

 

겉은 true지만 속은 false인 알 수 없는 너란 객체..

???????????????????????

이 객체에게 무슨 일이 일어난걸까?

 

 

 

지금부터 console.log의 실체를 알아보기 위한 짧은 여정을 떠나보자.

 

나는 구글링을 하며 아래 블로그와 스택오버플로우에 있는 글을 보게 되었다.

스택오버플로우

console.log() async or sync?

블로그

(JavaScript) 입문자가 겪기 쉬운 console.log 실수

 

블로그에 설명이 너무 잘 나와있어서 이렇게 글을 또 쓰는 게 무슨 의미가 있을까 싶지만, 그래도 매일같이 보는 console.log가 사실은 표준이 아니며, 이런 반전으로 인한 헤프닝(?)이 꽤 기억에 남았기에 기록해두고자 한다. 자바스크립트는 참 특이한 놈인 것 같다.

 

그런데 사실은 구글링까지 갈 필요도 없다.

 

답은 생각보다 더 가까이에 있다.

그냥 저 파란색 아이콘 위에 마우스를 올려보면 값이 바뀔 수도 있다고 간단하게 알려준다.

컴퓨터가 보내오는 응답을 그냥 지나치지 않는 습관을 들여야겠다.