Truthy와 Falsy 값 이해하기

🔹 Truthy와 Falsy란?

JavaScript에서 값은 Truthy(참 같은 값) 또는 Falsy(거짓 같은 값) 두 가지로 나뉩니다.
어떤 값을 if 문에서 평가할 때, 특정 값들은 자동으로 false로 간주되고, 나머지는 true로 간주됩니다.

✅ Falsy 값 (거짓 같은 값)

JavaScript에서 falsy한 값은 다음 6가지뿐입니다:

false
0
""  // 빈 문자열
null
undefined
NaN

이 여섯 가지를 제외한 모든 값은 truthy합니다.

✅ Truthy 값 (참 같은 값)

Falsy 값이 아닌 나머지 모든 값이 truthy합니다. 예를 들면:

true
1
-42
"hello"
[]  // 빈 배열
{}  // 빈 객체
function(){}  // 함수

[], {} 같은 빈 배열이나 빈 객체도 truthy한 값이라는 점이 중요합니다!

---

🔹 Falsy 값 확인하는 방법

Falsy 값을 확인하는 간단한 방법은 !!(이중 논리 부정 연산자)를 사용하는 것입니다.

console.log(!!0);          // false
console.log(!!"hello");   // true
console.log(!!null);      // false
console.log(!!42);        // true
console.log(!![]);        // true (빈 배열도 truthy!)

이제, 이 개념을 활용해서 배열에서 falsy한 값들을 제거하는 함수를 만들어볼까요?

---

🔹 Falsy 값 제거하기

배열이 주어졌을 때, 그 안에서 Falsy 값들을 제거하고 truthy 값들만 남기는 함수를 만들어보겠습니다.

1️⃣ for 루프를 사용한 방법

filter() 메서드를 모른다면, for 문을 사용해서 직접 truthy한 값만 새로운 배열에 추가하는 방식으로 해결할 수 있습니다.

function removeFalsyValues(array) {
  let newArray = [];
  for (let i = 0; i < array.length; i++) {
    if (!!array[i]) { 
      newArray.push(array[i]); 
    }
  }
  return newArray;
}

🛠 코드 설명

1. newArray라는 빈 배열을 생성합니다.
2. for 문을 이용해 array의 요소를 하나씩 확인합니다.
3. !!array[i]를 사용해 truthy한 값만 남깁니다.
4. truthy한 값만 newArray에 추가하고, 최종적으로 새로운 배열을 반환합니다.

✅ 예제 실행

console.log(removeFalsyValues([0, "hello", "", false, 42, null, undefined, "JavaScript", NaN, []]));
// 출력: ["hello", 42, "JavaScript", []]

Falsy 값(0, "", false, null, undefined, NaN)이 제거되었습니다!

---

2️⃣ filter() 메서드를 사용한 방법 (더 간단한 코드)

JavaScript의 filter() 메서드를 활용하면 같은 기능을 더 간결한 코드로 작성할 수 있습니다.

function removeFalsyValues(array) {
  return array.filter(element => !!element);
}

🛠 코드 설명

• filter()는 배열의 각 요소를 순회하면서, 콜백 함수에서 true를 반환하는 요소만 남겨둡니다.
• !!element를 사용하면 해당 요소가 truthy이면 true, falsy이면 false가 되어 자동으로 제거됩니다.

✅ 예제 실행

console.log(removeFalsyValues([0, "hello", "", false, 42, null, undefined, "JavaScript", NaN, []]));
// 출력: ["hello", 42, "JavaScript", []]

이제 for 루프 없이도 같은 결과를 얻을 수 있습니다! 🚀

---

🚀 실제 개발에서는 이렇게 활용해요!

Truthy와 Falsy 개념은 실제 개발에서도 아주 자주 쓰입니다.
아래와 같은 상황에서 많이 활용되니, 직접 연습하면서 익숙해져 보세요! 💡

✅ if 문에서 값이 존재하는지 확인할 때

let username = "";  // 사용자가 입력하지 않음

if (username) {
  console.log(`Hello, ${username}!`);
} else {
  console.log("사용자 이름을 입력하세요.");
}

✅ 기본값 설정 (|| 연산자 사용)

let userInput = "";  
let username = userInput || "Guest";

console.log(username);  // "Guest"

✅ 특정 조건에서만 실행 (&& 연산자 사용)

let isLoggedIn = true;
let message = isLoggedIn && "Welcome back!";

console.log(message);  // "Welcome back!"

✅ 배열에서 Falsy 값 제거하기

const data = [0, "hello", "", false, 42, null, undefined, "JavaScript", NaN, []];

const cleanedData = data.filter(Boolean);  

console.log(cleanedData); 
// ["hello", 42, "JavaScript", []]

💡 이제 Truthy와 Falsy 개념을 실제로 어디서 쓰는지 알겠죠?
앞으로 JavaScript 코드를 짤 때, 조건문이나 기본값을 설정할 때 자연스럽게 떠올릴 수 있도록 연습해보세요! 🚀

이제 Truthy와 Falsy 개념이 이해되었나요? 개발할 때 자주 등장하는 개념이니, 직접 테스트하면서 익숙해져 보세요! 😊

---

이 글이 도움이 되었다면 블로그에 댓글이나 피드백 남겨주세요! 🚀 Happy Coding! 😃