JavaScript – null 값이 포함된 배열을 문자열로 변환하는 방법

JavaScript에서 배열을 다루다 보면 문자열 값과 함께 null 또는 undefined 같은 nullish(널리시) 값이 섞여 있는 경우가 자주 있습니다.

이런 배열을 그대로 join() 메서드로 합치면 원하지 않는 구분자나빈 공백이 남게 됩니다. 따라서 nullish 값을 제외하고 나머지 값들만 이어 붙여 하나의 문자열을 만드는 함수를 작성해야 합니다.

문제 상황

다음과 같이 null, undefined, 빈 문자열, 숫자 0까지 섞여 있는 배열이 있다고 가정해 보겠습니다.

const arr = ["Here", "is", null, "an", undefined, "example", 0, "", "of", "a", null, "sentence"];

목표는 이 배열에서 nullish 값들을 건너뛰고, 유효한 값들만 연결하여 하나의 문장 형태의 문자열을 반환하는 것입니다.

reduce()를 활용한 해결 방법

Array.prototype.reduce() 메서드를 사용하면 배열의 각 요소를 순회하면서 누적값에 필요한 값만 더하는 방식으로 간단히 해결할 수 있습니다.

핵심 아이디어는 (val || "") 표현식입니다. JavaScript에서 null, undefined, 0, ""은 모두 falsy 값으로 평가되므로, falsy 값일 경우 빈 문자열 ""로 대체되어 결과 문자열에 아무 영향을 주지 않습니다.

예제 코드

const arr = ["Here", "is", null, "an", undefined, "example", 0, "",
"a", null, "sentence"];

const joinArray = arr => {
    const sentence = arr.reduce((acc, val) => {
        return acc + (val || "");
    }, "");
    return sentence;
};

console.log(joinArray(arr));

실행 결과

코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

Hereisanexampleofasentence

동작 원리 정리

• 초기값: reduce()의 두 번째 인수로 빈 문자열 ""을 전달하여 누적을 시작합니다.
• falsy 값 처리: val || "" 덕분에 null, undefined, 0, ""은 모두 빈 문자열로 치환됩니다.
• 문자열 연결: truthy 값인 문자열들은 그대로 누적값 뒤에 붙어 최종 문장이 완성됩니다.

참고: join()과 filter()를 조합한 대안

같은 결과를 얻는 또 다른 방법은 filter()로 nullish 값을 먼저 제거한 뒤 join()을 사용하는 것입니다.

const result = arr.filter(val => val).join("");
console.log(result); // Hereisanexampleofasentence

다만 이 방법 역시 0과 ""이 falsy로 평가되어 제거되므로, 숫자 0을 반드시 포함해야 하는 경우에는 별도의 조건 처리가 필요합니다.