JavaScript로 배열에서 공백을 제외한 가장 긴 문자열의 인덱스 찾기

문자열 리터럴로 이루어진 배열을 받아, 그중 가장 긴 문자열의 인덱스를 반환하는 함수를 작성해야 합니다. 이때 문자열의 길이를 계산할 때는 공백(whitespace)이 차지하는 길이는 제외해야 합니다.

또한 두 개 이상의 문자열이 동일한 최대 길이를 가질 경우, 그중 가장 먼저 등장하는 문자열의 인덱스를 반환해야 한다는 조건도 있습니다.

문제 해결 접근 방식

해결 방법은 다음과 같습니다.

먼저 배열을 순회하면서 각 요소를 공백 기준으로 분리(split)한 뒤 다시 하나로 합쳐(join) 실제 길이를 계산합니다. 계산된 길이는 객체에 저장하고, 현재 저장된 최대 길이보다 더 긴 문자열을 발견하면 해당 객체를 갱신합니다. 모든 순회가 끝나면 저장해 둔 인덱스를 반환하면 됩니다.

이 과정에서 자바스크립트의 reduce() 메서드를 활용하면 코드를 훨씬 간결하게 작성할 수 있습니다. reduce()는 배열의 각 요소를 순회하면서 누적값(accumulator)을 지속적으로 업데이트하는 고차 함수로, 이런 '최댓값 찾기' 문제에 특히 적합합니다.

예제 코드

const arr = ['Hello!', 'How are you', 'Can ', 'I use', 'splice method with', ' strings in Js?'];

const findLongestIndex = (arr) => {
  const longest = arr.reduce((acc, val, index) => {
    // 공백을 제거한 실제 길이 계산
    const actualLength = val.split(" ").join("").length;

    if (actualLength > acc.length) {
      return {
        index,
        length: actualLength
      };
    }
    return acc;
  }, {
    index: 0,
    length: 0
  });

  return longest.index;
};

console.log(findLongestIndex(arr));

실행 결과

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

코드 설명

예제 배열의 각 문자열에서 공백을 제거한 실제 길이를 살펴보면 다음과 같습니다.

'Hello!' → 6자
'How are you' → 9자
'Can ' → 3자
'I use' → 4자
'splice method with' → 16자
' strings in Js?' → 12자

공백을 제외했을 때 가장 긴 문자열은 'splice method with'(16자)이며, 이 문자열의 인덱스는 4입니다. 따라서 함수는 4를 반환합니다.

또한 reduce()는 조건이 일치할 때만 누적값을 교체하기 때문에, 길이가 같은 문자열이 여러 개 있더라도 자연스럽게 첫 번째로 발견된 문자열의 인덱스가 유지됩니다. 이 덕분에 별도의 추가 처리 없이도 문제의 조건을 만족할 수 있습니다.