문제 상황
JavaScript 프로그래밍을 하다 보면 문자열 배열에서 가장 긴 문자열을 찾아야 하는 경우가 종종 있습니다. 예를 들어 다음과 같은 문자열 배열이 있다고 가정해 보겠습니다.
const arr = [
'iLoveProgramming',
'thisisalsoastrig',
'Javascriptisfun',
'helloworld',
'canIBeTheLongest',
'Laststring'
];
여기서 요구되는 것은 이러한 문자열 배열을 인자로 받는 JavaScript 함수를 작성하는 것입니다. 함수의 목적은 배열에서 가장 긴 문자열을 모두 찾아내는 것입니다. 만약 가장 긴 문자열이 두 개 이상 존재한다면, 그 문자열들을 모두 포함해야 합니다.
최종적으로 함수는 배열 내에서 가장 긴 문자열들을 담은 배열을 반환해야 합니다.
해결 방법: reduce() 활용
이 문제는 Array.prototype.reduce() 메서드를 사용하면 우아하게 해결할 수 있습니다. reduce()는 배열의 각 요소를 순회하면서 누산기(accumulator)를 업데이트하므로, 지금까지 확인한 요소 중 가장 긴 문자열(들)을 계속 추적하기에 적합합니다.
핵심 로직은 다음과 같습니다.
- 첫 번째 요소이거나(
!ind), 현재 값val이 누산기의 첫 번째 문자열보다 길다면 → 새로운 배열[val]을 반환하여 최장 문자열 후보를 교체합니다. - 현재 값의 길이가 누산기 첫 번째 문자열의 길이와 같다면 → 기존 배열에
val을 추가(push)합니다. 이렇게 하면 길이가 동일한 여러 개의 최장 문자열을 모두 수집할 수 있습니다.
예제 코드
const arr = [
'iLoveProgramming',
'thisisalsoastrig',
'Javascriptisfun',
'helloworld',
'canIBeTheLongest',
'Laststring'
];
const getLongestStrings = (arr = []) => {
return arr.reduce((acc, val, ind) => {
if (!ind || acc[0].length < val.length) {
return [val];
}
if (acc[0].length === val.length) {
acc.push(val);
}
return acc;
}, []);
};
console.log(getLongestStrings(arr));
실행 결과
위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.
[ 'iLoveProgramming', 'thisisalsoastrig', 'canIBeTheLongest' ]
코드 설명
예제 배열에서 iLoveProgramming, thisisalsoastrig, canIBeTheLongest는 세 문자열 모두 길이가 16으로 동일합니다. 따라서 함수는 이 세 문자열을 모두 담은 배열을 반환합니다.
reduce()의 초기값으로 빈 배열 []을 전달하고, 인덱스 ind가 0일 때(즉, 첫 번째 요소일 때) 무조건 해당 값을 새로운 누산기로 설정하는 방식을 사용했기 때문에 빈 배열이 입력되어도 안전하게 처리됩니다.
대안: filter()와 Math.max() 조합
reduce() 대신 두 단계로 나누어 해결할 수도 있습니다. 먼저 배열에서 최대 길이를 구한 뒤, 그 길이와 일치하는 문자열만 필터링하는 방식입니다.
const getLongestStrings = (arr = []) => {
const maxLen = Math.max(...arr.map(str => str.length));
return arr.filter(str => str.length === maxLen);
};이 방식은 코드가 더 직관적이라는 장점이 있지만, 배열을 두 번 순회한다는 점에서 reduce()를 사용한 단일 순회 방식이 약간 더 효율적입니다. 상황에 맞게 선택하여 사용하시면 됩니다.