옵셔널 체이닝 ' ?? '

모듈 / null 병합 연산자 '??

모듈이란 무엇인가 ?

: 하나의 파일의 의미한다.
(모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나)
자바스크립트가 커져가면서 간단한 기능만 개발했던 시대에서 지금은 파일을 나누어서 재사용 할수 있도록 하나의 기능과 라이브러리를 묶으서 사용할 수 있도록 모듈로 만들어서 사용한다.

초반) 1 ) require.js라는 라이브러리 2)nodejs : commonJS를 사용

• 모듈은 자신만의 스코프를 갖습니다. 모듈 간 기능 공유는 import/export로 할 수 있습니다. 모듈 내 코드는 단 한 번만 실행.

null 병합 연산자 '?? 란 ?

: 최근에 추가된 문법이라고 한다.
?? 를 사용할 경우. (null / undefined) 인지 확인 하는 연산자.

굉장히 좋은 문법이라고 생각한다.( 실제로 실무에서 사용해본 결과 ) - 장점
프론트 엔드 개발자 라면 값을 뿌려 주기 위해서 예외 처리를 api 값을 받아왔을 때 처리를 해준다.
하지만 한 컬럼의 값에 null/undefined가 들어갔는지 확인 할 수가 없으며, 어느 컬럼에 그 값이 들어갔는지 알 수 없다. 그 상태에서 실행을 하면, 컬럼 값이 비어 있기 때문에 에러가 떨어질 것이다. 또한, 문법도 전보다 짧아져서 완전 편하다.

그전에는

Ex) 
let a = null;
const data = ( a !== null || a !==  undefined ) ? 100 : 200 ;

그 후

let a = null;
const data = a ?? '-'

a 값이 null 일 경우 '-' 을 넣어준다.
a 값이 100; 일 경우에는 data는 100을 보여줄 것이다.
예외 처리를 물음표 2개로 확인 할 수 있으니 짱 편하다.

업무적으로 사용 할 때는

<p>{item?.name ??  '홍길동'}</p>
<p>{item?.fullName ??  '홍길동과 아이들'}</p>

이런 식으로 컬럼 값에 null/undefined가 있을 경우에는 '홍길동' ,'홍길동과 아이들'을 넣어주기 때문에 아주 편리하다.

궁금한점)
그럼 변수 값을 체크 해주는 것은 논리 연산자로도 사용할수 있지 않나 ?

?? Or ||

• ||는 첫 번째 truthy 값을 반환합니다.
• ??는 첫 번째 정의된(defined) 값을 반환합니다.

쓰이는 방식에 따라서 사용해주면 좋을거 같다.