객체 및 배열에 대해 console.log()에 무엇이 기록됩니까?

console.log(myObject)를 사용하고 콘솔에 인쇄된 내용을 확장한 후 얻은 결과로 인해 혼란스러워한 적이 있습니까?

예를 들어:

    const myObject = {
      firstName: "Elad",
      lastName: "Tzemach",
      favoriteFood: "cake"
    };

    console.log(myObject);

    // lots of other code

    myObject.favoriteFood = "broccoli";

콘솔에서 다음을 제공합니다.



예이! 😍 나는 케이크를 좋아한다! 🍰 🍰 🍰

이것을 확장해 보겠습니다.



뭐?? 😳 "broccoli" ?? 무슨 일이에요??

작은 파란색 아이콘 "i"아이콘이 보이시나요?



마우스를 가져가면 "아래 값은 지금 평가되었습니다."라는 도구 설명이 표시됩니다.

console.log()로 평가

console.log()를 사용하여 객체(또는 배열)를 평가하는 것은 비동기 방식으로 수행됩니다. 객체 자체에 대한 참조는 동기식으로 console에 전달되며, 확장하기 전에 처음에 favoriteFood: "cake"가 있는 객체를 보는 이유입니다. 이것이 우리가 콘솔에 기록했을 때 개체의 "모양"입니다.

그러나 개체가 나중에 수정된 다음 콘솔에서 확장된 경우 현재와 동일한 것으로 평가되므로(앱 코드 실행이 완료된 후) 표시되는 데이터에 업데이트된 값이 있습니다.

무엇을 할 수 있습니까?

혼란을 피하기 위해 한 가지 접근 방식은 다음을 사용하는 것입니다.

console.log("users", JSON.stringify(users, null, 2));

그런 다음 기본적으로 확장된 console.log()를 호출한 시점에 개체를 가져옵니다. (축소할 수는 없지만)



또 다른 방법은 단순히 개체를 완전히 복제한 다음 기록하는 것입니다.

console.log({...myObject});

(중첩된 개체가 없는 경우 스프레드 연산자로 쉽게 수행할 수 있습니다. 중첩된 경우 Lodash 또는 ImmutableJS 와 같은 타사 라이브러리를 사용해야 합니다.)

결론

console.log()가 개체 및 배열과 함께 작동하는 방식을 이해하면 확실히 좌절감을 덜 수 있습니다!

그리고 끝까지 하셨다면 고백할게 있어요 브로콜리도 좋아해요😄

행복한 코딩!! 🚀