JavaScript에서 문자열 조합 시 거짓값(Falsy) 제외하고 배열 연결하기

JavaScript 개발을 하다 보면 문자열 값과 null, undefined, 0, 빈 문자열 같은 거짓값(falsy)이 뒤섞인 배열을 다루는 경우가 종종 있습니다.

이럴 때 배열의 모든 값을 하나의 문자열로 이어 붙이되, 거짓값은 자동으로 제외하는 함수를 작성하는 방법을 알아보겠습니다.

JavaScript의 거짓값(Falsy)이란?

JavaScript에서 다음 값들은 불리언 문맥에서 false로 평가됩니다.

• false
• null
• undefined
• 0, -0, NaN
• 빈 문자열 ""

예제 코드

const arr = ["Here", "is", null, "an", undefined, "example", 0, "", "of", "a", null, "sentence"];
const joinArray = arr => {
    const sentence = arr.reduce((acc, val) => {
        return acc + (val || "");
    }, "");
    return sentence;
};
console.log(joinArray(arr));

코드 설명

핵심은 (val || "") 부분입니다. 논리 OR(||) 연산자는 왼쪽 피연산자가 거짓값일 때 오른쪽 값을 반환하므로, null, undefined, 0, 빈 문자열 같은 거짓값은 모두 빈 문자열로 대체되어 결과에 아무런 영향을 주지 않습니다.

reduce() 메서드는 초기값으로 빈 문자열 ""을 설정한 뒤, 배열의 각 요소를 순회하면서 누적값(acc)에 현재 값을 더해 최종 문자열을 만들어냅니다.

출력 결과

Hereisanexampleofasentence

참고: 단어 사이에 공백을 넣고 싶다면?

위 방식은 단순히 값을 이어 붙이기 때문에 공백 없이 출력됩니다. 만약 단어 사이에 공백을 포함한 자연스러운 문장을 만들고 싶다면 filter()와 join()을 조합하는 것이 더 깔끔합니다.

const joinWithSpace = arr => arr.filter(Boolean).join(" ");
console.log(joinWithSpace(arr)); // "Here is an example of a sentence"

filter(Boolean)은 거짓값을 모두 걸러내고, join(" ")은 남은 문자열들을 공백으로 구분하여 연결해 줍니다. 상황에 맞게 두 방법 중 적절한 것을 선택하면 됩니다.