JS에서 Truthy 및 Falsy 값을 사용하는 더 짧은 조건부

JS에서 조건으로 작업할 때 AND(if)가 많고 OR(&&)이 많은 || 문으로 끝날 수 있다는 것을 알고 있습니다. 읽기 어려울 수 있고 코드에 약간의 복잡성을 가져올 수 있는 긴 조건(이미 있는 것보다 더 많음)이 시리즈의 이 부분과 다음 부분에서 조건문을 만드는 몇 가지 팁을 제공하는 이유입니다. 더 짧고 읽기 쉽습니다.

이 부분에서는 조건을 단축하기 위해 참 값과 거짓 값에 의존하는 방법을 보여 드리겠습니다.

조건문에 대한 간략한 소개

조건문을 사용하면 부울 컨텍스트를 제공하여 코드에서 논리로 선택할 수 있습니다. 이는 조건문이 true 또는 false 일 수 있음을 의미합니다. 몇 가지 작은 예:

// logs true
console.log(Array.isArray(['css', 'js']) == true)

// logs false
console.log(Array.isArray(['css', 'js']) == false)

// logs true cause the condition is met
console.log(isNaN(123) == false)

조건문은 다양한 경우에 사용할 수 있지만 실용적인 목적을 위해 이 문서에서는 조건을 평가하는 데 사용할 수 있는 if 문과 함께 사용합니다. 조건이 true로 평가되면 문이 실행됩니다.

if(Array.isArray("I'm a string") == false){
    // The condition it's true, so the code is executed
    console.log('The value is not an Array');
}

하지만 당신은 물어볼 수 있습니다 ...

참 값과 거짓 값은 무엇입니까?

부울 컨텍스트에서 Truthy 값은 true 로 간주되고 Falsy 값은 false 로 간주됩니다.

몇 가지 예를 살펴보겠습니다.

Boolean(true) //true
Boolean(false) //false

Boolean(123) //true
Boolean(-123) //true
Boolean(0) //false
Boolean(NaN) //false

Boolean("She loves me?") //true, and yet somehow false, haha.
Boolean("") //false

Boolean({}) //true
Boolean([]) //true

Boolean() //false, because it's undefined

조건부 내에서 이러한 유형의 값도 다음과 같은 방식으로 평가됩니다.

function truthyOrFalsy(value){
    if(value){
        console.log("Truthy")
    } else{
        console.log("Falsy")
    }
}

// logs "Truthy"
truthyOrFalsy("Can I succeed?");

이제 그런 것들이 명확해졌으니 조건을 단축하기 위한 첫 번째 팁부터 시작하겠습니다.

항등( == ) 및 부등( != ) 연산자가 항상 필요한 것은 아닙니다.

위의 예에서 본 것처럼 항상 이러한 연산자를 사용하여 데이터를 확인할 필요는 없습니다. 대부분의 경우 진실 값과 거짓 값을 사용하여 조건을 단축할 수 있습니다. 그러나 이것은 처음에는 약간 까다로울 수 있으므로 이를 보여주는 가장 좋은 방법 중 하나는 몇 가지 사용 사례를 제공하는 것입니다.

부울을 반환하는 함수 또는 메서드를 사용하는 경우

Array.isArray() , isNaN() , String.prototype.includes() 와 같은 메서드는 부울 값을 반환합니다. 이러한 방법 중 하나를 사용하는 경우 이러한 연산자가 필요하지 않을 가능성이 큽니다. 예를 들어:

인수가 배열인지 확인하고 싶다고 가정해 보겠습니다.

function checkCart(cart){
    if(Array.isArray(cart)){
        console.log("The cart argument is an Array");
    }
}

// logs: "The cart argument is an Array"
checkCart(['t-shirt', 'costume']);

다시 말하지만 부울(이 경우에는 true 값)만 예상할 수 있으므로 등호 연산자가 필요하지 않습니다. 하지만 false 값을 기대한다면 어떻게 될까요? 이를 위해 Logical NOT operator ( ! )를 사용할 수 있습니다. 이 연산자는 거짓 값을 진실 값으로 또는 그 반대로 변환합니다. 예를 들면 다음과 같습니다.

console.log(!true) //false
console.log(!false) //true

console.log(!"She loves me?") //false, makes more sense to me now.
console.log(!undefined) //true

따라서 값이 거짓일 것으로 예상되는 경우 이 연산자를 사용할 수 있습니다. 기본적으로 false 값을 true 로 변환하여 조건이 참이 되도록 합니다. 이제 이것의 예:

function message(msg){
    if(!msg.includes('fail!')) console.log(msg);
}
message("You can succeed!");

인수에 값이 있다고 예상하거나 예상하지 않는 경우

함수 인수나 변수에 값이 있는지 여부만 알면 되는 경우에 또 다른 좋은 사용 사례가 될 수 있습니다. 예를 들면 다음과 같습니다.

function setConfig(params){
    if(!params) throw Error('No parameters provided');
    // Your code if `params` is defined
    var userParams = validateParams(params);
}

//Uncaught Error: No parameters provided
setConfig();

문자열이 비어 있는지 확인하려면 다음을 수행하십시오.

function isEmptyString(str){
    if(!str && typeof str == 'string'){
        console.log('Empty string');
    } else {
        return;
    }
}

//logs: "Empty string"
isEmptyString("");

요약

조건문이 작동하는 방식과 진실 값과 거짓 값이 무엇인지 이해하면 읽기 쉽고 더 간단한 짧은 조건문을 만드는 데 도움이 될 수 있습니다. 이는 if 문에서만 작동하는 것이 아니라 템플릿 리터럴, 조건문( 삼항) 연산자, 기본적으로 조건문을 사용할 수 있는 위치입니다.

유용한 참조

MDN 웹 문서 | Making decisions in your code - conditionals

MDN 웹 문서 | Truthy

MDN 웹 문서 | Falsy

MDN 웹 문서 | Logical NOT operator

참고: 이 기사에 언급된 사람이나 웹사이트는 이 콘텐츠를 후원하지 않습니다.

다음 시간까지!

무언가를 배웠거나 이 기사가 마음에 든다면 다음 10월 18일 화요일에 게시할 이 시리즈의 다음 부분을 꼭 읽어보세요. 그 부분에서 조건문을 줄이는 방법에 대한 추가 정보를 제공하겠습니다. 더 쉽게 읽을 수 있습니다.

이 기사에 대한 의견이 있으십니까? 아래에 의견을 남겨주세요!