[Javascript] Javascript에서 ?(물음표) 사용법

Javascript에서 물음표를 사용하는데 왜 사용하는지 몰라서 전체적인 사용법에 대해 찾아봤다.

 

Javascript에서의 ?(물음표)

1. 삼항 연산자 (Ternary Operator)

2. 선택적 연결 (Optional Chaining)

3. 무효화 합체 (Nullish Coalescing)

 

1. 삼항 연산자 (Ternary Operator / ? : )

삼항 연산자는 if ... else를 대체하는 연산자이다.

첫 번째 항의 Condition이 True이면 두 번째 항을 실행하고, False이면 세 번째 항을 실행한다.

if ... else로 작성한다면 아래와 같다.

if(Condition) {
    // True일 경우 실행
} else {
    // False일 경우 실행
}

삼항연산자는 한 줄만 차지하는데 비해, if... else는 5줄 이상 차지한다.

 

 

2. 선택적 연결 (Optional Chaining / ?. )

객체를 사용할 때, 속성이 undefiend이거나 null일 수 있다. 참조값이 undefiend나 null이면 error를 발생시키는 대신 undefiend를 return한다.

 

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
 
const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined
 
console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined
 

adventurer 객체의 .dog속성에 접근하려 한다. 원래는 adventurer.dog는 없으므로 error가 나타난다. 하지만

adventurer.dog?.name은 error대신 undefiend를 return한다.

아래의 adventurer.someNonExistentMethod?.()도 마찬가지이다.

 

?.는 앞의 속성에 접근하기 전에 null이나 undefiend가 아닌지 검증한 후, 다음 속성에 접근해 error를 막는다.

임시변수가 생성되는 점을 제외하면, ?.를 사용한 코드와 아래의 코드는 동일하다.

let nestedProp = obj.first?.second;
 
// 위와 동일한 식이다.
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

 

3. 무효화 합체 (Nullish Coalescing / ?? )

?? 는 왼쪽 값이 null 혹은 undefiend 이면 오른쪽 피연산자 값을 출력한다. 반대의 경우는 왼쪽 피연산자의 값을 출력한다.

 

|| 와 비슷하지만 조금 다르다.

let height = 0;
 
alert(height || 100); // 100
alert(height ?? 100); // 0

위의 코드를 보면 쉽게 알 수 있다. height에 0이라는 값을 입력한다.

하지만 || 을 사용했을 땐 값을 입력했음에도 오른쪽의 100을 출력하고, ?? 을 사용했을 땐 입력한 0을 출력한다.

이것은 || 와 ?? 이 어떤 값일때 다음 항으로 넘어가는지 조금 다른 기준을 가지고 있기 때문이다.

 

|| 의 경우 왼쪽 항이 truthy한지 확인하고,

?? 의 경우는 왼쪽 항이 정의된(defined) 값인지 확인한다.

 

A || B 혹은 A ?? B 일 때 B를 출력하는 경우

||	null, undefiend, false, 0, ''(빈문자열)
??	null, undefiend

 

다른 연산자와의 사용

?? 연산자는 연산자의 순위가 낮은 편이고, || 나 && 와 함께 사용할 경우 안정성 관련 이슈 때문에 error를 발생시킨다.

다른 연산자와 함께 사용할 때는 ( ) 로 묶어주는 것이 좋다.

// 다른 연산자와의 
let area = height ?? 100 * width ?? 50; // 권장하지않음
// 아래와 같은 순서로 연산함
let area = height ?? (100 * width) ?? 50;
// 각각 괄호로 묶어주는 것이 좋다
let area = (height ?? 100) * (width ?? 50);
 
// &&, || 와의 사용
let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'
let x = (1 && 2) ?? 3; // 제대로 동작합니다.

 

 

 

 

참고한 사이트

https://www.freecodecamp.org/news/how-the-question-mark-works-in-javascript/

How the Question Mark (?) Operator Works in JavaScript

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN

https://ko.javascript.info/nullish-coalescing-operator

nullish 병합 연산자 '??'