JS - 조건부 삼항 연산자( ? : ),Null 병합 연산자( ?? ),옵셔널 체이닝

조건부 삼항 연산자( ? : )

조건부 삼항 연산자는 java , c 등등 다양한 프로그래밍 언어에서도 사용되는 연산자입니다.  

조건부 삼항 연산자는 전통적인 조건문 if .. else 문의 약어 입니다. 사용하게 되면 코드가 더 간결해지고 

깔끔해 보입니다.

조건 ? A : B;

위 조건부 삼항 연산자를 if .. else문으로 작성하면 다음과 같습ㄴ디ㅏ.

if (조건) {
  return A;
} else {
  return B;
}
출처: https://developer-talk.tistory.com/300 [평범한 직장인의 공부 정리:티스토리]

Null 병합 연산자( ?? )

Null 병합 연산자는 Nullish 병합 연산자로 부르기도 하며 물음표를 두 개 사용합니다. Null 병합 연산자(??)의 왼쪽 피연산자가 null 이거나  undefined 인 경우 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.

 Null 병합 연산자 구문

A ?? B;

A가 null 또는 undefined이면 B를 반환하며, 그렇지 않으면 A를 반환합니다.

 

Null 병합 연산자 주의사항

Null 병합 연산자의 주의사항으로 왼쪽에 AND( && ) 및 OR( || ) 연산자를 사용할 수 없습니다. 만약, NULL 병합 연산자 왼쪽에 AND 또는 OR 연산자를 사용하면 SyntaxError가 발생합니다.

 

 

옵셔널 체이닝(Optional Chaning)( ?. )

옵셔널 체이닝은 선택적 체이닝 연산자라고 부르기도 하며, 객체의 속성을 접근하는 경우 사용합니다

 

옵셔널 체이닝 사용 예시

name, age, address 속성을 가지는 user 객체가 존재합니다.

const user = {
  name: {
    firstName: '김',
    lastName: '범수';
  }
  age: 15,
  address: '성남'
}

만약, 다음과 같이 존재하지 않는 속성의 속성을 접근하면 TypeError가 발생합니다.

console.log(user.gender);
console.log(user.gender.length);

 

TypeError가 발생하는 이유는 user 객체에 gender 속성이 없으므로 undefined입니다.
 
user.gender가 undefined인데, length 속성으로 접근하였으므로 TypeError가 발생합니다.
 
옵셔널 체이닝을 사용하면 TypeError가 발생하지 않고 undefined를 반환합니다.

console.log(user.gender);
// undefined

console.log(user.gender?.length);
// undefined