[JS]배열의 평균값 -프로그래머스120811 sort 함수의 동작 원리에 대해

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/120811

문제 설명

중앙값은 어떤 주어진 값들을 크기의 순서대로 정렬했을 때 가장 중앙에 위치하는 값을 의미합니다. 예를 들어 1, 2, 7, 10, 11의 중앙값은 7입니다. 정수 배열 array가 매개변수로 주어질 때, 중앙값을 return 하도록 solution 함수를 완성해보세요.

제한사항

• array의 길이는 홀수입니다.
• 0 < array의 길이 < 100
• -1,000 < array의 원소 < 1,000

입출력 예

array	result
[1, 2, 7, 10, 11]	7
[9, -1, 0]	0

 
입출력 예 설명

입출력 예 #1

• 본문과 동일합니다.

입출력 예 #2

• 9, -1, 0을 오름차순 정렬하면 -1, 0, 9이고 가장 중앙에 위치하는 값은 0입니다.

---

내가 작성한 코드

우선 주어진 배열을 오름차순 또는 내림차순으로 정렬해야 중앙값을 구할 수 있다
그래서 자바스크립트 sort함수를 사용했다

const solution=(array)=>{
	array=array.sort ();
	answer=array [(array.length+1)/2-1];
	return answer;
}

그런데 아래 테스트 케이스에서 문제가 발생했다
 

테스트 3에서 왜 결과값이 -3이 나왔을까?
[-1, -2, -3, 0, 1]을 정렬했는데, 그 정렬값이 그대로 [-1, -2, -3, 0, 1]로 나온 것이다.
 
 

왜 숫자 정렬이 이상하게 될까? sort()함수 동작 원리

그 이유는 바로 sort() 함수의 동작 원리에 있다.
sort()함수를 그냥 호출하면, 배열의 요소들이
toString() 메서드를 사용해 문자열로 변환된다.

그리고 이 문자열을 사전순으로 정렬한다. 
따라서 숫자 배열에서 원하는 대로 정렬이 되지 않는다.
 

첫 번째 예시

예를 들어 아래 배열을 sort()함수로 정렬해보자.

let arr = [10, 1, 2, 11, 4];
arr.sort();
console.log（arr）；//["1", "10", "22", "2", "4"]

사전순으로 정렬이 되기 때문에, 1 다음에 10,11이 나오고, 그 다음에 2가 나온다
 

두 번째 예시

또 다른 예시를 들어보자. 이번에는 음수를 정렬해보자

let arr = [-1, -2, 10, 11, -3];
arr.sort();
console.log（arr）：//["-1", "-2", "-3", "10", "11"]

sort()함수를 사용하자, 모든 배열값이 문자열로 변환되었다.
그러면 자바스크립트 입장에서는 -1은 음수라는 의미가 전달되지 않는다
그냥 -기호 뒤에 1이라는 기호가 붙은 '문자열' 일 뿐이다.
 

sort함수 제대로 사용하기

그럼 문제를 어떻게 풀어야 할까?
sort() 함수를 이용해서 정렬하는 것은 맞다.
다만, 여기서 함수의 인자값에 비교함수 를 넣어줘야 한다.
 
비교함수는 두개의 요소를 비교하여, 첫번째 요소가 두번째 요소보다 작으면 음수를, 크면 양수를, 같으면 0을 반환한다
 
우선 코드를 보자

/* 오름차순으로 정리하기 */
Array.sort((a, b)=>{
	return a - b;
});

에서 a가 b보다 작으면 음수를, 크면 양수를, 같으면 0을 반환한다
값이 양수면(a>b), 즉 그 두개가 내림차순으로 정렬되어 있으면 a와 b의 순서를 바꾼다. 
그리고 작거나 같으면 그대로 둔다
 

무슨 소리일까?

예시를 통해 알아보자.

 

sort()함수 매커니즘(중요!)

주어진 예시 배열이 있다: [1,2,-1,-2,-3]

 

 

규칙: 기본적인 탐색은 두 개씩 묶어, 왼쪽에서 오른쪽으로 진행한다

(a,b)에서 a는 왼쪽에 있는 값, b는 오른쪽에 있는 값이다. 

두 수를 비교하고 오름차순으로 정렬되어 있으면, 그대로 두고(순서를 바꾸지 않고) 다음 묶음으로 이동한다

탐색 방향은 계속 오른쪽이다

 

 

다음 묶음을 비교한다

이번에는 왼쪽에 있는 값이 더 크다. 

이 경우 순서를 바꿔준다.

그리고 sort()함수에서 가장 중요한것!!! 이렇게 순서가 바뀌는 경우! 탐색 방향을 왼쪽으로 바꾼다.

순서가 바뀌었기 때문에, 왼쪽에 있는 값들 끼리도 비교를 해줘야 하기 때문에 그렇다.

 

이렇게 순서가 바뀌어서, 탐색방향이 바뀐 경우, 연두색 형광펜으로 묶음을 칠하겠다

 

 

왼쪽에 있는 애들끼리 비교를 해준다

이 경우, a(1)>b(-1)이기 때문에, 오름차순으로 정렬해주기 위해 순서를 바꾼다

 

한편, 순서가 바뀐 경우, 탐색 방향을 왼쪽으로 바꾸기로 약속했지만, 배열의 왼쪽 끝 까지 왔기 때문에 더 탐색할 곳이 없다

이런 경우 다시 원래대로 오른쪽 방향으로 탐색을 시작한다

 

 

비교를 해준다

1,2 오름차순으로 잘 정렬 되어있기 때문에 그대로 오른쪽 묶음으로 이동한다

 

 

비교를 해주고 순서를 바꾼다

2, -2는 우리가 원하는 정렬 순서가 아니다

순서를 바꿔준다

순서를 바꿔줬기 때문에, 다음 탐색 방향은 이제부터 왼쪽이다. 

 

 

왼쪽 묶음을 비교 해준다

또 순서를 바꿔준다

다음 탐색방향은 왼쪽 끝까지 갈 때 까지 계속 왼쪽이다

 

 

비교를 해준다 

순서를 바꾼다

순서가 바뀐 경우, 탐색 방향을 왼쪽으로 바꾸기로 약속했지만, 배열의 왼쪽 끝 까지 왔기 때문에 더 탐색할 곳이 없다

원래대로 오른쪽 방향으로 탐색을 시작한다

 

 

계속 같은 규칙대로 순서를 바꾸며 탐색한다

이제 조금 이해가 갈 것 같지 않은가?

계속 2개씩 묶어가며 오름차순으로 정렬 되어 있는지 비교해준다

위 두 경우 다 문제가 없기 때문에, 마지막 묶음으로 이동한다

 

 

비교를 해준다

비교를 했는데, 오름차순이 아니라서 순서를 바꿔준다

'순서가 바뀌는 경우' 탐색 방향을 왼쪽으로 바꾸기로 약속했기 때문에

해당 규칙에 따라 왼쪽으로 탐색을 시작해준다

 

 

비교를 해준다

참고로, 비교 함수가 sort(a,b)=a-b인 이유는, 리턴값: a-b 값에 따라 순서가 바뀔지 말지 결정되기 때문이다

a-b=1-(-3)=4 이다. 이렇게 양수인경우 순서를 바꾸기로 규칙을 정했다

이건 자바스크립트가 혼자서 이렇게 하겠다고 말한 규칙이니까 이것에 대해 의문을 품지는 말자

 

 

비교를 해준다

a-b=-1-(-3)=2 이다.

값이 양수니까 순서를 바꿔준다

 

 

비교를 해준다

비교를 하고 순서를 바꿔준다

한편, 배열의 왼쪽 끝 까지 왔기 때문에 더 탐색할 곳이 없다

원래대로 오른쪽 방향으로 탐색을 시작한다

 

 

계속 같은 방법으로 탐색한다

계속 규칙에 따라 정렬하다 보면 위와 같이 오름차순으로 정렬이 잘 된 것을 확인할 수 있다
 

 

최종 코드

const solution=(array)=>{
    array.sort((a, b) => a - b);
    answer=array[~~((array.length)/2)];
    return answer;
}

 

 
자바스크립트는 내장 함수가 정말 강력한데, 한편으로는 엄청 자유로워서 많이 써보고 주의 사항을 익히는것이 중요한 것 같다
더군다나 다른 언어에 비해 자바스크립트 코테 자료는 정말 없어서 sort()함수를 이해하느라 하루를 다 썼다

 

열심히 고민한 흔적이다 🥹

도움이 되셨으면 공감과 댓글 눌러주세요~

 

 

 

 

ⓒ clice lee
clicelee의 개발일지 입니다