일반 사람들을 위한 Nullish Coalescing(JS) 튜토리얼

안녕하세요! JavaScript 코드에서 null 또는 정의되지 않은 값을 처리하는 데 어려움을 겪은 적이 있습니까? Nullish 병합은 이를 훨씬 쉽게 만드는 데 도움이 되는 새로운 기능입니다. 이번 포스팅에서는 nullish coalescing에 대해 설명하겠습니다.

이는 간단한 용어, 재미있는 예, 복잡한 전문 용어가 없음을 의미합니다. 결국에는 깔끔하고 간결한 JS 코드를 즉시 작성하게 될 것입니다.

그렇다면 nullish coalescing이란 정확히 무엇입니까? 기본적으로 이는 null이거나 정의되지 않은 항목이 있을 때 기본값을 제공하는 짧고 간단한 방법입니다. 복잡하게 중첩된 삼항이나 논리 OR 문 대신 이중 물음표 연산자(??)를 사용하여 기본값으로 병합할 수 있습니다.

혼란스럽게 들리나요? 걱정하지 마세요. 따라하기 쉬운 몇 가지 예를 통해 어떻게 작동하는지 보여드리겠습니다. 안전벨트를 매세요. 정말 즐거운 여행이 될 거예요!

Nullish 병합 연산자는 정확히 무엇입니까??

JavaScript에서 null 값을 처리하는 데 어려움을 겪은 적이 있습니까? 나는 알고 있다. 자, 친구여, 널 병합 연산자(??)를 소개하겠습니다. 이 작은 사람은 당신의 삶을 훨씬 더 쉽게 만들어 줄 것입니다.

그렇다면 nullish 병합 연산자는 정확히 무엇입니까? 기본적으로 이는 null이거나 정의되지 않은 항목이 있을 때 기본값을 제공하는 지름길입니다. 다음을 작성하는 대신:

 let name = obj.name || 'default name';

이제 간단히 다음과 같이 작성할 수 있습니다.

 let name = obj.name ?? 'default name';

?? 연산자는 null이 아닌 경우(null 또는 정의되지 않음을 의미) 왼쪽을 반환하고, 그렇지 않으면 오른쪽을 반환합니다. 따라서 위의 예에서 obj.name null이 아니거나 정의되지 않은 경우 name은 obj.name 으로 설정됩니다. 그러나 obj.name null이거나 정의되지 않은 경우 name은 '기본 이름'이 됩니다.

꽤 편리하죠? 다른 예:

 let age = ageInput ?? 25; // Sets age to ageInput if not nullish, otherwise 25 let email = user.email ?? 'no email provided'; let hobbies = obj.hobbies ?? []; // Sets hobbies to obj.hobbies if not nullish, otherwise an empty array

이것이 JavaScript의 조건부 논리를 단순화하는 데 도움이 되기를 바랍니다.

우리 모두가 공감할 수 있는 실제 사례

물건을 사러 갔는데 몇 달러가 부족하다는 사실을 깨달은 적이 있습니까? 우리 모두 거기에 가본 적이 있어요. Nullish coalescing은 실제로 사고 싶은 것을 감당할 수 있도록 주머니에 몇 달러를 추가로 찾는 것과 같습니다.

평소 아침에 커피를 마시기 위해 가장 좋아하는 커피숍으로 향한다고 가정해 보겠습니다. 당신은 주문할 준비가 된 3달러를 손에 들고 카운터로 올라갑니다. 그런데 바리스타가 총액을 말하면 세금을 제외하고 3.50달러가 나옵니다.

Nullish coalescing은 갑자기 주머니에 1달러가 더 있어서 커피를 마실 수 있다는 것을 기억하는 것과 같습니다. 휴!

JavaScript에서 nullish 병합은 무언가가 null 또는 정의되지 않은 것으로 확인되는 경우 기본값을 제공하는 방법입니다. 예를 들어, 값을 반환할 수도 있고 반환하지 않을 수도 있는 함수가 있다고 가정해 보겠습니다.

 function getCoffeePrice() { // Returns $3.50 or undefined } let price = getCoffeePrice() ?? '$3.50';

여기서 getCoffeePrice() 정의되지 않은 값을 반환하면 ?? 덕분에 price 기본적으로 '$3.50' 이 됩니다. 무효 병합 연산자. 따라서 어느 쪽이든 커피 가격이 보장됩니다.

Nullish 병합을 사용하면 변수가 null이거나 정의되지 않은 경우 대체 기본값을 제공하여 코드의 탄력성을 높일 수 있습니다. 커피숍에서 주머니에 여분의 달러를 찾는 것과 마찬가지로 거래를 완료하는 데 필요한 것을 확보할 수 있습니다. 꽤 편리하죠?

이제 전문가처럼 nullish coalescing을 이해하고 있으므로 안심할 수 있습니다. 즐거운 코딩과 커피를 즐겨보세요!

JavaScript에서 Nullish Coalescing 사용

null 병합 연산자(??)는 null이 아닌 경우 왼쪽 피연산자를 반환합니다. 그렇지 않으면 오른쪽 피연산자를 반환합니다.

혼란스러운? 그것을 분석해 봅시다. "nullish" 값은 null이거나 정의되지 않습니다. 그래서 ?? 연산자는 왼쪽 값이 null인지 확인하고, 그렇다면 대신 오른쪽 값을 반환합니다.

예를 들어:

 const name = bob ?? 'anonymous';

bob이 정의된 경우 name 값이 'bob'에 할당됩니다. bob이 정의되지 않았거나 null이면 대신 'anonymous' 문자열이 할당됩니다.

이것이 왜 유용한가요?

?? 없이 운영자라면 이렇게 해야 합니다:

 const name = bob !== null && bob !== undefined ? bob : 'anonymous';

?? 연산자는 본질적으로 동일한 작업을 수행하기 위해 더 짧고 깔끔한 구문을 제공합니다.

변수 , 함수 인수 , 객체 속성 등 JavaScript의 어느 곳에서나 사용할 수 있습니다. 일반적으로 || (또는) 연산자를 기본값으로 사용할 수 있습니다. 이제 ??를 사용할 수 있습니다. "nullish" 기본값의 경우.

몇 가지 예:

 const foo = null ?? 'default string'; // foo is 'default string' const bar = 0 ?? 42; // bar is 0 const qux = 0 || 42; // qux is 42 - || returns first truthy value function doSomething(x = 0) { x = x ?? 10; // If x is nullish, set default of 10 console.log(x); } doSomething(null); // Prints 10 doSomething(5); // Prints 5

이것이 nullish 병합 연산자를 설명하는 데 도움이 되기를 바랍니다.

Nullish Coalescing이 OR(||)보다 나은 이유

OR(||) 연산자는 첫 번째 실제 값을 반환합니다.

OR(||) 연산자는 처음 발견한 실제 값을 반환하는 방식으로 작동합니다. 두 값이 모두 거짓이면 마지막 값을 반환합니다. 예를 들어:

 let name = null; let user = name || 'John'; // user is 'John'

여기서 name 은 null(falsy)이므로 user 두 번째 값 'John'을 얻습니다.

Nullish 병합 연산자(??)가 더 똑똑합니다.

Nullish Coalescing Operator(??)는 ES2020에 도입되었으며 OR(||)보다 조금 더 똑똑합니다. 첫 번째로 정의된 값(null/정의되지 않음)을 반환합니다. 따라서 첫 번째 값이 빈 문자열, 0 또는 false이면 해당 값이 반환됩니다. 예를 들어:

 let name = ''; let user = name ?? 'John'; // user is ''

여기서 name 은 빈 문자열이므로 user name (첫 번째 정의된 값)을 가져옵니다.

Nullish Coalescing Operator를 사용하면 더 깔끔한 방식으로 기본값을 제공할 수 있습니다. 0, 빈 문자열, false 등과 같은 잘못된 값에 대해 걱정하지 않고 null/정의되지 않은 값에 대한 기본값을 설정할 수 있습니다.

예를 들어, 사용자의 나이를 반환하는 함수가 있지만 때로는 나이가 null인 경우도 있습니다.

 function getAge() { return age; // could be null } let userAge = getAge() || 30; // Uses OR, not ideal

여기서 age 가 0, '' 또는 false인 경우 userAge 30으로 잘못 표시됩니다.

Nullish Coalescing Operator를 사용하면 이 문제가 해결됩니다.

 let userAge = getAge() ?? 30; // Uses ??

이제 userAge age 가 null이거나 정의되지 않은 경우에만 30이 됩니다. 0과 같은 다른 거짓 값이 사용됩니다.

따라서 요약하자면, null/미정의에 대한 기본값을 제공하고 0, 빈 문자열 또는 false와 같은 허위 값에 대해서는 기본값을 제공하지 않으려면 OR(||) 대신 Nullish 병합 연산자(??)를 사용하십시오.

코드가 더 깨끗해지고 버그가 발생할 가능성이 줄어듭니다!

Nullish Coalescing에 대한 일반적인 질문

JavaScript의 새롭고 멋진 Nullish Coalescing 연산자(??)에 대해 들어보셨고 몇 가지 질문이 있습니다. 걱정하지 마세요. 제가 도와드리겠습니다!

Nullish 병합은 어떤 데이터 유형과 함께 작동합니까?

• Nullish 병합은 다음을 포함하여 JavaScript의 모든 데이터 유형에서 작동합니다.
• 숫자: 0 ?? 1 // 1을 반환합니다.
• 문자열: '' ?? '안녕하세요' // '안녕하세요'를 반환합니다.
• 부울: 거짓 ?? true // true를 반환합니다.
• 사물: {} ?? {이름: 'John'} // {이름: 'John'}을 반환합니다.
• 배열: [] ?? [1, 2, 3] // [1, 2, 3]을 반환합니다.
• 그리고 더!

||의 차이점은 무엇인가요? (또는) 및 ?? (Nullish Coalescing) 연산자?

|| (OR) 연산자는 왼쪽 피연산자가 거짓(false, 0, 빈 문자열, null, 정의되지 않음, NaN)인 경우 오른쪽 피연산자를 반환합니다.

?? (Nullish Coalescing) 연산자는 왼쪽 피연산자가 null이거나 정의되지 않은 경우에만 오른쪽 피연산자를 반환합니다.

그래서 중요한 차이점은 ?? 0과 빈 문자열을 유효한 값으로 간주하는 반면, || 하지 않습니다.

언제 사용해야합니까 ?? 끝났어 ||?

사용 ?? null 또는 정의되지 않음에 대한 기본값을 제공하고 싶지만 0과 빈 문자열을 유효한 값으로 간주하는 경우입니다.

사용 || "거짓" 값에 대한 대체를 제공하려는 경우.

이것이 Nullish Coalescing 연산자에 대해 가졌던 뜨거운 질문 중 일부를 해결하는 데 도움이 되기를 바랍니다! 다른 질문이 있으면 알려주세요.

결론

이제 nullish 병합과 JavaScript에서 작동하는 방식에 대해 모두 알게 되었습니다. 아주 간단하죠? 이 작은 연산자는 기본값을 간결하게 제공하여 시간을 절약하고 코드를 더욱 깔끔하게 만들 수 있습니다.

그러니 가서 무효한 가치들을 마음껏 합치세요! 당신은 현대적인 JavaScript 기능을 잘 익히고 있습니다.

즐거운 코딩하세요!