Cannot read properties of undefined / null & undefined

1. Cannot read properties of undefined

해당 Property가 정의되지 않은 객체 혹은 변수를 참조하려 했을때, 해당 객체의 값이 정의되지 않아 발생하는 에러

객체에 null 혹은 undefined를 할당했을때 발생한다.

 

2. Null & Undefined

Null이란? 

변수를 선언하고 빈 값을 할당한 상태.

 

Undefined란?

변수를 선언하고 값을 할당하지 않은 상태로써, 자료형이 없는 상태.

 

Null과 Undefined 모두 원시값 중 하나다.

 

 

*원시값이란?

string, number, bigint, boolean, symbol, null, undefined 일곱가지 종류를 가 데이터

 

3. How to handling?

1. Nullish Coalescing Operator ( ?? )
   Nullish 병합 연산자를 사용하면 짧은 문법으로 여러 피 연산자중 그 값이 확전되어있는 변수를 찾을 수 있다.
   a ?? b  : a 가 null도 아니고 undefined도 아니면 a를 사용하고, 그 외에는 b를 사용한다는 뜻이다.
   
   중첩 사용 또한 가능하다.
   a ?? b ?? c ?? "데이터 없음" : a 가 없으면 b, b도 없으면 c, c도 없으면 "데이터 없음"이 노출된다.
2. Optional Chaning ( ?. )
   단락평가(Short Circuit) : 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다.
   옵셔널 체이닝을 사용하면 단락평가 덕분에 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
   또한 옵셔널 체이닝은 Object의 자식 데이터들에 사용한다.
   a?.b : a가 null이거나 undefined이면 작업을 멈추고 undefined를 반환한다.
   
   옵셔널 체이닝 또한 중첩 사용이 가능하다.
   a?.b?.c : a 혹은 b가 null이거나 undefined이면 작업을 멈추고 undefined를 반환한다.
   
   하지만 남용하는 것은 지양 하는것이 좋다.
   a의 b는 필수값이지만 c는 필수값이 아니라면 a.b.c?.d 이런식으로 사용해야한다.
   그렇지 않으면 에러를 발견하지 못하고, 디버깅이 어려워진다.
   
   ?.() 사용법

let a = {
	test(){
    	console.log("check");
    }
};

let b = {};

a.test?.();
b.test?.();

// 결과
// a의 test 메소드는 실행이 되어 로그가 찍히지만
// b에는 test 메소드가 없기 때문에 에러없이 멈춘다.

 

       ?.[] 사용법

let a = {
	test : "check"
};

let b = null;

const key = "test";

console.log(a?.[key]);
console.log(b?.[key]);

// 결과
// a의 check가 로그에 찍히고
// b는 null 이기 때문에 멈춘다. 이에 undefined가 나온다.