null 병합 연산자

• ??을 사용하는 연산자로 피 연산자가 null 또는 undefined 라면 오른쪽 피 연산자를
  반환 합니다.

• 피 연산자가 null 또는 undefined 가 아니라면, 자신을 반환합니다.

❤️ 문법 

a ?? b 

x = ( a == null || a == undefined ) ? b : a 
x = ( a != null && a != undefined ) ? a : b
/* 이 코드는 위의 a ?? b 코드와 같습니다 */

/* 
a가 null 또는 undefined라면 b를 반환, 그렇지 않다면 a를 반환한다.
*/

🔔 ?? 연산자 우선 순위

논리 연산자간의 우선순위는 OR 연산자보다 낮다.
NOT > AND > OR > nullish

❤️ ?? 연산자 사용

let firstName = null;
lastName = null;
nickName = '사람';

alert(firstName ?? lastName ?? nickName ?? '익명' ); // '사람' 출력


/* */
1. 피 연산자가 null이나 undefined가 아니라면 연산을 종료하고 값을 반환한다.
2. firstName == null, 다음 연산 수행 
3. lastName == null, 다음 연산 수행
4. nickName == '사람', null이나 undefined가 아니므로 값을 반환하고 종료한다.

OR 연산자와 ?? 연산자의 차이

• || 연산자는 참인 값을 반환하고 종료합니다.

• ?? 연산자는 null undefined이 아닌 값을 찾으면 반환하고 종료합니다.
  즉 이는, 피 연산자가 null undefined 라면 다음 연산을 평가한다는 뜻

❤️ ?? 연산자는 정수 0도 값으로 취급합니다.

let height = 0;

alert(height || 100); 	// false || true = true 값을 반환하고 종료 (100)
alert(height ?? 100);	// false || true = false 값을 반환하고 종료 (0)
      
      
/*  */
alert(height || 100); 
1. 피연산자를 논리형으로 변환 > false || true > true인 값을 반환하고 종료
2. 출력 : 100


alert(height ?? 100);
1. 피연산자중에 null이나 undefined가 아닌 값을 찾음 > 0 ?? 100 > 0의 값을 반환하고 종료
2. 출력 : 0


/* */
nullish 연산자는 피 연산자가 null과 undefined 둘 중 하나라도 아니라면
연산을 종료하고 반환합니다. 0 또한 해당되지 않으므로 반환 후 종료한 것
모든 피연산자가 null 또는 undefined라면 마지막 피연산자를 반환

높이처럼 변수에 0이 들어갈 수 있는 기능을 구현한다면 || 보다 ?? 연산자가
사용하기 적합하니다.

?? 연산자 우선순위

• ?? 연산자는 우선순위가 5로 대부분의 연산자보다 순위가 낮습니다.
  이 연산자를 사용할 때는 괄호를 사용해주는 것이 좋습니다.

• =나 ? 조건문 연산자 보다는 우선순위가 높습니다.

let height = null;
let width = null;

let area = (height ?? 100) * (width ?? 50); // 결과 5,000


/* */
위 코드에서 괄호를 사용하지 않았다면, * 연산자가 ?? 연산자보다 우선순위가 높기에
100 * width(null) = 0
let area = height ?? 0 ?? 50	// 결과 0

이런식으로 연산됩니다.

?? 연산자는 다른 논리연산자와 사용할 수 없다

• javascript에서 ?? 연산자는 안정성의 문제로 다른 논리연산자와 혼용해서
  사용할 수 없습니다.

• 하지만 ( ) 괄호를 사용해서 구분한다면 한 라인에서 같이 쓸 수 있다.

let value = 1 && 2 ?? 3;	// 오류 발생(SyntaxError: Unexpected token '??')

let date = (1 && 2) ?? 3;	// 괄호를 사용해서 분리한다면, 같이 사용 가능하다.
alert(date);				// 결과 : 2


/* 왜 결과가 2입니까? */
(true && true) 
전부다 true이기 때문에, 마지막 true 값을 반환(2)

true(2) ?? true(3)
좌측의 true는 null이나 undefined가 아니기 때문에, true(2)값을 반환, 결과 2

정리

nullish (??)

1. ??연산자는 피 연산자중에 값이 있는 변수를 찾을 수 있습니다.
   (null과 undefined가 아닌 변수를 의미)

2. 변수에 기본 값을 할당할 수 있습니다.

let value = value ?? 100;	// value은 할당하지 않은 undefined상태이므로, 100의 값을 할당합니다.