??와 혼동 & || JS에서?

javascript에서 ??와 ||를 혼동하셨습니까? 대부분의 사람들은 둘 다 같다고 생각하지만 둘 다 같지 않습니다. 목적이 다릅니다.
||는 OR 연산자이고 ??는 null 병합 연산자입니다.

차이점이 뭐야 ?

소개 ||

이것은 OR 연산자입니다. OR 연산자는 피연산자를 확인하고 피연산자 중 하나라도 유효하거나 진실한 경우 진실한 피연산자를 반환합니다.

예는 다음과 같습니다.

true || false // true because first operand is true
1 || false // 1 because first operand is 1 i.e truthy
false || "Hello" // "Hello" because second operand is "Hello" i.e truthy

좋아 보입니다. 그러면 ||의 문제점과 ??가 필요한 이유가 무엇입니까?

이 스 니펫을보십시오

0 || 1 // 1 In javascript 0 is falsy value so || operator will ignore it.
"" || 1 // 1 because "" is empty string in JS empty string is falsy value.

그러나 0은 거짓 값이 아니라 숫자입니다. 변수를 0으로 설정한다는 것은 잘못된 값을 변수로 설정한다는 의미가 아닙니다. 문자열에 문자가 없으면 빈 문자열이라고 합니다. 문자열에 문자가 없다고 해서 거짓이라는 의미는 아닙니다.
||에는 이 문제가 있습니다. 위에서 언급한 시나리오를 처리할 때마다 추가 조건을 작성해야 합니다.

예시:
백엔드 서비스에서 우리는 학생 점수를 받고 있습니다. 일부 학생의 경우 해당 과목에 대해 null 또는 정의되지 않은 값을 제공하는 추가 과목 API가 없는 학생을 위한 추가 과목이 있다고 가정합니다. 프런트엔드에서 제목 표시가 null이거나 정의되지 않은 경우 "NA"를 표시해야 합니다. 우리는 이렇게 쓸 수 있습니다

Object.keys(marks).forEach(subject => {
 console.log(subject + " -> " + (marks[subject] || "NA")
})

하지만 위의 코드에 문제가 있습니다. 제목 표시 또는 0은 무엇입니까?

다음과 같이 코드를 수정해야 합니다.

Object.keys(marks).forEach(subject => {
 console.log(subject + " -> " + (marks[subject] || marks[subject]) == 0 ? marks[subject] : "NA"))
})

이제 우리는 이러한 시나리오, 즉 null 병합 연산자를 피하기 위해 자바스크립트에서 이 문제에 대한 해결책을 갖게 되었습니다.

Nullish 병합 연산자는 피연산자를 확인하고 null이 아닌 값을 제공합니다. 다음 스니펫을 살펴보십시오.

0 ?? 1 // 0 
"" ?? 1 // ""
0 ?? null // 0
null ?? 1 // 1

0과 ""는 null 값이 아니므로 이를 고려합니다.

무효 값은 무엇입니까?

null

undefined

건배,
행복한 코딩!!