[javascript] or 연산자(||), ??연산자의 차이와 ?. 로 에러 대신 undefined 반환하기

or연산자
0, "", false, undefined와 같은 falsy한 값을 전부검사한다.

const or검사 = false || A;
->or검사는 A를 반환한다. 

---

??연산자
undefined 와 null과 같은 nullish한 값만 검사한다. (그렇기 때문에 falsy한 상황은 검사되지 않는다)

 
const 물음표검사1 = false ?? A;
->물음표검사1은 false를 반환한다. 
 
const 물음표검사2 = A ?? B;
->물음표검사2은 A가 undefied이거나, null이 아닌 이상 B를 반환한다.
 
안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못한다.
 
??의 연산자 우선순위는 대다수의 연산자보다 낮고 ?와 = 보다는 높다. 
그렇기때문에 복잡한 표현식에서 ?? 를 사용할때는 ()괄호 안에 작성해 주는 것이 매우 권장된다. 
괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어있다. 
 
데이터를 화면에 보여줄 때 불러오는 속도가 느려서 표기 되지 않을만한 상황이 있다면 아래와 같이 활용할 수 있다.
const user;
console.log(user ?? '불러오는 중입니다')
 

---

??는 아래와 같이 변수에 기본값을 할당하는 용도로 사용하는 편이다. 
let custom;
width: custom ?? 100;  //custom이  null이나 undefined인 경우, 100을 할당한다. 
 
 

?.(optional chaining 연산자)사용하기 

위와 비슷하게 객체로 작성된 데이터 값을 할당할 때는 ?.를 사용하여 작성하는 것이 에러없이 undefied를 반환할 수 있다.  
(중첩으로 작성된 객체 데이터를 불러올 때 사용 하는 것이 유용하다 
왜냐하면 a.b로 불러오는 데이터에 값이 없으면 자바스크립트 자체가 에러를 내지 않고 undefined를 반환하기 때문)
점표기법(A.B.C)으로 데이터를 불러올 때
?.를 사용하여 A.B?.C로 작성하면,
A.B가 null이나 undefined일 경우  undefined를 반환해준다. 
 
 

let Data = {

	흰둥씨 : {
			id:1,
			date: 230204,
			name : '흰둥씨',
		},
            
	신짱구 : {
			id:2,
			date: 230204
			name:'짱구',
			state : '부리부리',
		},
}
console.log(Data.액션가면) //undefied (자바스크립트)
console.log(Data.흰둥씨.state)// 현재 state가 비어있어서 null이기 때문에 에러가 나서 작동을 멈춤
console.log(Data.흰둥씨?.state)// 현재 state가 비어있어서 null이기 때문에 undefined반환 
console.log(Data.흰둥씨?.state ?? '현재기분알수없음')// '현재기분알수없음'으로 반환됨

 
 
출처 : 코딩애플 유튜브, 모던 JS