[JS] 연산자 ( && ) ( || ) ( ?? ) ( ?. ) ( !! )

🧷 Logical AND  - && 

• 모든 조건이 참이어야 true
  • true && expression: 왼쪽 피연산자가 true이면, 우측 피연산자 반환
  • false && expression: 왼쪽 피연산자가 false이면, 왼쪽 피연산자 반환

function printNum(num) {
  console.log(num) 
}

true && printNum(10);           // output: 10
true && true && printNum(20);   // output: 20
false && printNum(30);          // output: false

console.log(true && true);      // output: true
console.log(false && true);     // output: false
console.log(true && 'dog');     // output: dog

---

🧷 Logical OR  - ||

• 조건 중 하나라도 참이면 true
  • false || expression: 왼쪽 피연산자가 false이면, 우측 피연산자 반환
  • true || expression: 왼쪽 피연산자가 true이면, 왼쪽 피연산자 반환

function printNum(num) {
  console.log(num) 
}

true || printNum(10);           // output: true
true || true || printNum(20);   // output: true
false || printNum(30);          // output: 30

console.log(true || true);      // output: true
console.log(false || true);     // output: true
console.log(false || 'dog');    // output: dog

---

🧷 Nullish coalescing operator(널 병합 연산자) - ??

• 왼쪽 피연산자가 null 또는 undefined 일 때, 오른쪽 피연산자 반환
• 그렇지 않으면 왼쪽 피연자 반환

function returnNull(){
  return null
}

function returnText(){
  return '널 병합 연산자'
}

const foo = null ?? 'dog';
console.log(foo); // output: dog

const baz = 0 ?? 'cat';
console.log(baz); // output: 0

const result = returnNull() ?? returnText()
console.log(result); // output: '널 병합 연산자'

---

 

🔔 ??과 || 차이

- Nullish coalescing operator( ?? )는 nullish 일 때만, 오른쪽 피연산자가 반환되지만,

  Logical OR( || )는 falsy 일 때, 오른쪽 피연산자 반환됩니다.

 

   🌟 nullish란? null 또는 undefined

   🌟 falsy란? false, 0, -0, undefined, null, NaN, '', "", ``

 

---

🧷 Optional chaining(옵셔널 체이닝) - ?.

• 객체의 값이 있다면 반환하고, 없다면 undefined 반환

const person = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const catName = person.cat?.name;
console.log(catName); // output: Dinah

const dogName = person.dog?.name;
console.log(dogName); // output: undefined

---

🧷 Double Not - !!

• 다른 타입의 데이터를 boolean 타입으로 명시적으로 형 변환

console.log(!!true);      // output: true
console.log(!!false);     // output: false

console.log(!!0);         // output: false
console.log(!!undefined); // output: false
console.log(!!null);      // output: false
console.log(!!NaN);       // output: false

console.log(!!'');        // output: false
console.log(!!'청포도');   // output: true
console.log(!!"");        // output: false
console.log(!!"바나나");   // output: true
console.log(!!``);        // output: false
console.log(!!`파인애플`); // output: true