JavaScript Nullish 병합 연산자 이해(??)

Nullish 병합 연산자(??)는 ECMAScript 2020에 도입된 JavaScript의 기능입니다. 이 연산자를 사용하면 null이거나 정의되지 않은 변수의 기본값을 처리할 수 있습니다.

도입되기 전에는 논리 OR 연산자(||)가 이 목적으로 일반적으로 사용되었지만 모든 거짓 값을 처리하기 때문에 항상 적합하지는 않았습니다. ?? 연산자는 더욱 정확하고 명확한 대안을 제공합니다.

이 글에서는 Nullish Coalescing Operator의 개념, 장점, 사용 방법 및 몇 가지 예를 알아봅니다.

바로 뛰어들어볼까요!?

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

널 병합(??) 연산자는 값이 null인지 정의되지 않았는지 확인하는 데 사용되는 논리 연산자입니다.

왼쪽 피연산자가 null이거나 정의되지 않은 경우 오른쪽 피연산자(대체 값)를 반환합니다.

왼쪽 피연산자가 null이 아니거나 정의되지 않은 경우 왼쪽 피연산자를 반환합니다.

예:

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

이 예에서 userInput은 null이므로 ?? 연산자는 대체 값 'default'를 반환합니다.

이제 논리 OR || 운영자??

이것은 논리 OR ||와 다릅니다. 연산자이기 때문에 || 연산자는 왼쪽 피연산자가 null 또는 정의되지 않았을 뿐만 아니라 잘못된 값(예: false, 0, '', NaN 등)인 경우 오른쪽 피연산자를 반환합니다. 동안 ?? 연산자는 null 또는 정의되지 않은 항목에만 중점을 둡니다.

논리 OR(||) 연산자 대신 Nullish Coalescing(??) 연산자를 사용하는 이유는 무엇입니까?

?? 연산자는 null 및 정의되지 않은 값에만 초점을 맞추는 반면 || 연산자는 예상치 못한 결과를 초래할 수 있는 모든 거짓 값(예: false, 0, '', NaN 등)을 확인합니다.

예:

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

이 예에서는 개체에 age가 정의되어 있지 않으므로 ?? 연산자는 대체 값 '기본값'을 반환합니다.

이제 이를 더 잘 이해하기 위해 또 다른 예를 들어보겠습니다.

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

이 예에서 userInput은 거짓 값이고 null이나 정의되지 않은 빈 문자열이므로 ?? 연산자는 <빈 문자열>을 반환합니다.

이제 ||를 사용하면 어떤 일이 일어나는지 살펴보겠습니다. ?? 대신.

let userInput = '';
let inputValue = userInput || 'default';
console.log(inputValue); // Output: default

여기서는 || 연산자는 잘못된 값을 확인하므로 기본값을 반환합니다.

??를 사용하는 또 다른 이유 || 대신 연산자는 가독성입니다.

??를 사용하는 코드 목적이 null 및 정의되지 않음 처리와 직접 연결되어 있기 때문에 일반적으로 더 명확하고 읽기 쉽습니다. 변수가 null이거나 정의되지 않은 경우 대체 값을 제공하여 코드의 가독성을 높이고 오류 발생 가능성을 줄입니다.

Nullish 연산자 ?? 논리 연산자 AND/OR 사용

또한 ??를 사용할 수도 있습니다. 여러 조건을 확인하기 위해 다른 논리 연산자와 연산자를 사용하세요.

예:

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

이 예에서는 왼쪽 피연산자(userInput)가 null이므로 inputValue는 'default' 값을 가져옵니다.

이제 userInput이 null이 아닌 경우 어떻게 되는지 살펴보겠습니다.

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

앗!! 오류가 발생하나요??

근데 왜 이런 일이 일어나는 걸까요??

이는 Nullish 병합 연산자(??)를 ||와 같은 논리 연산자 내에서 직접 사용할 수 없기 때문에 발생합니다. OR 및 && AND 주위에 적절한 괄호가 없습니다.

그 이유는 JavaScript에 연산자 우선 순위에 대한 특정 규칙이 있기 때문입니다. 이는 다양한 연산자의 우선 순위 수준을 나타내며, 이는 작업이 평가되는 순서를 의미합니다.

예: ?? ||보다 우선순위가 낮습니다. 및 &&이므로 괄호 안에 넣으면 논리식 내에서 먼저 평가됩니다.

그렇다면 올바른 사용법은?? 논리 연산자와 직접 연결:

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

여기서 괄호는 JavaScript가 ??를 평가하도록 강제합니다. 먼저 연산을 수행한 후 그 결과를 'alternative'로 논리 OR 연산에 사용합니다.

결론

JavaScript에서 Nullish 병합 연산자(??)는 null 및 정의되지 않은 기본값을 처리하는 보다 명확하고 일관된 방법을 제공합니다. || 의도하지 않은 거짓 값을 반환하지 않도록 하여 연산자를 사용합니다. Nullish Coalescing Operator(??)를 사용하면 코드가 더욱 깔끔하고 읽기 쉬워지며 특히 선택적 값의 경우 오류 발생 가능성이 줄어듭니다. Nullish Coalescing Operator(??)를 이해하고 사용하면 코드를 더 효율적이고 유지 관리하기 쉽게 만들 수 있습니다.

오늘은 여기까지입니다.

도움이 되었기를 바랍니다.

읽어주셔서 감사합니다.

여기에 개발자를 위한 45가지 JavaScript 팁과 요령이 더 있습니다.

이와 같은 더 많은 콘텐츠를 보려면 여기를 클릭하세요.

X(Twitter)에서 저를 팔로우하시면 일상적인 웹 개발 팁을 보실 수 있습니다.

계속 코딩하세요!!

브라우저 콘솔을 열지 않고도 사이트에서 발생하는 오류, 경고 및 로그를 확인할 수 있는 브라우저 확장 프로그램인 toast.log를 확인해 보세요. toast.log에서 25% 할인을 받으려면 여기를 클릭하세요.

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