Level 1 | K 번째 수_JavaScript

문제 설명

배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.
예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면

    1. array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다.
    2. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다.
    3. 2에서 나온 배열의 3번째 숫자는 5입니다.

배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때,
commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를
배열에 담아 return 하도록 solution 함수를 작성해주세요.

---

제한 사항

• array의 길이는 1 이상 100 이하입니다.
• array의 각 원소는 1 이상 100 이하입니다.
• commands의 길이는 1 이상 50 이하입니다.
• commands의 각 원소는 길이가 3입니다.

---

코드

// ① map, slice, sort
const solution = (array, commands) =>
commands.map((v) =>
array.slice(v[0] - 1, v[1]).sort((a, b) => a - b)[v[2] - 1]);

// ② reduce, concat, slice, sort
const solution = (array, commands) =>
commands.reduce((result, v) => 
result.concat(array.slice(v[0] - 1, v[1]).sort((a, b) => a - b)[v[2] - 1]), []);

// ③ 명시적으로 풀기, Destructuring
const solution = (array, commands) => 
commands.map(([from, to, target]) => 
array.slice(from - 1, to).sort((a, b) => a - b)[target - 1]);

---

풀이

① map, slice, sort

자바스크립트에는 배열을 편리하게 다룰 수 있도록 하는 함수가 많이 있기 때문에 이를 이용해서 문제를 해결할 수 있다.
먼저 원소가 순환해야 하는 배열은 2차 배열인 commands 배열이다.
각 원소의 요소가 i, j, k 에 해당하는 값이기 때문이다.

따라서 commands 배열에 map() 함수를 이용해서 각 원소를 순환할 수 있도록 한다.
map() 함수는 배열의 각 요소를 순환하는데 ()안에 주어진 함수가 리턴한 값으로 새로운 배열을 생성해서 반환한다.
array는 매번 고정된 배열이므로 그대로 가져와서 i(v[0]), j(v[1])에 해당하는 만큼의 길이를 slice() 함수를 이용해서 추출하고
추출한 배열을 다시 sort()함수를 이용해서 오름차순으로 정렬한다.

sort() 함수 내부의 함수는 현재 요소와 다음 요소를 인자로 받는데

두 값의 차이가 음수이면 오름차순으로 정렬하고 양수이면 내림차순으로 정렬한다.
그렇게 정렬된 배열에서 k(v[2]) 번째 요소를 반환하도록 하면

map()함수가 완료되었을 때 k 번째 요소로 이루어진 새로운 배열을 반환받을 수 있다.

---

② reduce, concat, slice, sort

reduce() 함수도 map() 함수와 유사하게 해당 배열을 순환하지만 초기값과 누적값을 이용할 수 있다는 점이 다르다.
위에 작성된 코드를 보면 reduce() 함수의 첫 번째 인자로는 함수가, 두 번째 인자로는 [] 빈 배열이 주어진 것을 볼 수 있다.

두 번째 인자는 반환될 값의 초기값을 지정하는 데에 사용되며,

첫 번째 인자인 함수의 첫 번째 인자는 초기값에서부터 누적되는 값을, 두 번째 인자는 현재 값을 나타낸다.
따라서 초기값을 빈 배열로 두고 그것을 result 매개변수로 받은 뒤

array.slice~의 반환 값을 result에 concat() 함수로 이어주면 ① 번에서 도출한 답과 동일한 답을 이끌어낼 수 있다.

---

③ Destructuring을 이용해서 명시적으로 풀기

①, ② 번 코드를 보면 한 눈에 의미를 파악하기 어려운 알파벳과 숫자로만 이루어져 있어서 가독성이 좋지 않다.
따라서 코드에 의미를 부여하기 위해서 단어 위주로 변수를 사용해주는 것이 필요해 보이는데

이 문제에서 의미가 필요한 부분은 commands 배열의 각 요소 배열의 요소들이다.
따라서 map()함수에서 매개변수를 받을 때 구조 분해 할당을 이용해서

commands 배열의 각 요소 배열의 요소들을 [from, to, target] 변수로 할당한다.
이렇게 재할당된 변수명을 가지고 코드를 다시 작성하면 어떤 기능을 하는 코드인지 보다 수월하게 파악하는 것이 가능해진다.

 

출처: [https://programmers.co.kr/learn/courses/30/lessons/42748?language=javascript]