[자바스크립트] console.log로 디버깅이나 값 확인 시 주의점!!

자바스크립트에서 console.log를 할때 객체를 읽어오면 잘못된 값을 확인할 수 있다.

 

  let testObj = {
    name: "홍길동",
    age : 26
  }
  console.log("값체크1", testObj);

  testObj.name="홍길순";
  testObj.age= 27;
  
  console.log("값체크2", testObj);

 

 

위와 같이 코드를 작성해보고 콘솔을 확인해보면

 

전혀 예상하지 않았던 결과가 나온다.

이 이유는 객체(object)를 console.log 를 찍게되면 변화하는 object는 자원을 아끼기위해 마지막 값을 출력해주는 경우가 있다.

 

 

해결방법

  let testObj = {
    name: "홍길동",
    age : 26
  }

var cloneObj = structuredClone(testObj);
  console.log("값체크1", cloneObj);

  testObj.name="홍길순";
  testObj.age= 27;
  console.log("값체크2", testObj);

 

이렇게 중간에 structuredClone으로 값을 복사해서 찍어주게되면 값이 제대로 출력되게된다.

단, 메모리를 많이먹을 수 있으니 왠만하면 복사는 자제하고

console.log를 찍을때 객체를 직접 참조해서 찍지 않는것이 중요할듯 하다.