> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 Nullish 병합 연산자 `??`

JavaScript의 Nullish 병합 연산자 `??`

Barbara Streisand
풀어 주다: 2024-09-19 16:31:09
원래의
559명이 탐색했습니다.

Nullish Coalescing Operator `??` in JavaScript

이 블로그에서는 JavaScript의 null 병합 연산자 ??를 살펴보겠습니다. 이를 논리 OR 연산자 ||와 비교하고, 우선 순위에 대해 논의하고, 사용법 이해에 도움이 되는 실제 예를 제공합니다. 뛰어들어 보세요!

무효 병합 연산자 ??

null 병합 연산자 ??null 또는 정의되지 않음을 처리할 때 기본값을 제공하는 데 사용됩니다. 왼쪽 피연산자가 null이거나 정의되지 않음인 경우 오른쪽 피연산자를 반환합니다. 그렇지 않으면 왼쪽 피연산자를 반환합니다.

구문:

result = value1 ?? value2;

로그인 후 복사

예:

let user = null;
let defaultUser = "Guest";

let currentUser = user ?? defaultUser;
console.log(currentUser); // Output: "Guest"

로그인 후 복사

설명:

  • 사용자는 null입니다.
  • ?? 연산자는 사용자null이기 때문에 defaultUser를 반환합니다.

|||과의 비교

논리 OR 연산자 ||는 발견된 첫 번째 진실 값을 반환합니다. 이는 왼쪽 피연산자가 거짓인 경우(false, 0, "", null, 정의되지 않음, NaN).

예:

let user = "";
let defaultUser = "Guest";

let currentUser = user || defaultUser;
console.log(currentUser); // Output: "Guest"

로그인 후 복사

설명:

  • user는 빈 문자열 ""(거짓)입니다.
  • || 연산자는 defaultUser를 반환합니다. user가 거짓이기 때문입니다.

주요 차이점

  • ??: null정의되지 않음만 거짓 값으로 간주합니다.
  • ||: 모든 거짓 값을 고려합니다(false0""null 정의되지 않음NaN).

예:

let user = 0;
let defaultUser = "Guest";

let currentUser1 = user ?? defaultUser;
let currentUser2 = user || defaultUser;

console.log(currentUser1); // Output: 0
console.log(currentUser2); // Output: "Guest"

로그인 후 복사

설명:

  • 사용자는 0입니다(||의 경우 거짓이지만 ??의 경우는 아님).
  • ?? 연산자는 0을 반환합니다. 사용자null 또는 정의되지 않음이 아니기 때문입니다.
  • || 연산자는 사용자가 거짓이므로 "Guest"를 반환합니다.

우선순위

무효 병합 연산자

??는 논리 OR 연산자 ||를 포함한 대부분의 다른 연산자보다 우선 순위가 낮습니다. 즉, ??이 포함된 표현식은 ||이 포함된 표현식 이후에 평가됩니다.

예:

let a = null;
let b = false;
let c = "Hello";

let result1 = a ?? b || c;
let result2 = a || b ?? c;

console.log(result1); // Output: "Hello"
console.log(result2); // Output: "Hello"

로그인 후 복사

설명:

  • 아?? bfalse를 반환합니다. 왜냐하면 anull이고 bfalse이기 때문입니다.
  • 거짓 || c "Hello"를 반환합니다. 왜냐하면 false는 거짓이고 c는 진실이기 때문입니다.
  • 아 || bfalse를 반환합니다. 왜냐하면 anull이고 bfalse
  • 이기 때문입니다.
  • 거짓 ?? c "Hello"를 반환합니다. false가 null 또는 정의되지 않음
이 아니기 때문입니다.

실제 사례

몇 가지 실제 사례를 통해 모든 내용을 정리하겠습니다.

사용 중 ?? 기본값의 경우
function getUserName(user) {
  return user.name ?? "Guest";
}

let user1 = { name: "Alice" };
let user2 = { age: 25 };

console.log(getUserName(user1)); // Output: "Alice"
console.log(getUserName(user2)); // Output: "Guest"

로그인 후 복사

설명:
  • user.namenull 또는 정의되지 않은 경우 ?? 연산자는
  • "Guest"
를 반환합니다. .

사용하기 || 기본값의 경우
function getUserName(user) {
  return user.name || "Guest";
}

let user1 = { name: "" };
let user2 = { age: 25 };

console.log(getUserName(user1)); // Output: "Guest"
console.log(getUserName(user2)); // Output: "Guest"

로그인 후 복사

설명:
  • user.name이 거짓인 경우(예: "") || 연산자는 "Guest"를 반환합니다.

요약

  • ?? (Nullish Coalescing Operator): 왼쪽 피연산자가 null 또는 정의되지 않음인 경우 오른쪽 피연산자를 반환합니다.
  • || (논리 OR 연산자): 발견한 첫 번째 진실 값을 반환합니다.
  • 우선순위: ?? 연산자는 || 연산자보다 우선순위가 낮습니다.

결론

널 병합 연산자 ??null 또는 정의되지 않음을 처리할 때 기본값을 제공하기 위한 JavaScript의 강력한 도구입니다. 논리 OR 연산자 ||와의 차이점과 우선 순위를 이해하면 더욱 강력하고 오류 없는 코드를 작성할 수 있습니다. JavaScript의 null 병합 연산자에 대한 이해를 심화하기 위해 계속 연습하고 탐구하세요.

JavaScript에 대한 더 자세한 블로그를 기대해 주세요! 즐거운 코딩하세요!

위 내용은 JavaScript의 Nullish 병합 연산자 `??`의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿