Javascript에서의 물음표(?) 사용

Javascript에서 물음표(?)가 사용되는 경우가 많은데, 이게 다른 언어와 조금 차이가 있어 헷갈려 정리해놓고자 한다.

 

삼항연산자로서의 ?

이 부분은 다른 언어와 유사한 부분이다. 삼항연산자로 ? 를 사용할 수 있다.

const text = isRed ? 'Yes, This is RED!' : 'No, Something else';

• ? {true} : {false} 형태로 사용된다.

 

 

널 병합 연산자로서의 ??

널 병합 연산자(Nullish coalescing operator)로 ?? 가 사용된다.

단어가 어려워보이지만 사실 간단하다. 왼쪽 피연산자가 nullish(null 또는 undefined)일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환한다.

const foo = null ?? 'default value';
console.log(foo);  // output: default value

const bar = 0 ?? 123;
console.log(bar); // output: 0

 

엥? 이런 경우 OR 논리 연산자(||)을 사용했던 것 같은데 아닌가? 하는 생각이 들 수 있다. 맞다. 근데 OR 연산자의 경우에는 Falsy 값에 해당하는 경우에 오른쪽 피연산자를 반환한다. Nullish 보다 더 확장된 개념으로 사용되므로 차이가 있다.

const foo = '' ?? 'nullish coalescing operator default value';
console.log(foo); // output: 

const bar = '' || 'or operator default value'
console.log(bar); // output: or operator default value

• 주의하자. [], {} 는 Falsy 하지 않다.

 

 

널 병합 할당으로서의 ??=

널 병합 할당(Nullish coalescing assignment)로 ??= 가 사용된다.

이것도 널 병합 연산자와 마찬가지로 왼쪽 피연산자가 Nullish한 경우 동작하며, 오른쪽 피연산자 값을 할당한다.

const test = { duration: 50 };

test.duration ??= 10; // 할당되지 않음
console.log(test.duration); // output: 50

test.speed ??= 25; // 할당됨
console.log(test.speed); // output: 25

// 아래 2개는 같은 것
const foo = null ?? 'default value';
const foo ??= 'default value';

 

 

Optinal Chaining으로서의 ?.

?. 은 Optinoal Chaining을 의미한다.

 

액세스한 객체 또는 함수가 Nullish(null or undefined)한 경우, error를 발생시키는 대신 undefined 반환된다.

• 간단한 circuit 이라고 생각하면 이해하기 쉽다.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
    howl: () => 'Meow !',
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName); // output: undefined

const catName = adventurer.cat?.name;
console.log(catName); // output: Dinah

// 함수에도 적용된다.
const catHowl = adventurer.cat?.howl?.();
console.log(catHowl); // output: Meow !

const catHello = adventurer.cat?.hello?.();
console.log(catHello); // output: undefined

굳이 이럴 정도로 사용하나 했는데 간결함의 이유도 있지만, 구현된지 오래되거나 사용할 수 없는 메서드가 있는 API를 사용해야하는 경우 유용하게 활용할 수 있다고 한다.

 

사실 이것도 아래와 같이 && 를 통해 풀어낼 수 있지 않나? 라고 생각할 수 있다.

const secondOfFirst = obj.first && obj.first.second;

 

하지만 && 는 Falsy의 경우에 왼쪽 피연산자를 반환하게 된다. 즉, obj.first 가 0 이라면 0 이 반환된다. 뭐 그게 목적이라면 정답이겠지만, null 또는 undefined 인 경우에만 왼쪽 피연산자를 반환하고 싶은 경우가 있을 수 있다. 그런 경우에 아래와 같이 Optional chaining (?.)을 사용하는 것이 적합하다.

const secondOfFirst = obj.first?.second;

 

 

마무리

오랜만에 Javascript를 찾아보니 참 어색한 부분이 많다.

Javascirpt는 Nullish와 Falsy를 구분하는 것도 참 중요한 것 같다. 잘못하면 생각하지도 않은 부분에서 장애를 일으킬 수 있을 것 같다.

• https://dev.to/damxipo/javascript-versus-memes-explaining-various-funny-memes-2o8c

---

 

References

MDN docs

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining