JS "??"의 Nullish 병합 연산자 ?

3430 단어 webdevjavascriptes6
나는 Nullish Coalescing Operator에 대해 들은 이후로 매우 흥미로웠는데, 그 주된 이유는 그것이 매우 멋진 X'D처럼 들렸기 때문입니다.



나는 그것에 대해 더 배우기로 결정했습니다. 그래서 이 블로그. 가능한 한 간단하고 초보자에게 친숙하게 유지하려고 노력할 것입니다.

좋아, 그럼 바로 들어가자!

도대체 "??"가 뭐야? ?



null 병합 연산자는 구문적으로 '??'로 정의됩니다.
기본적으로 'null' 및 '정의되지 않은' 값을 계속 주시합니다.
예제를 통해 방법을 살펴보겠습니다.

다음 표현식이 있다고 가정합니다.const fruitCount = noOfApples ?? noOfOranges그러면 과일의 가치는 사과의 가치에 따라 달라질 것입니다. noOfApplesnull or undefined이면 fruitCount의 값은 noOfOranges와 같습니다. 반대로 noOfApples의 값이 null 또는 undefined 이외의 값이면 fruitCountnoOfApples와 같습니다.

내용을 요약하면 다음과 같습니다.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
    위의 예에서 ColdpiglifirstNamelastName이고 null가 "정의된"값("??"의미)을 제공하므로 nickName가 기록됩니다.

    알겠습니다. 하지만 '||'과 어떻게 다릅니까? ?


    ||??로 사용할 수 있지만 || 사용에 주의가 필요한 경우가 있습니다.

    그들 사이의 중요한 차이점은 다음과 같습니다.
  • || 첫 번째 truthy 값을 반환합니다.
  • ?? 첫 번째 정의된 값을 반환합니다.

  • 즉, ||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 병합 연산자가 더 이상 위협적으로 들리지 않기를 바랍니다.

    다음 시간까지 여러분!

    좋은 웹페이지 즐겨찾기