JavaScript에서 문자열의 각 문자를 인덱스 배열로 매핑하는 방법

문자열이 주어졌을 때, 각 문자가 등장한 인덱스를 배열 형태로 저장하는 객체를 생성하는 함수를 작성해야 합니다. 이때 문자열의 문자(요소)는 객체의 키(key)가 되고, 해당 문자가 나타난 인덱스들을 담은 배열은 객체의 값(value)이 됩니다.

예시

입력 문자열이 다음과 같다고 가정해 보겠습니다.

const str = 'cannot';

그렇다면 기대되는 출력 결과는 아래와 같습니다.

const output = {
  'c': [0],
  'a': [1],
  'n': [2, 3],
  'o': [4],
  't': [5]
};

위 결과를 보면 문자 'n'은 문자열 내에서 두 번 등장하므로 인덱스 2와 3이 하나의 배열에 함께 저장된 것을 확인할 수 있습니다.

구현 코드

다음은 이 문제를 해결하는 자바스크립트 코드입니다.

const str = 'cannot';

const mapString = str => {
  const map = {};
  for (let i = 0; i < str.length; i++) {
    if (map.hasOwnProperty(str[i])) {
      map[str[i]] = map[str[i]].concat(i);
    } else {
      map[str[i]] = [i];
    }
  }
  return map;
};

console.log(mapString(str));

코드 설명

동작 원리를 단계별로 살펴보면 다음과 같습니다.

1. 빈 객체 map을 생성하여 결과를 저장할 준비를 합니다.
2. for 반복문으로 문자열을 한 글자씩 순회합니다.
3. hasOwnProperty() 메서드로 현재 문자가 이미 객체의 키로 존재하는지 확인합니다.
4. 이미 존재한다면 concat()으로 기존 배열에 현재 인덱스를 추가하고, 존재하지 않는다면 새로운 배열을 만들어 현재 인덱스를 넣습니다.
5. 모든 순회가 끝나면 완성된 객체를 반환합니다.

출력 결과

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

{ c: [ 0 ], a: [ 1 ], n: [ 2, 3 ], o: [ 4 ], t: [ 5 ] }

참고: reduce()를 활용한 대안

같은 로직을 reduce() 메서드를 사용해 더 간결하게 표현할 수도 있습니다.

const mapString = str => {
  return [...str].reduce((acc, char, index) => {
    (acc[char] = acc[char] || []).push(index);
    return acc;
  }, {});
};

이 방식은 코드가 짧아질 뿐만 아니라 가독성도 좋아져 실무에서 자주 활용됩니다. 상황에 맞게 두 방식 중 편한 방법을 선택하면 됩니다.