자바스크립트 입문 2주차 과제

2주차에 배운 것을 활용하는 숙제를 풀어보는 시간이다. 배열을 제시된 조건에 따라 정렬하는 예제이다.

문제 설명

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다.

예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.

제한 조건

• strings는 길이 1 이상, 50이하인 배열입니다.
• strings의 원소는 소문자 알파벳으로 이루어져 있습니다.
• strings의 원소는 길이 1 이상, 100이하인 문자열입니다.
• 모든 strings의 원소의 길이는 n보다 큽니다.
• 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다.

입출력 예

strings	n	return
["sun", "bed", "car"]	1	["car", "bed", "sun"]
["abce", "abcd", "cdx"]	2	["abcd", "abce", "cdx"]

입출력 예 설명

입출력 예 1"sun", "bed", "car"의 1번째 인덱스 값은 각각 "u", "e", "a" 입니다. 이를 기준으로 strings를 정렬하면 ["car", "bed", "sun"] 입니다.

입출력 예 2"abce"와 "abcd", "cdx"의 2번째 인덱스 값은 "c", "c", "x"입니다. 따라서 정렬 후에는 "cdx"가 가장 뒤에 위치합니다. "abce"와 "abcd"는 사전순으로 정렬하면 "abcd"가 우선하므로, 답은 ["abcd", "abce", "cdx"]입니다.

---

풀이

어렴풋이 sort() 메소드를 사용해야한다는 것은 알았지만 구체적으로 어떻게 활용해야할지 감이 오지 않았다. 사전 순으로 정렬하는 것 뿐이라면 간단하다. 하지만 조건을 만족시키기 위해서 어떻게 응용할지 떠오르지가 않았고 구글링을 통해 비교 함수를 이용하면 된다는 내용을 살펴보았다. 그러나 결국 이해하지 못해 이 방법은 포기하기로 했다. 다른 방법을 찾지 못해 결국 힌트를 펼쳐보았는데 힌트 내용은 다음과 같다.

힌트

1) 입력으로 받아온 문자열의 ‘배열’을 정렬하는 문제입니다.

우리의 과제는 정렬하는 로직을 구현하는 것 입니다.

2) 정렬하는 로직을 구현하는 아이디어 입니다.

1. 기본적으로 사전식 정렬입니다. 문자열 배열같은 경우 sort로 정렬이 가능합니다.
2. 그런데 인덱스에 해당하는 문자 순서로 정렬하고, 그 인덱스에 해당하는 문자가 같은 경우 사전식으로 정렬해주는 작업이 필요합니다.
3. 물론 성능적인 측면에서 더 좋은 방법이 있지만, 지금은 가장 쉬운 방법을 채택하려고 합니다.

3) 결론적으로 아래와 같은 순서로 구현하시면 쉽습니다.

1. 문자열 앞에 인덱스에 해당하는 문자를 붙인다
   1. ["sun", "bed", "car"], 1 이라면 → ["usun", "ebed", "acar"]
2. 사전순으로 정렬한다
   1. ["acar", "ebed", "usun"]
3. 정렬된 배열의 가장 앞 글자를 땐다
   1. ["car", "bed", "sun"]

4) 위와 같은 방법으로 구현하셨다면, 성능적으로(시간복잡도 상) 개선을 해봐도 좋지만, 오늘 배운 배열의 메서드를 이용해서 1,2,3번의 로직을 구현하는 것을 연습해보시는걸 추천합니다 🙂

힌트를 살펴본 뒤 우선 순서에 따라 하드 코딩을 했다. 하드 코딩을 한 뒤 규칙성을 발견하면 규칙에 따라 코드를 수정하면 된다. 무식한 방식이긴하지만 로직이 바로 안 떠오를 땐 이 방법이 과정을 확인하며 오류를 쉽게 찾을 수 있어 최고다.

// 일단 인풋값 예시를 입력한 뒤
let strings = ["abce", "abcd", "cdx"]
let n = 1

// 1. 문자열 앞에 인덱스에 해당하는 문자를 붙인다.
strings[0] = strings[0][n] + strings[0]
strings[1] = strings[1][n] + strings[1]
strings[2] = strings[2][n] + strings[2]

// 2. 사전순으로 정렬시킨다.
strings.sort();

// 3. 정렬된 배열의 가장 앞 글자를 땐다.
strings[0] = strings[0].slice(1);
strings[1] = strings[1].slice(1);
strings[2] = strings[2].slice(1);

// 출력
console.log(strings)

위와 같이 작성한 뒤 의도한 대로 문자열이 정렬되는 것을 확인했다. 반복되는 규칙성을 확인했으니 아래와 같이 수정해준다.

for (let i = 0; i < strings.length; i++) {
  strings[i] = strings[i][n] + strings[i];
}

strings.sort();

for (let i = 0; i < strings.length; i++) {
  strings[i] = strings[i].slice(1);
}

수정된 코드를 이제 함수로 만들어 준다.

function rearrange(strings, n) {
  const strlength = strings.length;

  for (let i = 0; i < strlength; i++) {
    strings[i] = strings[i][n] + strings[i];
  }
  strings.sort();
  for (let i = 0; i < strlength; i++) {
    strings[i] = strings[i].slice(1);
  }
  return strings;
}

정리를 마치고 나니 간단한데 처음 아무것도 쓰여 있지 않은 에디터에서는 바로 로직이 떠오르지 않았다. 아마 머리 속에서 로직을 그리는 훈련이 되지 않아 바로 떠오르지 않는 것 같다. 로직이 떠오르지 않아 하드코딩으로 도망치는 건 부끄럽지만 도움이 된다.