[한입챌린지] 4일차 - JS 단락평가, truthy, falsy

 

Truthy와 Falsy

---

- JavaScript에서는 참, 거짓이 아닌 값도 참, 거짓으로 평가한다.

- 어떤 값이 참이나 거짓을 의미하는 값이 아닌데도, 조건문 내에서 참이나 거짓으로 평가하는 JavaScript의 특징을 지칭할 때 Truthy, Falsy라고 부른다.

- 아래 if 문의 조건식에 있는 123이란 숫자 값처럼 참은 아니지만 조건문 내에서 참으로 평가되는 이러한 값들을 Truthy(트루시), 즉 참 같은 값이라고 표현한다.

- 반대로 아래 코드 if 문의 조건식에 있는 undefined 처럼 거짓은 아니지만 조건문 내에서는 거짓으로 평가되는 이런 값들을 Falsy한 값, 즉 거짓 같은 값이라고 표현한다.

- JavaScript에 존재하는 모든 값은 Truthy하거나 Falsy 하다. 이런 특징을 잘 이용하면 특정 상황에서 조건문을 굉장히 간결하고 강력하게 만들 수 있다.

if (123) { // truthy 한 값 (참 같은 값)
    console.log("123 is true");
} else {
   console.log("123 is false");
}

if (undefined) { // falsy 한 값 (거짓 같은 값)
    console.log("undefined is true");
} else {
   console.log("undefined is false");
}

 

거짓 같은 값 (Falsy)

- JavaScript에서는 7 가지  Falsy한 값이 존재한다.

- 0n은 Big Integer 자료형이며, 아주 큰 숫자를 저장하는 데 사용되는 타입이다. 보통 웹 개발 중에는 잘 이용하지는 않는다.

- 아래 코드의 일곱 가지의 값들은 조건문에서 거짓으로 평가되기 때문에 Not 연산자(!)를 붙여서 조건식이 참이 되어 console.log()가 실행되도록 만들어 주었다.

// 1. Falsy한 값
let f1 = undefined; // undefined
let f2 = null; // null
let f3 = 0; // 0
let f4 = -0; // 음수 0
let f5 = NaN; // NaN
let f6 = ""; // 빈 문자열
let f7 = 0n; // 0n(Big integer 자료형)

if (!f4) {
    console.log("falsy");
}

 

참 같은 값 (Truthy)

- Truthy는 Falsy한 값들 처럼 일일이 나열할 수 없다. (너무 많다)

- 일곱 가지의 Falsy한 값들을 제외한 나머지 모든 값들이 모두 Truthy한 값이다.

- 그렇기 때문에 비어 있지 않은 문자열, 숫자, 빈 배열, 빈 객체, 화살표 함수 모두 참으로 평가되는 Truthy한 값이다.

// 2. Truthy 한 값
// -> 7가지 Falsy한 값들을 제외한 나머지 모든 값
let t1 = "hello"; // 문자열
let t2 = 123; // 숫자
let t3 = []; // 빈 배열
let t4 = {}; // 빈 객체
let t5 = () => {}; // 화살표 함수

if (t3) {
    console.log("truthy");
}

 

Truthy, Falsy 활용 사례

- 구체적으로 어떤 상황에서 유용하게 사용할 수 있는지 대표적인 활용 사례를 살펴보자

- 객체를 매개변수로 받아, 객체의 프로퍼티를 출력하는 함수가 있다고 가정해보자.

- 이때 함수를 호출하면서 인수로 넣는 객체가 어떤 오류로 인해서 undefined가 되었다면, 함수 내부 코드에서 undefined의 객체 속성에 접근하려고 하기 때문에 Error를 발생한다.

- 함수를 선언할 때는, 매개변수로 객체를 받을 거라고 생각했지만 실제로는 undefined 값이 들어오는 이런 상황은 실제 서비스를 개발하다 보면 정말 자주 발생하는 상황이다. 그렇기 때문에 객체의 특정 프로퍼티에 접근하는 기능을 담고 있는 함수에서는 보통 조건문으로 매개변수의 값이 null/undefined 값이 아님을 확인한다.

- 그런데 if 문을 통해서 객체가 undefined 인지 확인한다면, 객체가 null일 경우는 다시 에러가 발생한다. if 문에서 하나의 undefined 값만 확인 했기 때문에 null을 검사하는 코드를 조건식에 추가해줘야 한다.

- 하나의 프로퍼티에 대해서만 접근하더라도 조건식이 다소 복잡해졌다. 이러한 유사한 기능을 가진 함수를 만들 때마다 복잡한 조건문들을 계속 반복적으로 넣어줘야 하는 것은 꽤나 비효율적이다.

- 비효율적인 조건식을 truthy와 falsy를 통해서 개선해볼 수 있다.

// 3. 활용 사례
function printName(person) {
    // if(person === (undefined || null)) { // 개선 전
    if(!person) { // 개선 후
        console.log("person의 값이 없음");
        return;
    }
    console.log(person.name);
}

// let person = { name: "홍길동" };
// let person; // undefined
let person = null;
printName(person); // person의 값이 없음

 

단락평가 (Short-circuit Evaluation)

---

단락평가의 개념과 이점

- 단락평가란 OR 같은 논리 연산식에서 첫 번째 피연산자의 값만으로도 해당 연산의 결과를 확정할 수 있는 평가할 수 있다면, 두 번째 피연산자의 값에는 아예 접근하지 않는 JavaScript의 문법이다.

- AND 연산자의 경우, 첫 번째 피연산자가 falsy한 값이라면 두 번째 피연산자에는 아예 접근하지 않는다.

- OR 연산자의 경우, 첫 번째 피연산자가 truthy한 값이라면 두 번째 피연산자에는 아예 접근하지 않는다.

- 단락평가를 이용하면 앞으로 조건문을 이용하지 않고도 특정 상황에서 어떠한 함수를 호출하지 않도록 방지해 주거나 또는 어떤 값들을 굳이 계산하지 않도록 하는 등의 다양한 기능들을 개발할 수 있다.

let varA = false;
let varB = true;

// AND 연산자
console.log(varA && varB); //varB는 확인조차 하지 않음

// OR 연산자
console.log(varB || varA); //varA는 확인조차 하지 않음

 

 

- 아래 코드 예시를 보면 truthy 함수와 falsy 함수의 호출이 console.log() 인수로 모두 들어갔지만, 두 함수 모두 모두 호출하지 않고 하나의 함수만 호출되는 연산 결과를 확인할 수 있다.

- falsy 함수는 아에 호출이 되지 않은 이유는 단락평가가 작동했기 때문이다.

- AND 논리 연산식에서 첫 번째 피연산자의 값만으로도 연산의 결과를 확정할 수 있고, 두번째 피연산자에는 접근조차 하지 않는 실행 방식을 가지고 있다.

- 하지만 truthy 함수를 먼저 쓰고 두 번째 피연산자로 falsy 함수를 쓰면 두 함수 호출이 모두 실행된다. 그 이유는 단락평가가 작동하지 않았기 때문이다.

- T and T의 결과는 True가 나오고, T and F의 결과는 False가 나오기 때문에 첫 번째 피연산자의 값만으로는 이 연산의 결과를 확정할 수 없는 겂이다. 즉, 두번째 피연산자의 값을 호출해서 꼭 확인해야 한다.

- OR 논리 연산식의 경우에는 첫 번째 피연산자가 Truthy 함수이면, 첫번째 피연산자의 함수만 호출하고 두번째 피연산자는 확인도 안하기 때문에 함수 호출이 이루어지지 않는다.

- 다시 정리하면, JavaScript의 단락평가에 함수를 적용면 특정 조건에 맞춰서 둘 중 하나의 함수를 아예 호출하지 않도록 방지할 수 있는 기능을 가지고 있다.

// 단락평가
function returnFalse() {
    console.log("False 함수");
    return false;
}

function returnTrue() {
    console.log("True 함수");
    return true;
}

console.log(returnFalse() && returnTrue()); // 단락평가 동작
// False 함수
// false
console.log(returnTrue() && returnFalse());
// True 함수
// true
// False 함수
// false
console.log(returnTrue() || returnFalse()); // 단락평가 동작
// True 함수
// true

 

- 단락 평가는 true 또는 false 같은 boolean 타입 뿐만 아니라 truthy/falsy 한 값에도 모두 적용된다.

- 논리 연산식에 truthy 하거나 falsy한 값이 사용됬을 경우에는 논리 연산의 결과가 그냥 truthy하거나 falsy한 값 그자체가 된다.

- 아래 예시 코드에서는 true 대신 truthy한 값으로 빈 배열([])을, false 대신 falsy한 값으로 빈 문자열을 넣었다.

// 단락평가
function returnFalse() {
    console.log("False 함수");
    // return false;
    return '';
}

function returnTrue() {
    console.log("True 함수");
    // return true;
    return [];
}

console.log(returnFalse() && returnTrue()); // 단락평가 동작
// False 함수
// (빈 문자열)
console.log(returnTrue() && returnFalse());
// True 함수
// []
// False 함수
// (빈 문자열)
console.log(returnTrue() || returnFalse()); // 단락평가 동작
// True 함수
// []

 

단락 평가 활용 사례

- Truthy, Falsy 활용 사례에서 if 조건문으로 객체의 undefined/null 임을 검사했던 코드를 단락평가로 개선한다.

- 아래 코드를 설명해보면, person 매개변수가 undefined인 경우에는 AND 연산자의 경우 두번째 파라미터는 확인 할 필요도 없이 undfined의 결과값을 가지며 name 상수에 담긴다. 그리고 console에 출력되는 값은 OR 연산식의 결과값으로 name이 falsy한 값이므로 두번째 연산자의 값을 확인해야 결괏값을 확정할 수 있으므로 확인 후 결과값으로 해당 두번째 인수값을 출력한다.

- 반대로 person 매개변수가 truthy 한 값이라면 name에 할당되는 값은 두 번째 피연산자가 되며, 콘솔에 출력되는 값은 OR 연산이기 때문에 truthy 한 값인 person.name이 들어 있는 name이 바로 결과값으로 나오게 된다.

- 논리 연산식의 결과값은 연산을 빨리 끝내는 쪽으로 결괏값을 반환한다는 사실을 이해하면 쉽다.

- AND 논리 연산식의 결과를 총 정리하면 아래와 같다. (거짓이 나오면 끝, 참이 나오면 나머지 피연산자를 반환)

  ① T1 && T2 => T2

  ② T1 && F1 => F1

  ③ F1 && T1 => F1

  ④ F1 && F2 => F1

- OR 논리 연산식의 결과를 총 정리하면 아래와 같다. (참이 나오면 끝, 거짓이 나오면 나머지 피연산자를 반환)

  ① T1 || T2 => T1

  ② T1 || F1 => T1

  ③ F1 || T1 => T1

  ④ F1 || F2 => F2

- 위에서 정리한 내용에서 T는 truthy, F는 falsy 값을 의미하며 숫자를 붙여 피연산자 순서를 구분했다.

// 단락 평가 활용 사례
function printName(person) {
    const name = person && person.name;
    console.log(name || "person의 값이 없음");
}

printName(); // person의 값이 없음
printName({ name: "홍길동"}); // 홍길동

 

4일차 과제

---

책 정보 확인하기

- 목표: 주어진 책 정보 객체에서 특정 속성이 존재하는 지확인하고, 그 결과를 출력합니다.

- 다음 요구사항을 만족하는 코드를 작성하세요.

- book 객체 내에 '출판년도(publishedYear)' 속성이 있는지 확인해 결과에 따라 다음과 같이 출력합니다.

   - 속성이 있으면: "출판년도는 ${출판년도}입니다."

   - 속성이 없으면: "출판년도 정보는 없습니다."

const book = {
  title: "한 입 크기로 잘라먹는 리액트",
  author: "이정환",
  // publishedYear 속성은 이 객체에는 없습니다.
};

 

정답: 내 GitHub 저장소에 올렸음

https://github.com/redcontroller/onebite-react/blob/main/section01/mission-day04.js

onebite-react/section01/mission-day04.js at main · redcontroller/onebite-react

 

출처

---

(강의) 한입 크기로 잘라 먹는 리액트

(코드) GitHub - 강의 노트