[JavaScript] && 과 ? 차이

자바스크립트에서 객체를 사용할 때 

data && data.list.map 과 data?.list.map 을 사용하는 경우가 있다. 

 

둘다 작동되는 것은 동일한데 어떤 경우에 뭘 사용하는게 좋을까? 

 

data && data.list.map 

&& 는 data가 truthy한 값 ( null, undefined, false, 0, NaN, "" [ 빈문자열 ]이 아닌 값 )일 때 data.list.map을 실행한다. 

여기서 data는 truthy한 값을 가지고 있지만 data.list가 없으면 data.list.map은 오류를 발생시킨다. 

 

data?.list.map 

? 는 data가 null 또는 undefined가 아닌 경우에만 data.list.map을 실행시킨다. 

 만약 data는 존재하지만 data.list가 없다면 오류를 발생시키지 않고 undefined를 반환한다. 

 

두 표현식을 모두 사용할 수 있지만 data?.list.map을 사용하는 쪽이 조금 더 안전하게 사용할 수 있다. 

data.list가 혹시라도 없어도 오류를 발생시키지 않기 때문이다.