위코드 코드카타를 정리한 내용입니다.

문제

아래와 같이 문자가 담긴 배열을 입력하면 같은 알파벳으로 이루어진 단어끼리 묶어줍니다.

// input
["eat", "tea", "tan", "ate", "nat", "bat"]

// output
[
   ["ate","eat","tea"],
   ["nat","tan"],
   ["bat"]
]

풀이

알파벳을 비교하기 위해, 전개구문으로 분리해서 배열에 담은 후 sort 메소드로 알파벳 순으로 정렬하고 join 합니다. 그 값을 key 값으로 정해서 빈 객체에 해당 키 값에 해당하는 값만 배열안에 value 로 담아주고, 최종 객체의 value 값만 모아서 배열로 반환하는 Oboject.values() 를 사용합니다.

const strs = ["eat", "tea", "tan", "ate", "nat", "bat"];

const groupAnagrams = strs => {
  const map = {}; // 빈객체 생성

  for (let str of strs) {
    const key = [...str].sort().join('');
}

우선 위 과정에서 구해지는 key 값을 콘솔을 아래처럼 콘솔을 찍어 확인해보면

const groupAnagrams = strs => {
  const map = {};

  for (let str of strs) {
    console.log("-------------str => ", str);
    console.log("[...str] => ", [...str]);
    console.log("[...str].sort() => ", [...str].sort())
    console.log("[...str].sort().join('') => ", [...str].sort().join(''))

    const key = [...str].sort().join('');
    console.log("key : ", key);

아래와 같습니다.

-------------str =>  eat
[...str] =>  [ 'e', 'a', 't' ]
[...str].sort() =>  [ 'a', 'e', 't' ]
[...str].sort().join('') =>  aet
key :  aet

for 문으로 각 배열의 문자를 선택하는 데 [...str] 형식으로 문자열을 분리해서 배열에 담아주고, sort 로 순서를 맞추고, join 으로 합쳐줍니다. 이렇게 구한 key 값을 활용해 같은 키값에 해당하는 문자만 배열에 담아주는데,

const groupAnagrams = strs => {
  const map = {};

  for (let str of strs) {
    const key = [...str].sort().join('');

    if (!map[key]) {
      map[key] = [];
    }

    map[key].push(str);
  }

  return Object.values(map);
};

해당 key 값이 없을 경우 map 객체에 빈배열을 만들어주고 그 key 값에 str을 넣어줍니다. 이후에 같은 key 값을 가진 str 이 나오면(알파벳이 같으면) 새로운 배열을 만들지 않고 그 key 값을 가진 value 에 해당하는 배열에 str 을 넣어줍니다. 그렇게 넣어준 후 Object.values 매서드로 값으로 이루어진 배열을 반환합니다. 아래와 같이 전체 콘솔을 찍어 반환되는 값을 확인할 수 있습니다.

const strs = ["eat", "tea", "tan", "ate", "nat", "bat"];

const groupAnagrams = strs => {
  const map = {};

  for (let str of strs) {
    console.log("-------------str => ", str);
    console.log("[...str] => ", [...str]);
    console.log("[...str].sort() => ", [...str].sort())
    console.log("[...str].sort().join('') => ", [...str].sort().join(''))

    const key = [...str].sort().join('');
    console.log("key : ", key);

    if (!map[key]) {
      console.log("map => ", map);
      console.log("key => ", key);
      console.log("map[key]", map[key]);
      console.log("!map[key] => ",!map[key])
      map[key] = [];
    }

    map[key].push(str);
    console.log(map);
  }

  return Object.values(map);
};

콘솔 확인

-------------str =>  eat
[...str] =>  [ 'e', 'a', 't' ]
[...str].sort() =>  [ 'a', 'e', 't' ]
[...str].sort().join('') =>  aet
key :  aet
map =>  {}
key =>  aet
map[key] undefined
!map[key] =>  true
{ aet: [ 'eat' ] }
-------------str =>  tea
[...str] =>  [ 't', 'e', 'a' ]
[...str].sort() =>  [ 'a', 'e', 't' ]
[...str].sort().join('') =>  aet
key :  aet
{ aet: [ 'eat', 'tea' ] }
-------------str =>  tan
[...str] =>  [ 't', 'a', 'n' ]
[...str].sort() =>  [ 'a', 'n', 't' ]
[...str].sort().join('') =>  ant
key :  ant
map =>  { aet: [ 'eat', 'tea' ] }
key =>  ant
map[key] undefined
!map[key] =>  true
{ aet: [ 'eat', 'tea' ], ant: [ 'tan' ] }
-------------str =>  ate
[...str] =>  [ 'a', 't', 'e' ]
[...str].sort() =>  [ 'a', 'e', 't' ]
[...str].sort().join('') =>  aet
key :  aet
{ aet: [ 'eat', 'tea', 'ate' ], ant: [ 'tan' ] }
-------------str =>  nat
[...str] =>  [ 'n', 'a', 't' ]
[...str].sort() =>  [ 'a', 'n', 't' ]
[...str].sort().join('') =>  ant
key :  ant
{ aet: [ 'eat', 'tea', 'ate' ], ant: [ 'tan', 'nat' ] }
-------------str =>  bat
[...str] =>  [ 'b', 'a', 't' ]
[...str].sort() =>  [ 'a', 'b', 't' ]
[...str].sort().join('') =>  abt
key :  abt
map =>  { aet: [ 'eat', 'tea', 'ate' ], ant: [ 'tan', 'nat' ] }
key =>  abt
map[key] undefined
!map[key] =>  true
{ aet: [ 'eat', 'tea', 'ate' ], ant: [ 'tan', 'nat' ], abt: [ 'bat' ] }
[ [ 'eat', 'tea', 'ate' ], [ 'tan', 'nat' ], [ 'bat' ] ]