1주차

JS에서 Truthy와 Falsy 그리고 단락평가

janglog 2025. 4. 11. 13:54

안녕하세요! AT SOPT YB 36기 장정훈입니다.

저는 오늘 Js의 Truthy와 Falsy 그리고 단락평가에 대해 말해보고자 합니다.

자바스크립트의 if (value) 같은 조건문에서 value의 값이 숫자나 문자열이 들어가도 잘 작동합니다.

🤔

🤔

🤔

왜 그럴까요?

 

이는 자바스크립트가 내부적으로 값을 논리형(Boolean)으로 바꿔 판단하기 때문입니다.

그리고 이때 기준이 되는게 바로 Truthy와 Falsy입니다.

 

Truthy? Falsy?

Falsy?

Falsy한 값이란 불리언 자료형의 거짓(false)은 아니지만 거짓과 같은 의미로 쓰이며, 조건식에서 거짓(false)으로 평가합니다.

let f1 = undefined;
let f2 = null;
let f3 = 0;
let f4 = -0;
let f5 = NaN;
let f6 = "";
let f7 = 0n;	//BigInt 자료형의 값

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

위 코드에 나와있는 항목들이 Falsy한 값들입니다.

 

Truthy?

Truthy한 값은 불리언 자료형의 참(true)은 아니지만 참과 같은 의미로 쓰이며, 조건식에서 참(true)으로 평가됩니다.

falsy한 값을 제외한 모든 값이 truthy한 값이라고 생각하면 이해하기 쉽습니다.

// 7가지 Falsy 한 값들 제외한 나머지 모든 값
let t1 = "hello";
let t2 = 123;
let t3 = [];
let t4 = {};
let t5 = () => {}

 

Truthy와 Falsy를 활용하지 않으면

function printName(person) {
  if (person === undefined || person === null) {
    console.log("person의 값이 없음");
    return;
  }
  console.log(person.name);
}

let person;
printName(person);

이렇게 조건문이 길어지지만

function printName(person) {
  if (!person) {
    console.log("person의 값이 없음");
    return;
  }
  console.log(person.name);
}

let person = { name: "장정훈" };
printName(person);

Truthy와 Falsy를 활용한다면 위의 코드처럼 간단하게 표현할 수 있습니다.

이러한 Truthy와 Falsy는 단락평가에서 빛을 바랍니다.

 

단락평가

단락평가?

AND 연산, OR 연산과 같은 논리 연산식에서 첫 번째 피연산자의 값만으로도 전체 결과가 정해지는 경우 두 번째 피연산자에는 접근조차 하지 않는 실행 방식입니다.

function returnFalse() {
  console.log("False 함수");
  return false;
}

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

console.log(returnFalse() && returnTrue());
console.log(returnTrue() || returnFalse());

위 코드를 출력해보면

이와 같이 콘솔에 출력하게 됩니다.

 

다시 정리하자면

Falsy && 아무거나 -> False

Truthy || 아무거나 -> True

 

이를 활용하면 조건문에서 불필요한 연산을 줄일 수 있습니다.

 

활용 사례

// 단락 평가 활용 사례

function printName(person) {
  if (!person) {
    console.log("person에 값이 없음");
    return;
  }
  console.log(person.name);
}

위처럼 perosn 객체에 사람이름이 정해지지 않으면 "person에 값이 없음"을 출력하고 이름이 정해져있으면 이름을 출력하는 코드가 있다고 가정했을 때

// 단락 평가 활용 사례

function printName(person) {
  const name = person && person.name
  console.log(name || "person의 값이 없음");
}

printName();
printName({ name: "장정훈" });

Truthy와 Falsy 그리고 단락평가를 사용하여 코드를 간결화할 수 있습니다.

위 코드에서 const name에는 처음 값이 Truthy 처리된 후 뒤의 값이 저장됩니다.

 

 

지금까지 자바스크립트의 Truthy와 Falsy 그리고 단락평가에 대해 알아봤습니다. 언뜻 단순해 보이지만 이 개념들은 조건문을 더 간결하고 안전하게 만드는데 꼭 필요하다고 들었습니다. 네.. 이상입니다.

 

블로그는 처음 작성해봐서 퀄리티가 조금 아쉬운것 같긴 하지만.. 긴 글 읽어주셔서 감사합니다.😀

SWEEEEEEEEB~~~