[Javascript] null 병합 연산자 '??' 와 OR 연산자 '||' 의 차이 (자바스크립트, nullish coalescing, falsy값)

📚 유효성 확인

• 사용할 변수가 유효한지 확인해야 함
• null 또는 undefined 를 참조하게 되면 에러를 발생시킬 것임
• 코틀린 언어같은 경우 엘비스 연산자(?:) 처럼 확인 후에 다음 동작을 수행하는 연산자가 존재함
• 자바스크립트도 여러가지 방법이 있지만 ??, || 를 확인하고 둘의 차이를 비교할 것임

---

📗 OR 연산자

피연산자 둘 중 하나 이상이 참이면 참을 반환

• true가 되는 값 || false가 되는 값 ⇒ true가 되는 값

• true가 되는 값 || true가 되는 값 ⇒ true가 되는 값

• false가 되는 값 || false가 되는 값 ⇒ false가 되는 값

• 조건문에서 활용

    const first = true;
    const second = false;
  
    if(first || second) console.log("OR :", true);
    if(first && second) console.log("AND :",true);

    OR : true

• boolean값이 아닌 곳에서 활용 1 (피연산자가 두 개 일 때)

    const first = "first";
    const second = "second";
    const third = null;
  
    const result1 = first || second;
    const result2 = second || third;
    const result3 = third || first;
  
    console.log(result1);
    console.log(result2);
    console.log(result3);

    first
    second
    first

• boolean값이 아닌 곳에서 활용 2 (피연산자가 여러 개 일 때)

  • 첫 번째 truthy 값을 찾는다

  • && 연산자는 반대로 동작함

    const first = "first";
    const second = "second";
    const third = null;
    
    const result1 = first || second || third;
    const result2 = second || first || second;
    const result3 = third || second || first;
    
    console.log(result1);
    console.log(result2);
    console.log(result3);

    first
    second
    second

• node.js 포트 할당(예시)

  환경변수가 존재하지 않다면 9000 포트로 할당됨

    const port = process.env.NODE_ENV || 9000;

---

📒 Null 병합 연산자

여러 피연산자 중 존재하는 변수의 값을 찾음

• value1 ?? value2 ⇒ value1이 존재하는 변수라면 그 값이 반환, 그렇지 않으면 value2

• (value1 !== null && value1 !== undefined) ? value1 : value2; 와 동등한 코드(삼항연산자)

• null 병합 연산자 사용 1 (피연산자가 두 개 일 때)

    let a = "a는 널이 아닌 값"
    let test1 = a ?? '대체 값'
    let test2 = (a !== null && a !== undefined) ? a : '대체 값';
  
    console.log(test1);
    console.log(test2);
  
    a = null;
    test1 = a ?? '대체 값';
    test2 = (a !== null && a !== undefined) ? a : '대체 값';
  
    console.log(test1);
    console.log(test2);

    a는 널이 아닌 값
    a는 널이 아닌 값
    대체 값
    대체 값

• null 병합 연산자 사용 2 (피연산자가 여러 개 일 때)

  null 이나 undefined가 아닌 첫 번째 피연산자 찾기

    let first = null;
    let second = "이";
    let third = "삼";
    let fourth = null
  
    console.log(first ?? second ?? third ?? fourth ?? "Anonymous");

    이

---

📘 ??, || 비교

첫 번째 존재하는 변수의 값을 반환하는 연산자

• || 는 첫 번째 truthy 값을 반환

• ?? 는 첫 번째 정의된 값을 반환

• 두 연산자의 차이점

    let value = 0
    let result = value ?? "정의되지 않은 변수"
    console.log(result);
  
    result = value || "falsy한 변수"
    console.log(result);

    0
    falsy한 변수

  javascript의 falsy한 값

    false
    null
    undefined
    0
    -0
    0n
    NaN
    ""