ELI5 JavaScript: Nullish 병합(??) 및 논리적 Nullish 할당(??=)

Nullish Coalescing 및 Logical Nullish Assignment... 확실히 무섭게 들립니다!




'Nullish Coalescing'과 'Logical Nullish Assignment'라는 단어를 처음 들었을 때의 반응이었습니다 😂

하지만 걱정하지 마세요! 이 두 가지 모두 최신 JavaScript에 도입된 가장 단순하면서도 강력한 개념 중 일부입니다!
기사를 끝까지 읽고 이에 대해 자세히 알아보세요 :)

더 이상 고민하지 않고 ...

목차:

Nullish Coalescing

1.1 Difference between OR (||) & Nullish Coalescing (??)

1.2 Short-circuiting

1.3 Assign default values

Logical Nullish Assignment

1. 무효 합체

하는 논리 연산자입니다.

첫 번째 인수가 '정의된' 경우(null/정의되지 않음) 반환합니다

.

첫 번째 인수가 정의되지 않은 경우 두 번째 인수를 반환합니다.

let person1
console.log( person1 ?? "Nisarg" ) //output = Nisarg

let person2 = null
console.log( person2 ?? "Nisarg" ) //output = Nisarg

let person3 = "Kapkar"
console.log( person3 ?? "Nisarg") //output = Kapkar

첫 번째 인수가 정의되지 않았거나(person1) null(person2)이므로 처음 두 console.log 문의 출력은 두 번째 인수("Nisarg")가 됩니다.

세 번째 console.log의 출력은 첫 번째 인수가 null이 아니거나 정의되지 않았기 때문에 person3("Kapkar")입니다.

1.1 OR(||)과 Nullish 병합(??)의 차이점

OR 연산자는 null/undefined, false, 빈 문자열 및 0을 구분하지 않습니다. 이러한 값은 모두 거짓 값으로 처리됩니다.

OR의 첫 번째 인수가 위의 값 중 하나인 경우 두 번째 인수가 출력으로 반환됩니다.

Nullish 병합은 첫 번째 인수가 null이거나 정의되지 않은 경우에만 두 번째 인수를 반환합니다.

let n1 = 0
console.log( n1 || 10 )     //output = 10
console.log( n1 ?? 10 )     //output = 0

let n2 
console.log ( n2 || 10 )    //output = 10
console.log (n2 ?? 10 )     //output = 10

n1의 경우: 0은 잘못된 값입니다. 따라서 OR은 10을 반환합니다. n1은 null이 아니거나 정의되지 않았기 때문에 Nullish Coalescing은 첫 번째 인수를 반환합니다.

n2의 경우: 정의되지 않음은 잘못된 값입니다. 따라서 OR은 10을 반환합니다. n2가 정의되지 않았으므로 Nullish Coalescing은 두 번째 인수를 반환합니다.

1.2 단락

Nullish Coalescing은 'Short-circuit' 평가에도 사용할 수 있습니다.
두 번째 인수는 첫 번째 인수가 null이거나 정의되지 않은 경우에만 평가됩니다!

let a
let b = 10
function c() {
    console.log("c called")
    return 1
}
console.log( a ?? c() ) //Output: c called 1
console.log( b ?? c() ) //Output: 10

첫 번째 표현식(a ?? c())의 경우 a가 정의되지 않았으므로 표현식의 오른쪽도 평가됩니다(함수 c). 함수 c는 "c가 호출됨"을 기록하고 1을 반환한 다음 콘솔에 의해 기록됩니다.

두 번째 표현식(b ?? c())의 경우 b가 정의되지 않았거나 null이 아니므로 표현식의 오른쪽이 평가되지 않습니다. 따라서 콘솔은 b(10)의 값을 기록합니다

.

1.3 기본값 할당

Nullish 병합을 사용하여 변수에 기본값을 할당합니다. 숫자가 null이거나 정의되지 않은 경우 변수를 10에 할당한다고 가정합니다.

let number = 0 
let a = number || 10 
let b = number ?? 10
console.log(a)   //Output: 10
console.log(b)   //Output: 0

OR을 사용하여 기본값을 할당하면 예기치 않은 결과가 발생할 수 있습니다!

OR은 숫자가 null이 아니거나 정의되지 않은 경우에도 변수 a를 10에 할당합니다(섹션 1.1에 설명된 대로 OR은 0을 거짓 값으로 간주함)

.

Nullish 병합은 숫자가 null이거나 정의되지 않은 경우에만 10을 할당합니다.

2. 논리적 무효 할당

let a 
let b = 10
a ??= 100
b ??= 100
console.log(a)   //Ouput = 100
console.log(b)   //Ouput = 10

논리적 Nullish는 변수가 null이거나 정의되지 않은 경우 값을 할당하는 할당 연산자입니다.

위의 예에서 a는 정의되지 않았으므로 100을 할당합니다. b는 이미 정의되어 있으므로(10) b에는 값이 할당되지 않습니다!


우우! 읽어주셔서 감사합니다😄




Nullish Coalescing 또는 Logical Nullish Assignment(또는 일반적으로 JavaScript에 대해)에 대해 질문이 있는 경우 의견에 자유롭게 질문하십시오 👇


이 기사는 ELI5 JavaScript 시리즈의 일부입니다.
JavaScript에 대해 더 많이 읽고 배우고 싶다면 구독하는 것을 잊지 마세요(더 많은 기사가 곧 제공될 예정입니다!).

전체 스택 개발, 소프트웨어 엔지니어링 및 데이터 구조/알고리즘에 대한 자세한 내용을 보려면 저를 팔로우하세요👇.

Github

다시 감사합니다 :)

멋진 하루와 행복한 코딩 되세요 😄