오늘은 js 최신 문법중에 하나인 optional chaining과 nullish coalescing에 대해서 알아 보고자 한다. 트렌드에 뒤쳐진다고 생각하진 않았는데 생각보다 많은 코드에서 볼수 있는 문법인데 나혼자만 안쓰고 있다는 느낌이 들고 대충은 뭔지 아는데 그것만큼 위험한게 없어서 이번기회에 확실하게 알고 가고자 하여 따로 공부를 해보자... 분명 나와 비슷한 개발자 혹은 개발 준비자들이 있을거니 아마도? 도움이 되지않을까 싶다.
optional chaining
mdn에서 정의한 optional chaining의 정의를 살펴 보자면
"_선택적인 연결 연산자( )를 사용하면 체인 의 ?.각 참조가 유효한지 확인할 필요 없이 연결된 개체 체인 깊숙이 위치한 속성 값을 읽을 수 있습니다.
_?.연산자는 참조 .가 null인 경우 ( null또는 undefined) 오류를 발생시키는 대신 식이 반환 값으로 단락 된다는 점을 제외하면 연결 연산자와 같습니다 undefined. 함수 호출과 함께 사용할 때 undefined주어진 함수가 존재하지 않으면 반환합니다.
_따라서 참조가 누락될 가능성이 있는 경우 연결된 속성에 액세스할 때 표현식이 더 짧고 단순해집니다. 또한 어떤 속성이 필요한지에 대한 알려진 보장이 없을 때 개체의 콘텐츠를 탐색하는 동안 도움이 될 수 있습니다."
즉 뭔말이냐면 dot notation을 이용하여 object의 키값을 읽어올때 ?.(optional chaining)을 통해 object의 유효검사가 가능하다는 뜻이다. 유효검사를 통해 만약 object가 유효하다(키값이 있다.) 라고 판단되면 key값을 리턴해주고 아니면 undefined를 리턴한다.
예시코드
const brad = {
age:29,
name:"brad",
home:"yongin",
favorite:{
food:"gogi",
beverage:"cola",
game:"lol"
}
}
const bradFavorite = brad.favorite?.beverage이 경우 brad안에 favorite이라는 키가 있고 그안에 beverage라는 값이 있어 그것을 읽어오는데 만약 없다면??
const bradFavorite = const brad.favorite.sports 위에 예시코드를 보면 favorite안에 sports라는 키값은 없다 그러면 어떤걸 반환하냐면 typeError가 리턴되면 프로세스가 종료되버린다. 하지만 optional chaining을 쓴다면
const bradFavorite = brad.favorite?.sports 이렇게 되면 typeError대신 undefined를 리턴하고 프로세스가 계속된다. 이게 처음 볼때는 "그래서 어쩌라고" 라고 생각될수 있는데 쓰다보면 생각보다 편하고 유용하다.
nullish coalescing
mdn에서 정의한 nullish coalescing을 보자면
"nullish 병합 연산자( ??) 는 왼쪽 피연산자가 nullor 이면 오른쪽 피연산자를 undefined반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.
이것은 논리 OR( ||) 연산자 의 특수한 경우로 볼 수 있으며, 이는 왼쪽 피연산자가 or 뿐만 아니라 거짓 값 이면 오른쪽 피연산자를 반환합니다 . 즉, 를 사용 하여 다른 변수에 일부 기본값을 제공하는 경우 일부 잘못된 값을 사용 가능한 것으로 간주하면(예: 또는 ) 예기치 않은 동작이 발생할 수 있습니다."
이것도 그렇게 어려운 건 아니다. 우리가 흔히들 사용하는 삼항연산자랑 비슷한 컨셉인대 만약 ??(nullish coalesing의 기호)를 기준으로 왼쪽항이 null이면 오른쪽항이 undefined가 되고 왼쪽항이 null이 아니면 오른쪽항이 리턴된다. 정도로 알면 쉽다.
1번 예제
const yongin = null ?? "경기도"
console.log(yongin) //undefined
2번 예제
const yongin = "기흥구" ?? "동백동"
console.log(yongin) //"동백동"
3번 예제
const brad = {
age:29,
name:"brad",
home:"yongin",
favorite:{
food:"gogi",
beverage:"cola",
game:"lol"
}
}
const bradFavorite = brad.favorite?.food ?? "고기"
console.log("고기")
4번 예제
const brad = {
age:29,
name:"brad",
home:"yongin",
favorite:{
food:"gogi",
beverage:"cola",
game:"lol"
}
}
const bradFavorite = brad.favorite?.sports ?? "고기"
console.log(bradFavorite). //"고기"3번째 까지는 그러려니 하겠는데 4번째에 왜 고기가 나오는지 나도 첨에 헤깔렸는데 알아보니 왼쪽항이 null이 아니라면 오른쪽항을 리턴한다 여서 왼쪽항이 null 이 아니라 undefined여서 오른쪽항이 리턴된것 같다.
생각보다 자주쓰이는 optional chaining과 nullish coalescing 이번기회에 알아두고 잘써봐야겠다.
