[#5-day] 프론트엔드 공부 주저리

수강 중간에 자주 사용하던 문법 한개가 눈에 거슬리기 시작했다.

src={item.author ? item.author.photoURL ?? 'URL주소' : 'URL 주소'}

해당 코드는 진행하는 프로젝트에서 가지고 온 코드의 일부분이다.

이와 같이 자바스크립트에서는 삼항 연산자를 다음과 같은 물음표를 사용한 뒤 참과 거짓에 따라 구분한다.

 

🍳 그런데 잠깐, 삼항 연산자는 보통 다음과 같은 형식을 띄운다.

참과 거짓으로 나눌 수 있는 조건? 참일때 실행할 문장:거짓일때 실행할 문장

 

그렇다면 물음표 두개를 붙여쓰면 사항 연산자인걸까? 

 

 

🎀 강의에 대한 소개는 다음 글에 있어요!
https://coding7281.tistory.com/9

[#1day] 프론트엔드 공부 주저리

 

---

정답만을 이야기하자면 해당 연산자는 사항 연산자가 아닌 Nullish coalescing operator(널 병합 연산자) 라고 할 수 있다. 그렇다면 이 연산자는 어디서 제공하는 연산자일까? 바로 Javascript의 연산자인데 기본 개념과는 조금 다른 느낌이라고 볼 수 있다.

 

원래 자바스크립트에서의 '??' 연산자는 왼쪽 피연산자가 null 또는 undefined 형식일 때 오른쪽 피 연산자를 반환하고 그렇지 않으면 왼쪽 피 연산자를 반환하는 논리 연산자이다.

 

그러니까 상단에 올렸던 코드를 해석하자면 다음과 같은 말이 된다.

🍳 참과 거짓으로 나눌 수 있는 조건? 참일때 실행할 문장 ?? 참이 null이거나 undefined일때 실행할 문장 : 거짓일때 실행할 문장

 

src={item.author ? item.author.photoURL ?? 'URL주소' : 'URL 주소'}

 

상기 코드는 item의 author가 있으면 item.author의 photoURL을 사용하라는 의미이고 만약 author가 null 이거나 거짓일 경우 URL 주소를 사용하라는 의미가 된다. 

 

🥕 추가적으로 ?. 연산자도 존재하는데 해당 연산자는 무슨 의미일까?

 

해당 연산자는 Optional chaining 이라고 연산자이다. 예를들어 const로 정의된 object가 존재할 때 해당 object의 내용에 무언가가 있는지 확인하는 용도로 사용할 수 있다. 

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);

 

위와 같은 글에서 console로 dogName을 확인할 경우 adventurer의 object를 확인하게 되는데 dog가 없기 때문에 undefined을 반환하게 된다.

 

🥕 추가적으로 ?: 도 존재하는데 무슨 의미일까?

 

상기 연산자와 작성하는 연산자는 굉장히 유사한 형태를 가지고 있기에 헷갈릴 수 있다. ?: 연산자는 자바스크립트에서 제공하는 것이 아닌 Typescript에서 제공하는 형태라고 할 수 있다. 객체 타입을 의미하는데 바로 옵셔널 프로퍼티가 바로 ?:로 사용된다. 객체 타입은 일부 또는 모든 프로퍼티의 타입을 선택적인 타입, 즉 옵셔널로 지정할 수 있다. 이때 프로퍼티 이름 뒤에 ?를 붙이면 프로퍼티에 접근했을 때 런타임 오류가 발생되는 것이 아닌 undefined을 반환한다. 

 

---

참고 자료

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing#relationship_with_the_optional_chaining_operator

Nullish coalescing operator (??) - JavaScript | MDN

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html

Documentation - Everyday Types

 

---