혼동하지 마십시오 ?? ||와 함께 JavaScript: 차이점은 다음과 같습니다!

?? 대 || JavaScript: 잘 알려지지 않은 차이점

소개

JavaScript는 코드에서 정의되지 않은 값이나 null 값을 처리하는 여러 가지 방법을 제공합니다. 이 목적으로 사용되는 두 가지 일반적인 연산자는 nullish 병합 연산자(??)와 논리 OR 연산자(||)입니다. 이러한 연산자는 언뜻 유사해 보일 수 있지만 특정 상황에서는 동작이 크게 다를 수 있습니다. 특히 더 정확하고 버그 없는 코드를 작성하려는 초보자에게는 이 두 연산자의 차이점을 이해하는 것이 필수적입니다.

이 가이드에서는 ??의 차이점을 살펴보겠습니다. 그리고 || JavaScript에서는 예제를 통해 단계별로 분석하여 제로에서 영웅으로 빠르게 성장할 수 있습니다.

Nullish 병합 연산자(??)란 무엇입니까?

무효 병합 연산자 ?? null 또는 정의되지 않음을 처리할 때 대체 값을 제공하는 데 사용됩니다. 값이 null인지 정의되지 않았는지 확인하고, null이면 제공된 대체 값을 반환합니다.

구문:

let result = value ?? fallbackValue;

이 표현식에서 값이 null이거나 정의되지 않은 경우 fallbackValue가 반환됩니다.

예 1: Nullish 병합 연산자(??) 사용

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

이 예에서는 name이 null이므로 defaultName에 대체 항목으로 'John Doe'가 할당됩니다.

핵심 포인트:

• ?? null 또는 정의되지 않았는지 확인합니다.
• NOT null 또는 정의되지 않음이면 왼쪽 값을 반환하고, 그렇지 않으면 오른쪽 대체 값을 반환합니다.

논리 OR 연산자(||)란 무엇입니까?

논리 OR 연산자 || 대체 값에 사용되는 또 다른 연산자이지만 다르게 작동합니다. 표현식의 왼쪽이 falsy 값인지 확인합니다. JavaScript에서 허위 값에는 null, 정의되지 않음, false, 0, NaN 및 ''(빈 문자열)이 포함됩니다.

구문:

let result = value || fallbackValue;

값이 거짓인 경우 fallbackValue가 반환됩니다.

예 2: 논리 OR 연산자(||) 사용

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

이 경우 age는 0으로 거짓값이므로 defaultAge는 18로 할당됩니다.

핵심 포인트:

• || 잘못된 값이 있는지 확인합니다.
• 왼쪽 값이 거짓이면 오른쪽의 fallback 값을 반환합니다.

??의 주요 차이점 그리고 ||

얼핏보면 ?? 그리고 || 대체 값 제공이라는 동일한 목적을 수행하는 것처럼 보일 수 있지만 중요한 차이점이 있습니다.

• ?? 연산자는 null 또는 정의되지 않은 것만 확인합니다.
• || 운영자는 잘못된 값이 있는지 확인합니다.

이 미묘한 차이는 0, '' 또는 false와 같은 거짓이지만 유효한 값을 처리할 때 중요합니다.

예 3: ?? 대 || 잘못된 값으로

let result = value ?? fallbackValue;

여기서 count는 0입니다. 이는 유효한 값이지만 JavaScript에서는 거짓입니다.

• ??를 사용하면 defaultCount1은 0을 유지합니다. 0은 null도 정의되지도 않기 때문입니다.
• ||를 사용하면 defaultCount2는 10이 됩니다. 0은 잘못된 값이기 때문입니다.

언제 사용해야합니까 ?? 아니면 ||?

?? 사이의 선택 그리고 || 원하는 특정 동작에 따라 다릅니다.

사용 ?? 언제:

• 0, false 또는 ''와 같은 거짓 값에 영향을 주지 않고 null 또는 정의되지 않은 값을 구체적으로 처리하려고 합니다.
• 0(유효한 개수) 또는 ''(유효한 빈 문자열)과 같은 유효한 거짓 값을 보존해야 합니다.

예:

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

이 예에서는 빈 문자열 ''이 유효한 사용자 입력이므로 ?? 대체 항목으로 교체하지 않고 통과할 수 있습니다.

사용 || 언제:

• 모든 거짓 값(예: 0, false, NaN, '' 및 정의되지 않음)을 대체 값이 필요한 것으로 처리하려고 합니다.
• 0이나 false와 같은 값을 바꿔도 괜찮습니다.

예:

let result = value || fallbackValue;

여기서는 false를 falsy로 처리하고 fallback '로그인 안함'을 사용합니다.

일반적인 함정과 이를 피하는 방법

이제 차이점을 알았으니 초보자가 흔히 범하는 몇 가지 실수와 이를 방지하는 방법을 살펴보겠습니다.

실수 1: || 사용 유효한 거짓 값의 경우

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

문제: 점수를 0으로 표시하고 싶었지만 || 0은 거짓이므로 '점수 없음'으로 대체했습니다.

해결책: ??를 사용하세요. 0이 통과하도록 허용합니다.

let count = 0;
let defaultCount1 = count ?? 10; // Using nullish coalescing
let defaultCount2 = count || 10; // Using logical OR

console.log(defaultCount1); // Output: 0
console.log(defaultCount2); // Output: 10

실수 2: Nullish Coalescing에 대한 오해

let userInput = '';
let fallbackInput = userInput ?? 'default input';

console.log(fallbackInput); // Output: ''

설명: userPreference가 null이므로 fallback false가 사용됩니다. 이는 ??의 올바른 동작입니다.

자주 묻는 질문

사용할 수 있습니까 ?? 그리고 || 함께?

예, 필요한 경우 동일한 표현식의 다른 부분에 두 연산자를 모두 사용할 수 있습니다.

예:

let isLoggedIn = false;
let loginStatus = isLoggedIn || 'Not logged in';

console.log(loginStatus); // Output: 'Not logged in'

먼저 ??를 사용하여 null 또는 정의되지 않았는지 확인합니다. 그런 다음 ||를 사용하여 다른 잘못된 값을 확인합니다.

Nullish 병합 연산자는 모든 브라우저에서 지원됩니까?

?? 연산자는 최신 브라우저에서 지원되지만 이전 환경에서는 Babel과 같은 트랜스파일러를 사용해야 할 수도 있습니다.

각 연산자의 사용 사례는 무엇입니까?

• ??를 사용하세요. 특히 null 또는 정의되지 않음에 관심이 있는 경우
• 사용 || 잘못된 값을 처리하고 싶을 때.

하다 ?? 다른 잘못된 값으로 작업하시겠습니까?

아니요?? false, 0 또는 ''와 같은 다른 잘못된 값은 확인하지 않고 null 및 정의되지 않음만 확인합니다.

결론

??의 차이점 이해하기 그리고 || JavaScript에서는 강력하고 오류 없는 코드를 작성하는 데 매우 중요합니다. 두 연산자 모두 대체 값을 제공하는 데 도움이 되지만 거짓 값을 처리할 때 동작이 다릅니다. 사용 ?? null 또는 정의되지 않음을 확인해야 할 경우 || 잘못된 값이 있는지 확인하고 싶을 때.

이러한 연산자를 익히면 의도한 대로 정확하게 작동하는 보다 유연하고 정확한 코드를 작성할 수 있습니다.

위 내용은 혼동하지 마십시오 ?? ||와 함께 JavaScript: 차이점은 다음과 같습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!