[JavaScript] 쉽게 설명하는 단축 평가

🎯 단축 평가란?

단축 평가 : 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것.

let answer = 'Cat' && 'Dog' //'Dog'

여기서 'Cat'은 문자열이니까 truthy한 값이다. 따라서 이 논리 연산의 결과가 true인지 false인지는 오른쪽 항인 'Dog'가 결정을 한다. 그래서 answer는 'Dog'.

let answer = 'Cat' || 'Dog' //'Cat'

'Cat'이 문자열이라 이미 truthy한 값이므로 이 연산자의 결과는 true로 바로 결정이 난다. 따라서 answer는 'Cat'이 된다.

🧩 논리합(||) 연산자
'Cat' || 'Dog'  // 'Cat'
false || 'Dog'  // 'Dog'
'Cat' || false  // 'Cat'

🎲 논리곱(&&) 연산자
'Cat' && 'Dog'  // Dog
false && 'Dog'  // false
'Cat' && false  // false

 

💯 활용 예

조건이 truthy일 때 && 무언가를 해야 할 경우,
조건이 falshy일 때 || 무언가를 해야 할 경우에 사용한다.

• 조건부 렌더링

  아래의 코드에서 popularMovies.results라는 데이터가 있으면 <Banner> 컴포넌트를 렌더링하고 없다면 렌더링하지 않는다.

  return (
    <div>
    {popularMovies.results && <Banner popularMovie={popularMovies.results[0]} />}
    </div>
  );

• null 또는 undefined인 경우를 확인할 때

let item;
const price = item && item.price;
console.log(price); //undefined

• 기본값 설정

function print(message) {
  const text = message || "Hello";
  console.log(text);
}
print(); //Hello

 

➕ Nullish Coalescing Operator ('??')

'??' null, undefined 인 경우에만 설정

null이나 undefined인 경우에만 뒤에 오는 항을 대입하고 싶은데, 0이나 ''(빈 문자열)을 첫번째 항에 넣어도 falshy한 값으로 인식해서 뒤에 오는 항이 대입이 된다.
그럴 땐 '??' 연산자를 입력해서 첫번째 항에 falshy한 값을 넣어도 null, undefined가 아니라면 truthy한 값으로 인식한다.

let num = 0;
console.log(num || "-1"); //-1 👉 0을 falshy한 값이라고 판단해서 -1 리턴!
console.log(num ?? "-1"); //0 👉 0이 null이나 undefined가 아니기 때문에 0 리턴!

 

---

논리 연산자

• 논리합( || ) 연산자 : 둘 중 하나라도 truthy한 값이라면 true 반환

  true || true // true
  true || false // true
  false || true // true
  false || false // false

• 논리곱( && ) 연산자 : 둘 다 truthy해야 true 반환

  true && true // true
  true && false // false
  false && true // false
  false && false // false

• truthy한 값

  • 1
  • 0을 제외한 숫자
  • '0' => 0 이라는 string이 들어가 있어서
  • 'false' => false 라는 string이 들어가 있어서
  • [ ] => 빈 배열
  • { } => 빈 객체

• falshy한 값

  • 0
  • -0
  • null
  • NaN
  • undefined
  • '' (빈 문자열)