[오류 해결] Cannot read Property '0' of Undefined in JS

 

 

the "Cannot read property '0' of undefined" error occurs when trying to access the index '0' on a variable that stores an 'undefined' value. 

 

이것을 해결하기 위해서는  array 이나 string 같은 인덱스 엑세스를 지원하는 값에만 엑세스해야한다.

 

예제

const arr = undefined;
// ⛔️ Cannot read properties of undefined (reading '0')
console.log(arr[0]);

const str = undefined;
// ⛔️ Cannot read properties of undefined (reading '0')
console.log(str[0]);

 

이러한 오류를 해결할려면 인덱스에 엑세스 하기전에 특정 데이터 유형으로 값을 초기화하고 

if 문을 사용하여 예상되는 유형인지 확인해야한다.

const fromDb = undefined;

// ✅ initialize to empty Array if Undefined
const arr = fromDb || [];
console.log(arr[0]); // ✅ undefined

// ✅ initialize to empty String if Undefined
const str = fromDb || '';
console.log(str[0]); // ✅ undefined

// ✅ check if array before accessing index
if (Array.isArray(arr)) {
  console.log(arr[0]);
} else {
  console.log('arr is not an array');
}

// ✅ check if string before accessing index
if (typeof str === 'string') {
  console.log(str[0]);
} else {
  console.log('str is not a string');
}

 

 

arr 및 string 변수의 값이 거짓인 경우( undefined ) 해당 값을 예상된 유형([]  or "" )으로 초기화 했습니다.  

 

논리 OR(||) 연산자를 사용하면 왼쪽 값이 거짓일 경우 대체값 ([], "")<fallback value> 을 제공할 수 있습니다. 

 

그런 다음 인덱스에 액세스하기 전에 값이 예상된 유형인지 조건부로 확인합니다. 

 

if문 보다  더 쉽게 optional chaining 연산자를 사용할 수 있습니다. 

 

const arr = undefined;
console.log(arr?.[0]); // ✅ undefined

const str = undefined;
console.log(str?.[0]); // ✅ undefined

 

 

별개로 

 

중첩 배열의 인덱스에 액세스하려고 할 때 "정의되지 않은 속성 '0'을 읽을 수 없습니다." 라는 오류가 자주 발생합니다.

const arr = [];

// ⛔️ Cannot read properties of undefined (reading '0')
console.log(arr[0][0]);

 

이때도 optional chaning을 사용할 수 있습니다.

 

const arr = [];

console.log(arr?.[0]?.[0]); // ✅ undefined

const arr = [['hello']];

console.log(arr?.[0]?.[0]); // ✅ "hello"