JavaScript 배열 반복 결과를 한 줄 텍스트 문자열로 변환하는 방법

JavaScript에서 문자열과 배열이 주어졌을 때, 배열의 각 요소가 해당 문자열에 포함되어 있는지 여부를 판별한 결과를 true와 false로만 이루어진 한 줄의 텍스트 문자열로 변환하는 방법을 알아보겠습니다.

문제 상황

예를 들어, 다음과 같은 문자열과 배열이 있다고 가정해 보겠습니다.

const textString = 'Convert javascript array iteration result into a single line text string. Happy searching!';
const keywords = ['integer', 'javascript', 'dry', 'Happy', 'exam'];

여기서 우리가 작성해야 할 함수는 배열을 순회하면서 각 요소가 문자열에 존재하는지 확인하고, 그 결과를 true 또는 false 값으로 매핑한 뒤 하나의 문자열로 합쳐야 합니다.

해결 방법: reduce()와 includes() 활용

이 문제는 배열의 reduce() 메서드와 문자열의 includes() 메서드를 조합하면 간단하게 해결할 수 있습니다. reduce()로 각 요소의 포함 여부를 불리언 값으로 누적한 후, join() 메서드를 사용해 결과를 쉼표로 구분된 한 줄 문자열로 만듭니다.

예제 코드

const textString = 'Convert javascript array iteration result into a single line text string. Happy searching!';
const keywords = ['integer', 'javascript', 'dry', 'Happy', 'exam'];

const includesString = (arr, str) => {
    return arr.reduce((acc, val) => {
        return acc.concat(str.includes(val));
    }, []).join(', ');
};

console.log(includesString(keywords, textString));

코드 설명

• str.includes(val): 문자열에 해당 키워드가 포함되어 있으면 true, 없으면 false를 반환합니다.
• acc.concat(...): 각 판별 결과를 빈 배열에 순차적으로 추가합니다.
• .join(', '): 누적된 불리언 값들을 쉼표와 공백으로 구분하여 하나의 문자열로 연결합니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

false, true, false, true, false

결과를 해석해 보면, 'integer'는 문자열에 없고(false), 'javascript'는 있으며(true), 'dry'는 없고(false), 'Happy'는 있으며(true), 'exam'은 없다(false)는 의미입니다. 참고로 'exam'은 'example'이라는 단어의 일부처럼 보이지만 원본 문자열에는 해당 단어가 없기 때문에 false가 반환됩니다.

마무리

이처럼 reduce(), includes(), join() 세 가지 메서드만 활용하면 배열 반복 결과를 손쉽게 한 줄 텍스트 문자열로 변환할 수 있습니다. 대량의 키워드를 검사해야 하는 경우에도 이 패턴은 간결하고 가독성이 뛰어나 실무에서 유용하게 사용됩니다.