가장 인기 있는 프로그래밍 언어 중 하나인 JavaScript는 개발자에게 다양한 논리 연산을 처리할 수 있는 다양한 연산자를 제공합니다. 이 중에서 논리 OR(||) 및 Nullish Coalescing(??) 연산자는 기본값을 관리하고 Nullish 값을 처리하기 위한 기본 도구입니다. 이 기사에서는 두 연산자의 차이점, 사용 사례, 사용법을 설명하는 실용적이고 복잡한 예를 자세히 살펴보겠습니다.
JavaScript의 논리 OR(||) 연산자는 피연산자 중 첫 번째 참 값을 반환하거나 참 값이 없는 경우 마지막 값을 반환하는 데 널리 사용됩니다. 주로 기본값을 설정하는 데 사용됩니다.
result = operand1 || operand2;
|| 연산자는 왼쪽에서 오른쪽으로 평가하며, 참이면 첫 번째 피연산자를 반환합니다. 그렇지 않으면 두 번째 피연산자를 평가하여 반환합니다.
let userInput = ''; let defaultText = 'Hello, World!'; let message = userInput || defaultText; console.log(message); // Output: 'Hello, World!'
이 예에서 userInput은 빈 문자열(falsy)이므로 defaultText가 반환됩니다.
let firstName = null; let lastName = 'Doe'; let name = firstName || lastName || 'Anonymous'; console.log(name); // Output: 'Doe'
여기서는 firstName이 null(falsy)이므로 lastName이 그대로 반환됩니다.
||의 주요 제한 사항 연산자의 특징은 0, NaN, '', false, null 및 undefine과 같은 여러 값을 거짓으로 처리한다는 것입니다. 이러한 값이 유효하도록 의도된 경우 예상치 못한 결과가 발생할 수 있습니다.
Nullish Coalescing(??) 연산자는 ES2020에 도입된 JavaScript에 최근 추가된 연산자입니다. 이는 null 또는 정의되지 않음이 명시적으로 유일한 null 값으로 고려되는 경우를 처리하도록 설계되었습니다.
result = operand1 ?? operand2;
?? 연산자는 왼쪽 피연산자가 null이거나 정의되지 않은 경우 오른쪽 피연산자를 반환합니다. 그렇지 않으면 왼쪽 피연산자를 반환합니다.
let userInput = ''; let defaultText = 'Hello, World!'; let message = userInput ?? defaultText; console.log(message); // Output: ''
이 예에서 userInput은 null이나 정의되지 않은 빈 문자열이므로 반환됩니다.
let firstName = null; let lastName = 'Doe'; let name = firstName ?? lastName ?? 'Anonymous'; console.log(name); // Output: 'Doe'
여기서 firstName은 null이므로 lastName은 null도 아니고 정의되지도 않은 상태로 반환됩니다.
let value1 = 0; let value2 = ''; let resultOR = value1 || 'default'; let resultNullish = value1 ?? 'default'; console.log(resultOR); // Output: 'default' console.log(resultNullish); // Output: 0
이 예에서 0은 ||에 의해 거짓으로 간주됩니다. 연산자이지만 ??에 유효한 값입니다. 연산자입니다.
let userInput = null; let fallbackText = 'Default Text'; let message = (userInput ?? fallbackText) || 'Fallback Message'; console.log(message); // Output: 'Default Text'
여기서 userInput은 null이므로 fallbackText는 ??에서 사용됩니다. 연산자. 그런 다음 결과는 || 연산자이지만 fallbackText는 진실이므로 반환됩니다.
중첩된 개체 속성에 대한 기본값을 설정해야 하는 시나리오를 생각해 보세요.
let userSettings = { theme: { color: '', font: null } }; let defaultSettings = { theme: { color: 'blue', font: 'Arial' } }; let themeColor = userSettings.theme.color || defaultSettings.theme.color; let themeFont = userSettings.theme.font ?? defaultSettings.theme.font; console.log(themeColor); // Output: 'blue' console.log(themeFont); // Output: 'Arial'
이 예에서는 userSettings.theme.color가 빈 문자열이므로 defaultSettings.theme.color가 사용됩니다. userSettings.theme.font가 null이므로 defaultSettings.theme.font가 사용됩니다.
함수 매개변수를 처리할 때 누락된 인수에 대한 기본값을 제공할 수 있습니다.
function greet(name, greeting) { name = name ?? 'Guest'; greeting = greeting || 'Hello'; console.log(`${greeting}, ${name}!`); } greet(); // Output: 'Hello, Guest!' greet('Alice'); // Output: 'Hello, Alice!' greet('Bob', 'Hi'); // Output: 'Hi, Bob!' greet(null, 'Hey'); // Output: 'Hey, Guest!'
이 예에서 name 매개변수는 ?? 이름이 null이거나 정의되지 않은 경우 'Guest'의 기본값을 설정하는 연산자입니다. 인사말 매개변수는 || 인사말이 null 또는 정의되지 않은 값이 아닌 거짓 값인 경우 'Hello'의 기본값을 설정하는 연산자입니다.
선택적 연결(?.)은 ||와 결합될 수 있습니다. 그리고 ?? 깊게 중첩된 객체 속성을 안전하게 처리합니다.
let user = { profile: { name: 'John Doe' } }; let userName = user?.profile?.name || 'Anonymous'; let userEmail = user?.contact?.email ?? 'No Email Provided'; console.log(userName); // Output: 'John Doe' console.log(userEmail); // Output: 'No Email Provided'
이 예에서 선택적 연결은 속성 경로의 일부가 존재하지 않는 경우 정의되지 않은 값을 반환하여 오류를 방지합니다. || 그리고 ?? 그런 다음 연산자는 적절한 기본값을 제공합니다.
사용 || 광범위한 불이행의 경우:
??를 사용하세요. 정확한 Nullish 검사를 위해:
두 가지를 결합:
논리 OR(||) 연산자의 기능은 무엇인가요?
논리 OR(||) 연산자는 피연산자 중 첫 번째 참 값을 반환하거나 참 값이 없으면 마지막 피연산자를 반환합니다.
Nullish Coalescing(??) 연산자는 언제 사용해야 하나요?
0과 같은 거짓 값이나 빈 문자열을 null로 처리하지 않고 특별히 null 또는 정의되지 않음을 처리해야 하는 경우 Nullish Coalescing(??) 연산자를 사용하세요.
두 연산자를 함께 사용할 수 있나요?
예, 둘 다 사용할 수 있습니다 || 그리고 ?? 서로 다른 유형의 값을 처리하고 코드 논리가 다양한 사례를 효과적으로 처리하도록 합니다.
어떻게 || 빈 문자열을 처리하시겠습니까?
|| 연산자는 빈 문자열을 거짓으로 처리하므로 첫 번째 피연산자가 빈 문자열이면 다음 피연산자를 반환합니다.
Nullish Coalescing(??) 연산자는 모든 브라우저에서 지원되나요?
?? 연산자는 ES2020을 지원하는 최신 브라우저 및 환경에서 지원됩니다. 이전 환경의 경우 Babel과 같은 트랜스파일러를 사용해야 할 수도 있습니다.
||의 차이점은 무엇인가요? 그리고 ?? 운영자?
주요 차이점은 || 여러 값을 거짓(예: 0, '', false)으로 간주하는 반면 ?? null 및 undefound는 null 값으로만 처리됩니다.
JavaScript의 논리 OR(||) 연산자와 Nullish Coalescing(??) 연산자의 차이점을 이해하는 것은 강력하고 버그 없는 코드를 작성하는 데 중요합니다. || 연산자는 광범위한 불이행 시나리오에 적합하고 ?? nullish 값을 정밀하게 처리하는 데 적합합니다. 이러한 연산자를 적절하게 사용하면 코드가 다양한 데이터 상태를 효과적으로 처리하여 원활한 사용자 경험을 제공할 수 있습니다.
위 내용은 JavaScript 잠금 해제: 논리 OR(||) 대 Nullish 병합 연산자(??)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!