Optional chaining
The ?. operator functions similarly to the. chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined.
developer.mozilla.org
React에서는 종종 다음과 같은 구문을 작성하곤 한다. data가 있으면 data.movie가 있는지 체크하고, 있다면 data.movie.medium_cover_image를, 없으면 "no image"를 출력한다.
{data && data.movie ? data.movie.medium_cover_image : "no image"}
그런데 Optional chaining이 Stage 4가 되면서 CRA 등에서 Optional chaining을 사용할 수 있게 되었습니다.
다음 코드는 data가 있으면 data.movie가 있는지 체크하고 해당 체크를 통과하면 medium...을 출력하라는 명령어이다.
data?.movie?.medium_cover_image
그런데 stage 4가 뭘까?
ECMAScript와 TC39
자바스크립트 언어의 표준인 ECMAScript와 TC39에 대해 소개합니다.
ahnheejong.name
ECMAScript 언어 표준을 TC39라는 위원회에서 지정한다. 해당 위원회에서 만든 표준의 예시로 ES6, ES9가 있다. 많이 익숙하지 않은가?
그런데 이 ECMAScript 표준에 지정되기 위해서는 5 단계 (stage)를 거쳐야 한다.
0단계: 허수아비 (stage 0: strawman)
1단계: 제안 (stage 1: proposal)
2단계: 초고 (stage 2: draft)
3단계: 후보 (stage 3: candidate)
4단계: 완료됨 (stage 4: finished)
4단계까지 올라온 프로포절은 별다른 이변이 없는 이상 다가오는 새 표준에 포함되어 발표된다
Optional chaining 같은 경우에는 2020년 4월 22일 기준으로 4단계라고 MDN에 표시되어 있다. 사실상 표준인 셈이며 CRA에서 사용할 수 있다는 의미이다.
'Programming Language > 🟨 Javascript' 카테고리의 다른 글
| 클로저와 클로저를 활용한 private 변수, getter/setter (0) | 2020.07.16 |
|---|---|
| 이벤트 위임 + data- 속성과 pointer-events (0) | 2020.07.15 |
| 바닐라 JS로 Modal 만들기 (0) | 2020.04.18 |
| 바닐라 JS로 Carousel Slider 만들기 (0) | 2020.04.18 |
| fetch 간단 활용법 정리 (0) | 2020.04.11 |
