[JavaScript]물음표 사용 방법, Null 병합 연산자, 옵셔널 체이닝

이번 포스팅에서는 JavaScript의 물음표(?)를 사용하는 사례를 설명합니다. JavaScript에서 물음표를 잘 활용하면 코드를 좀 더 간결하게 작성할 수 있습니다!

---

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

조건부 삼항 연산자는 JavaScript뿐만 아니라 다른 프로그래밍 언어에서도 사용되는 연산자입니다. 조건부 삼항 연산자는 전통적인 조건문 if...else문의 약어입니다. if...else문 대신 조건부 삼항 연산자를 사용하면 코드가 더 간결해지고 깔끔해 보입니다.

 

▶ 조건부 삼항 연산자 구문

조건 ? A : B;

조건이 true면 A가 반환되고 조건이 false면 B가 반환됩니다.

 

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

if (조건) {
  return A;
} else {
  return B;
}

 

다음은 변수 age가 20살 이상이면 문자열 "성인"을 반환하며, 0 ~ 19살 사이면 문자열 "어린이"를 반환하는 예제입니다.

▶ if...else문 사용 예시

function getAdualtOrNot(age) {
  if (age >= 0 && age <= 19) {
    return "어린이";
  } else {
    return "성인";
  }
}

console.log(getAdualtOrNot(15));
// 어린이

console.log(getAdualtOrNot(20));
// 성인

 

▶ 조건부 삼항 연산자 사용 예시

function getAdualtOrNot(age) {
  return (age >= 0 && age <= 19) ? "어린이" : "성인";
}

console.log(getAdualtOrNot(15));
// 어린이

console.log(getAdualtOrNot(20));
// 성인

5줄의 if...else문 코드를 조건부 삼항 연산자를 사용하여 한 줄로 작성하였습니다.

반응형

---

Null 병합 연산자( ?? )

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

 

▶ Null 병합 연산자 구문

A ?? B;

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

 

▶ Null 병합 연산자 사용 예시

let A = null ?? 'A는 null이 아니다.';
let B = undefined ?? 'B는 undefined가 아니다.';
let C = false ?? true;
let D = '100' ?? '200';

console.log(A);
// A는 null이 아니다.

console.log(B);
// B는 undefined가 아니다.

console.log(C);
// false

console.log(D);
// '100'

 

▶ Null 병합 연산자 주의사항

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

 

다음은 Null 병합 연산자 왼쪽에 AND 및 OR 연산자를 사용하는 예제입니다.

true || 'true' ?? 'true다.';

false || true ?? 'true다.';

실행 결과

 

AND 및 OR 연산자와 같이 사용하는 경우 소괄호로 연산자의 순서를 명시합니다.

(true || 'true') ?? 'true다.';
// true

(false || true) ?? 'true다.';
// true

---

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

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

 

▶ 옵셔널 체이닝 사용 예시

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

const user = {
  name: {
    firstName: '둘',
    lastName: '리';
  }
  age: 20,
  address: '부산'
}

객체의 속성을 접근하는 방법은 일반적으로 도트 접근법( . )과 대괄호( [] ) 접근 방법이 있습니다.

console.log(user.name.firstName);
// 둘

console.log(user['name']['lastName']);
// 리

console.log(user.age);
// 20

console.log(user['age']);
// 20

만약, 다음과 같이 존재하지 않는 속성의 속성을 접근하면 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