자바스크립트에서 빈 값 체크와 기본값 설정하는 방법

-

 

-

자바스크립트에서 빈 값이나 null 값을 처리하는 건 꽤 중요한 작업이죠.
예를 들어, 사용자로부터 입력을 받거나 API에서 데이터를 받아올 때, 예상치 못한 빈 값들이 있을 수 있습니다.
이런 값들을 제대로 처리하지 않으면 의도치 않은 오류가 발생할 수 있죠.
오늘은 이런 상황에서 유용하게 사용할 수 있는 빈 값 체크와 기본값 설정 로직을 소개하려고 해요!

1. 빈 값 체크 함수: isEmpty

빈 값, 즉 undefined, null, 그리고 빈 문자열 ""을 확인할 때는 isEmpty라는 함수를 사용할 수 있어요.
이 함수는 주어진 값이 빈 값인지 아닌지를 정확하게 판단해줍니다.

function isEmpty(str) {
    if (typeof str == "undefined" || str == null || str == "") {
        return true;
    } else {
        return false;
    }
}

console.log(isEmpty(""));        // true (빈 문자열)
console.log(isEmpty(null));      // true (null)
console.log(isEmpty(undefined)); // true (undefined)
console.log(isEmpty("Hello"));   // false (값 있음)

isEmpty 함수는 undefined, null, 빈 문자열 ""을 빈 값으로 처리하는데요, 이를 통해 데이터가 비어있는지 쉽게 체크할 수 있어요.

 

2. 빈 값일 때 기본값을 반환하는 nvl

nvl 함수는 널 병합(Null Coalescing) 개념을 사용한 함수입니다.
주어진 값이 빈 값이라면, 대신 기본값을 반환하게 할 수 있어요.
예를 들어, 사용자가 값을 입력하지 않았을 때, 기본값을 자동으로 넣어주는 데 유용하죠.

function nvl(str, defaultStr) {
    if (typeof str == "undefined" || str == null || str == "") {
        str = defaultStr;
    }
    return str;
}

console.log(nvl("", "기본값"));  // "기본값" (빈 문자열을 기본값으로 대체)
console.log(nvl(null, "기본값")); // "기본값" (null을 기본값으로 대체)
console.log(nvl(undefined, "기본값")); // "기본값" (undefined를 기본값으로 대체)
console.log(nvl("Hello", "기본값"));  // "Hello" (값이 있을 때는 그대로 반환)

이 함수는 값이 비어 있을 때만 기본값을 사용하고, 그렇지 않으면 주어진 값을 그대로 반환하므로, 입력 값에 기본값을 설정하는 데 유용하죠.

 

3. 값 비교 후 처리하는 changeStr

changeStr 함수는 주어진 값이 특정 문자열과 일치하는지 확인한 후, 그에 맞는 값을 반환하는 함수입니다.
만약 일치하면 기본값을, 그렇지 않으면 다른 값을 반환할 수 있어요.
예를 들어, 사용자가 특정 값과 일치하는 입력을 하면 다른 값을 설정하거나 변경할 때 유용합니다.

function changeStr(str, compareStr, defaultStr, changeStr) {
    if (str == compareStr) {
        str = defaultStr;
    } else {
        str = changeStr;
    }
    return str;
}

console.log(changeStr("Hello", "Hello", "기본값", "변경된 값")); // "기본값"
console.log(changeStr("Hi", "Hello", "기본값", "변경된 값"));    // "변경된 값"

이 함수는 특정 문자열을 기준으로 값을 변경할 때 유용하게 사용할 수 있어요.
예를 들어, 사용자가 "Hello"라고 입력했을 때는 기본값을 사용하고, 다른 값을 입력했을 때는 다른 값을 설정하는 방식으로 동작하죠.

 

빈 값 처리, 이렇게 좀 더 유연하게!

위에서 소개한 함수들은 기본적으로 undefined, null, 빈 문자열을 체크하는 방법입니다.
하지만 JavaScript에서 0, false, NaN 등도 "빈 값"처럼 취급할 수 있어요.
예를 들어, 사용자가 0을 입력했다고 해서 이 값이 유효한 값인지 아닌지 헷갈릴 수 있죠.
이런 경우에는 !str 처럼 Falsy 값을 체크하는 방식도 고려할 수 있습니다.

function isEmpty(str) {
    return !str; // falsy 값을 모두 빈 값으로 간주
}

이렇게 하면 0, false, NaN도 빈 값으로 취급할 수 있게 됩니다.

 

• isEmpty는 값이 빈 값인지 체크하는 함수로, 데이터가 올바르게 있는지 확인할 때 유용합니다.
• nvl은 빈 값일 때 기본값을 반환하는 함수로, 데이터가 없을 때 기본값을 넣어주는 데 도움을 줍니다.
• changeStr는 특정 문자열을 기준으로 값을 바꾸는 함수로, 조건에 따라 다른 값을 설정하는 데 사용됩니다.

이렇게 간단한 함수들로 빈 값 처리를 효율적으로 할 수 있고, 기본값을 쉽게 설정할 수 있습니다.
여러분의 코드에서 빈 값 처리나 기본값 설정이 필요할 때, 오늘 소개한 함수들을 꼭 한 번 사용해 보세요!

이 글이 여러분에게 도움이 되길 바랍니다.
그럼 다음에도 유용한 팁으로 돌아오겠습니다