JS_널 병합 과 옵셔널 체이닝

//널 병합 과 옵셔널 체이닝

  //es2020 에서 추가된
  // ??(널 병합)연산자와
  // ?.(옵셔널 체이닝) 연산자 입니다.

  //널 병합 연산자는 주로 || 연산자 대용으로 사용되며,
  //falsy 값 ( 0, '', false, NaN, null, undefined) 중에 null  과 undefined 만 따로 구분합니다.
  const a = 0;
  const b = a || 3; // ||연산자는 falsy 값이면 뒤(오른쪽)로 넘어감 즉, 걸러낸다.
  console.log(b); //3

  const c = 0;
  const d = c ?? 3; // ?? 연산자는 null과 undefined 일 때만 뒤로 넘어감, 즉, 걸러낸다. 즉, null 과 undefined만 구별한다.
  console.log(d); // 0;

  const e = null;
  const f = e ?? 3;
  console.log(f); //3

  const g = undefined;
  const h = g ?? 3;
  console.log(h); //3

  //옵셔널 체이닝 연산자는 null이나 undefined의 속성을 조회하는 경우 에러가 발생하는 것을 막습니다.

  const a1 = {};
  a.b; //a가 객체이므로 문제없음

  const c1 = null;
  try {
    c1.d;
  } catch (e) {
    console.error(e); // 타입에러 : null의 c를 읽을 수 없다, 즉, c 가 null이다.
  }
  //이렇게 try catch로 처리하면 좀 지저분한데,
  //옛날에는 이렇게 많이 했죠,
  if (c) {
    c.d;
  }
  //즉, if문으로 c가 있다는걸 보장 받고,
  //c.d 해서 확인하는거다.
  //근데 이 방법도 지저분하고 3줄씩 잡아먹으니까.
  //더깔끔하게
  c?.d; // c가 없으면 없는데로 두고, c가 있으면, d가 읽는다.

  //함수도,
  try {
    c.f();
  } catch (e) {
    console.error(e); //에러 c가 null이다.
  }
  //근데

  c?.f(); //하면 문제가 없고, 에러가없이 돌아간다.

  // 이번엔 배열도 된다.

  try {
    c[0];
  } catch (e) {
    console.error(e); // 에러
  }
  //근데,

  c?.[0]; //문제없다~

  //위 코드처럼 일반적인 속성뿐만 아니라 함수호출이나 배열요소 접근에 대해서도 에러가 발생하는 것을 방지할 수 있습니다.
  //물런,
  // c?.d 와 c?.f() 와 c?.[0] 의 값은 undefined가 된다는 것도 알아두세요/
  // 옵셔널 체이닝 연산자는 자바스크립트 프로그래밍을 할 때 발생하는 타입에러 케낫 리드 프로퍼티 오브 언디파인드 혹은 널을 의
  // 에러발생 빈도를 획기적으로 낮출 수 있기에 자주 사용합니다.

  // 참고로
  //   a.b.c.d.e 이런 깊은객체를 조회할떄, 에러가 난다 한다면,

  //   a?.b?.c?.d?.e 이렇게 하시면 됩니다. 이러면 에러는 일단 안나겠죠.
  // 근데 다 그렇게  쓰라면, 좀 가독성이 않좋긴한데, 타입스크립스 쓰세요.

  //추가로
  // 조합해서
  c = null;
  c?.[0] ?? "123"; // 123

  d = [1, 2, 3];
  d?.[0] ?? "123"; // 1

  //암튼 null병합 과 옵셔널 체이닝은,
  // 자바스크립트 코드를 줄여주면서 안전하게 쓸 수 있어서 좋다.