인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

요 현상은 콘솔이 값의 변화를 실시간으로 반영하기 때문에 발생하는 문제로 보입니다. 자바스크립트의 console.log()는 호출 시점의 값을 즉시 복사해서 출력하는 것이 아니라, 객체나 배열처럼 참조형 데이터의 경우 나중에 값이 바뀌면 콘솔에서도 그 최종 상태를 보여줍니다. 그래서 console.log(객체)를 해놓고 나중에 그 객체를 수정하면, 콘솔에 찍힌 값도 수정된 상태로 보일 수 있어요.

그런데 반복문 안에서 console.log()를 찍은 경우에는 조금 다르게 동작하는데요, 반복문의 중괄호 {}는 새로운 블록 스코프를 형성하기 때문에 그 시점의 참조나 상태가 일시적으로 고정됩니다. 그래서 반복문 안에서 찍은 콘솔은 그 당시 상태 그대로 찍히고, 외부에서 찍은 콘솔은 나중에 바뀐 값이 반영되어 보이는 거죠.

안녕하세요, 인프런 AI 인턴입니다. 낙희님.

JavaScript에서 배열을 수정하고 콘솔에 출력을 할 때, 배열의 내부 상태가 어떻게 변동되는지에 대해 궁금하신 것 같습니다. 배열이나 객체를 콘솔에 출력할 때 가장 흔히 겪을 수 있는 오해 중 하나는, 브라우저의 콘솔이 객체의 현재 상태를 참조(reference)를 통해 실시간으로 보여주는 기능 때문입니다.

질문에서 말씀하신 “콘솔에서 배열의 0번째 인덱스가 다르게 찍힌다”는 부분은 이런 동작에서 비롯된 것으로 보입니다.

JavaScript 객체와 배열 참조

• 객체와 배열은 참조(reference) 타입: JavaScript에서 객체와 배열은 참조 타입입니다. 즉, 변수에 객체나 배열을 할당하고, 그 변수를 콘솔에 출력하면 그 객체나 배열의 ‘참조’를 출력하게 됩니다. 객체나 배열의 상태가 나중에 변경되면, 콘솔에 보이는 값도 실시간으로 변경된 상태를 반영합니다.

• 콘솔의 실시간 반영 기능: 브라우저의 콘솔에서 객체나 배열을 출력했을 때, 그 시점 이후에 객체나 배열이 변경되면 콘솔에 보이는 값도 바뀌게 됩니다. 이는 밤새도록 진행 중인 디버깅 과정에서 최신 상태를 반영하기 위해 설계된 기능입니다.

질문자의 경우, 아마도 배열의 첫 번째 요소를 "hellooo?"로 수정하고 콘솔에 배열을 출력했을 때, 이 후 다른 부분에서 해당 요소의 값이 변경되었다면 콘솔에 반영된 상태임을 주의하셔야 합니다.

참고 링크

• React에서 배열 사용하기 4 - 데이터 수정하기 18분 50초 질문드립니다.
  
• 크롬 개발자도구로 확인했을 때 key값이 20부터 나오는 경우
  

위 링크는 비슷한 JavaScript 배열 및 객체 참조 문제와 관련된 게시글들입니다. 각각의 사례를 참고하면서 JavaScript에서의 참조 타입 동작에 대한 이해를 높이시는 것도 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.