[FE] console.log 트랩

전방 개발에서 우리는 자주 console을 사용한다.log는 브라우저 컨트롤러에 로그를 인쇄하지만 인용 형식의 대상을 인쇄할 때 이상한 상황이 발생할 수 있습니다. 인쇄 결과는 대상이 인쇄될 때의 값이 아니라 프로그램이 실행된 후의 대상의 결과 값입니다.
Chrome 버전 59.03071.86(공식 버전)(64비트)

const x = [];
console.log(x);

x.push(1);
console.log(x);

이 두 로그는 콘솔에 다음과 같이 표시됩니다.

→ []
→ [1]

우리는 컨트롤 데스크톱>을 클릭하면 결과를 볼 수 있습니다.

↓ []
    0: 1
    length: 1
  → __proto__: Array(0)

↓ [1]
    0: 1
    length: 1
  → __proto__: Array(

펼친 뒤 본 내용은 x의 최종 결과다.→ []와 → [1]는 전개되지 않을 때 구분할 수 있지만 일부 상황은 구분할 수 없다.

const y = { a: { b: 0 } };
console.log(y);

y.a.b = 1;
console.log(y);

콘솔에 표시된 결과는 구분할 수 없습니다.

→ Object {a: Object}
→ Object {a: Object}

콘솔에서 펼쳐진 결과도 구분할 수 없고,

↓ Object {a: Object}
  ↓ a: Object
      b: 1
    → __proto__: Object
  → __proto__: Object

↓ Object {a: Object}
  ↓ a: Object
      b: 1
    → __proto__: Object
  → __proto__: Object

이럴 때는 콘솔에 주의해야 한다.log의 함정이야, console.log는 인용 방식으로 대상을 인쇄합니다. 한 대상의 속성 값은 복사되지 않고 컨트롤러에서 대응하는 결과 값을 볼 수 있습니다.