JS "??"의 Nullish 병합 연산자 ?
3430 단어 webdevjavascriptes6
나는 그것에 대해 더 배우기로 결정했습니다. 그래서 이 블로그. 가능한 한 간단하고 초보자에게 친숙하게 유지하려고 노력할 것입니다.
좋아, 그럼 바로 들어가자!
도대체 "??"가 뭐야? ?
null 병합 연산자는 구문적으로 '??'로 정의됩니다.
기본적으로 'null' 및 '정의되지 않은' 값을 계속 주시합니다.
예제를 통해 방법을 살펴보겠습니다.
다음 표현식이 있다고 가정합니다.
const fruitCount = noOfApples ?? noOfOranges
그러면 과일의 가치는 사과의 가치에 따라 달라질 것입니다. noOfApples
가 null or undefined
이면 fruitCount
의 값은 noOfOranges
와 같습니다. 반대로 noOfApples
의 값이 null
또는 undefined
이외의 값이면 fruitCount
는 noOfApples
와 같습니다.내용을 요약하면 다음과 같습니다.
a??b
와 같은 식에서 결과는 다음과 같습니다.a
, a에 null
또는 undefined
이외의 값이 있는 경우. b
, a가 null
또는 undefined
인 경우. 기본적으로 구문 설탕입니다.
result = (a !== null && a !== undefined) ? a : b;
Nullish 병합 연산자의 일반적인 사용 사례
1) 변수에 기본값 할당
null 병합 연산자를 사용하면 할당되지 않은 변수에 기본값을 쉽게 제공할 수 있습니다.
예를 들어,
let count;
const sum = count ?? 0;
위의 예에서 count는 값으로 초기화되지 않았기 때문에 sum의 값은 이 경우
0
인 두 번째 피연산자에 의해 제공됩니다.2) 정의되지 않은/null 값 목록에서 선택
사용자 이름을 표시해야 하는 시나리오를 고려해 보겠습니다.
let firstName = null;
let lastName = null;
let nickName = "Coldpigli";
// shows the first defined value:
console.log(firstName ?? lastName ?? nickName ?? "User");
// Coldpigli
위의 예에서
Coldpigli
와 firstName
가 lastName
이고 null
가 "정의된"값("??"의미)을 제공하므로 nickName
가 기록됩니다.알겠습니다. 하지만 '||'과 어떻게 다릅니까? ?
||
는 ??
로 사용할 수 있지만 ||
사용에 주의가 필요한 경우가 있습니다.그들 사이의 중요한 차이점은 다음과 같습니다.
즉,
||
는 false
, 0
, 빈 문자열 ""
및 null/undefined
를 구분할 수 없습니다.이것은
0
또는 false
를 값으로 처리하고 값이 없는 것이 아니라 처리하려는 경우 심각한 문제가 될 수 있습니다.예를 들어 이해해 봅시다.
let count = 0;
console.log(count || 100); //100
console.log(count ?? 100); //0
카운트 0은 무언가를 세는 변수에 대해 완벽하게 유효한 값이 될 수 있습니다.
count || 100
는 높이가 거짓 값인지 확인하고 0
는 거짓입니다.결과는 || 두 번째 인수인 100입니다.
count ?? 100
검사는 null/정의되지 않은 것으로 간주되며 그렇지 않습니다.따라서 결과는 "있는 그대로", 즉 0으로 계산됩니다.
?? 사용 && 또는 ||
Javascript는
??
또는 &&
와 함께 ||
를 사용하는 것을 금지합니다.따라서
a = b && c || d
와 같은 식은 구문 오류가 발생합니다.그러나 주변에 방법이 있습니다.
다음과 같이
()
를 사용하여 사용 우선순위를 명시적으로 지정할 수 있습니다.a = (b && c) || d
.위의 내용은 완벽하게 유효한 Javascript 표현입니다.
자, 이것으로 이 블로그를 마칩니다. 나는 nullish 병합 연산자가 더 이상 위협적으로 들리지 않기를 바랍니다.
다음 시간까지 여러분!
Reference
이 문제에 관하여(JS "??"의 Nullish 병합 연산자 ?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/coldpigli/nullish-coalescing-operator-in-js--4l2c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)