console.log 주의( 객체참조 )

로그 찍은게 객체일 때 console.log를 여러개 하면 가장 마지막에 찍힌 log로 다 적용 된다. (객체 참조)

그래서 객체를 한번에 log를 찍고 싶다하면 복사를 하는 메서드(stucturedClone)를 이용해 디버깅을 하자!

<!DOCTYPE html>
<meta charset="UTF-8">
<body>
    <div id="disp"></div>
</body>
<script>
    /* 
        아래 형식의 에러는 팍팍 해결할 수 있어야 함 ! .앞이 문제
        Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
     */
    let myDisp = document.querySelector("#disp");
    myDisp.appendChild(document.createElement("h1"));

    const debug = false; // 디버깅용 로그 제어
    // console.log 주의~(객체일때 참조방식)
    let testObj = {
        name: "로제",
        age:26
    }

    // 고수들은 객체들을 복사!(복사하면 따로 놈!)
    // console.log 로 찍을 떄 용으로만 사용해라!!
    if(debug){
        let testCopy = structuredClone(testObj);
        console.log("체크1 : ", testCopy);
    }

    testObj.name="제니";
    testObj.age=27;
 
    if(debug){
        let testCopy2 = structuredClone(testObj);
        console.log("체크2 : ", testCopy2);
    }
</script>