소개

가장 널리 사용되는 프로그래밍 언어 중 하나인 JavaScript는 개발자에게 다양한 논리 작업을 처리할 수 있는 다양한 연산자를 제공합니다. 이 중에서 논리 OR(||) 및 Nullish Coalescing(??) 연산자는 기본값을 관리하고 Nullish 값을 처리하기 위한 기본 도구입니다. 이 글에서는 이 두 연산자의 차이점, 사용 사례, 사용법을 설명하기 위한 실용적이고 복잡한 예를 자세히 살펴보겠습니다.

논리 OR(||) 연산자 이해

JavaScript의 논리 OR(||) 연산자는 피연산자 중 첫 번째 참 값을 반환하거나 참 값이 없는 경우 마지막 값을 반환하는 데 널리 사용됩니다. 주로 기본값을 설정하는 데 사용됩니다.

통사론

result = operand1 || operand2;

작동 방식

|| 연산자는 왼쪽에서 오른쪽으로 평가하며, 참이면 첫 번째 피연산자를 반환합니다. 그렇지 않으면 두 번째 피연산자를 평가하고 반환합니다.

예 1: 기본값 설정

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

이 예에서 userInput은 빈 문자열(falsy)이므로 defaultText가 반환됩니다.

예 2: 여러 값 처리

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

여기서 firstName은 null(falsy)이므로 lastName은 사실대로 반환됩니다.

논리 OR(||) 연산자의 제한 사항

||의 주요 제한 사항 연산자의 특징은 0, NaN, '', false, null 및 undefine과 같은 여러 값을 거짓으로 처리한다는 것입니다. 이러한 값이 유효하도록 의도된 경우 예상치 못한 결과가 발생할 수 있습니다.

Nullish Coalescing(??) 연산자 소개

Nullish Coalescing(??) 연산자는 ES2020에 도입된 JavaScript에 최근 추가된 것입니다. 이는 null 또는 정의되지 않음이 명시적으로 유일한 null 값으로 고려되는 경우를 처리하도록 설계되었습니다.

통사론

result = operand1 ?? operand2;

작동 방식

?? 연산자는 왼쪽 피연산자가 null이거나 정의되지 않은 경우 오른쪽 피연산자를 반환합니다. 그렇지 않으면 왼쪽 피연산자를 반환합니다.

예 1: 기본값 설정

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

이 예에서 userInput은 null 또는 정의되지 않은 빈 문자열이므로 반환됩니다.

예 2: Nullish 값 처리

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

여기서 firstName은 null이므로 lastName은 null도 아니고 정의되지도 않은 상태로 반환됩니다.

논리 OR(||) 및 Nullish 병합(??) 연산자 비교

예 1: 거짓 값 비교

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

이 예에서 0은 ||에 의해 거짓으로 간주됩니다. 연산자이지만 ??에 유효한 값입니다. 운영자.

예 2: 두 연산자를 함께 사용

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

여기서 userInput은 null이므로 fallbackText는 ??에서 사용됩니다. 운영자. 그런 다음 결과는 || 연산자이지만 fallbackText는 진실이므로 반환됩니다.

논리 OR(||) 및 Nullish 병합(??) 연산자의 복잡한 예

예 3: 객체를 사용한 중첩 작업

중첩된 개체 속성에 대한 기본값을 설정해야 하는 시나리오를 생각해 보세요.

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가 사용됩니다.

예 4: 기본값이 있는 함수 매개변수

함수 매개변수를 처리할 때 누락된 인수에 대한 기본값을 제공할 수 있습니다.

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!'

이 예에서 이름 매개변수는 ?? 이름이 null이거나 정의되지 않은 경우 'Guest'의 기본값을 설정하는 연산자입니다. 인사말 매개변수는 || 인사말이 null 또는 정의되지 않은 값이 아닌 거짓 값인 경우 'Hello'의 기본값을 설정하는 연산자입니다.

예제 5: 선택적 체이닝과 결합

선택적 연결(?.)은 ||와 결합될 수 있습니다. 그리고 ?? 깊게 중첩된 객체 속성을 안전하게 처리합니다.

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'

이 예에서 선택적 연결은 속성 경로의 일부가 존재하지 않는 경우 정의되지 않은 값을 반환하여 오류를 방지합니다. || 그리고 ?? 그런 다음 연산자는 적절한 기본값을 제공합니다.

모범 사례 및 사용 사례

1. 사용 || 광범위한 기본값 설정:

   • 거짓 조건 범위(예: 빈 문자열, 0, NaN)에 대해 기본값을 제공해야 하는 경우.

2. 사용 ?? 정확한 Nullish 검사를 위해:

   • 다른 거짓 값에 영향을 주지 않고 null 또는 정의되지 않음을 구체적으로 처리하려는 경우.

3. 둘 다 결합:

   • ||의 조합을 사용합니다. 그리고 ?? 참/거짓 값과 null 값을 모두 명확하게 처리해야 하는 복잡한 시나리오의 경우.

자주 묻는 질문

논리 OR(||) 연산자의 기능은 무엇입니까?
논리 OR(||) 연산자는 피연산자 중 첫 번째 참 값을 반환하거나 참 값이 없으면 마지막 피연산자를 반환합니다.

Nullish Coalescing(??) 연산자는 언제 사용해야 합니까?
Nullish Coalescing(??) 연산자는 0이나 빈 문자열과 같은 다른 허위 값을 Nullish로 처리하지 않고 특별히 Null 또는 정의되지 않음을 처리해야 하는 경우 사용합니다.

두 연산자를 함께 사용할 수 있나요?
예, 둘 다 사용할 수 있습니다 || 그리고 ?? 서로 다른 유형의 값을 처리하고 코드 논리가 다양한 사례를 효과적으로 처리하도록 보장합니다.

어떻게 || 빈 문자열을 처리하시겠습니까?
|| 연산자는 빈 문자열을 거짓으로 처리하므로 첫 번째 피연산자가 빈 문자열이면 다음 피연산자를 반환합니다.

Nullish Coalescing(??) 연산자는 모든 브라우저에서 지원됩니까?
?? 연산자는 ES2020을 지원하는 최신 브라우저 및 환경에서 지원됩니다. 이전 환경의 경우 Babel과 같은 트랜스파일러를 사용해야 할 수도 있습니다.

||의 차이점은 무엇인가요? 그리고 ?? 연산자?
주요 차이점은 || 여러 값을 거짓(예: 0, '', false)으로 간주하는 반면 ?? null과 undefine은 null 값으로만 ​​처리됩니다.

결론

JavaScript의 논리 OR(||) 연산자와 Nullish Coalescing(??) 연산자 간의 차이점을 이해하는 것은 강력하고 버그 없는 코드를 작성하는 데 중요합니다. || 연산자는 광범위한 불이행 시나리오에 적합하고 ?? null 값을 정밀하게 처리하는 데 적합합니다. 이러한 연산자를 적절하게 사용하면 코드가 다양한 데이터 상태를 효과적으로 처리하여 원활한 사용자 경험을 제공할 수 있습니다.