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

HYO JIN Kim님의 프로필 이미지
HYO JIN Kim

작성한 질문수

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

모던 웹을 위한 다양한 Javascript+ES6 배열 문법 이해1

특별한 형태의 javascript배열에서

해결된 질문

작성

·

21

0

모던 을 위한 다양한 Javascript+EX6 배열 문법 이해1

16분 2초

 

const data1 = [1, 2, "dave", null];

const data2 = [
  { name: "Dave Lee", age: 30 },
  { name: "Alex", age: 40 },
];

const data3 = [
  [1, 2, 3],
  [4, 5, 6],
];

console.log(data1[0]);
console.log(data2[0].name);
console.log(data3[0][0]);

위 코드에서 마지막줄 console.log(data3[0][0]);만 결과가 나오지 않습니다.

[0][1], [0][2], 등 나머지 index 번호를 적용했을 때 정상적으로 나오는데, [0][0]은 왜 결과가 누락되는걸까요?

(undefined 라는 결과값도 나오지 않습니다.)

답변 1

0

안녕하세요. 답변 도우미입니다.

코드에서 console.log(data3[0][0]); 부분이 예상한 결과를 출력하지 않는 원인은 JavaScript에서 배열 또는 객체가 정의된 후 특정 위치의 데이터에 접근할 때 일반적으로 데이터가 제대로 초기화되지 않았거나 해당 위치에 값이 없을 때 발생할 수 있는 문제입니다. 이 경우 원인으로 다음 사항들을 확인해 볼 수 있습니다.

1. 초기화 확인

만약 data3[0][0] 위치에 데이터가 정확하게 할당되지 않았다면, console.log로 접근 시 아무런 결과가 출력되지 않거나 에러가 발생할 수 있습니다. 하지만 [0][1], [0][2]는 정상적으로 접근이 되므로, 배열을 선언하고 초기화하는 과정에 문제가 있을 가능성이 큽니다.

2. 개발 환경 캐시 이슈

코드를 실행하는 개발 환경(예: 브라우저 콘솔, IDE 콘솔 등)에서 캐시가 문제가 될 때 특정 값이 누락될 수 있습니다. 이 경우, 환경의 캐시나 버퍼링 문제가 원인이 될 수 있으며, 캐시를 지우고 다시 실행해보는 것도 하나의 방법입니다.

3. 구조적인 문제

위 코드에서 data3[0][0]에 접근 시 아무런 결과가 나타나지 않는 경우, 일부 JavaScript 엔진에서 발생하는 버그일 수도 있으며, 콘솔이 결과를 누락하는 경우도 드물게 발생합니다. 이런 경우 다른 콘솔로 확인해보는 것도 도움이 됩니다.

문제 해결 방법

  1. 코드 실행 전 캐시와 실행 환경을 초기화합니다.

  2. console.log(data3); 또는 console.log(data3[0]);와 같은 방식으로 배열 전체 또는 부분을 출력하여 구조를 한 번 더 확인합니다.

예시

아래 코드를 통해 배열이 정상적으로 초기화된 상태인지 확인할 수 있습니다.

const data3 = [
  [1, 2, 3],
  [4, 5, 6],
];
​
console.log(data3);         // 배열 전체 확인
console.log(data3[0]);      // 첫 번째 배열 요소 확인
console.log(data3[0][0]);   // 첫 번째 배열의 첫 번째 요소 확인

이렇게 확인하면 data3[0][0]1로 출력되는지 확인할 수 있습니다.

감사합니다. 잔재미코딩 드림

HYO JIN Kim님의 프로필 이미지
HYO JIN Kim
질문자

답변 감사합니다.

제가 다시 실행 해보니, 왜 그런지 알게되었습니다.

console.log(data1[0]); 와 console.log(data3[0][0]); 의 값이 동일하여 중복처리 되었습니다.

data값을 변경하니 각각의 결과값이 잘 출력됩니다.

감사합니다.

HYO JIN Kim님의 프로필 이미지
HYO JIN Kim

작성한 질문수

질문하기