JavaScript에서 배열의 중앙값이란?
중앙값(median)은 배열의 요소들을 크기순으로 정렬했을 때 정확히 가운데 위치하는 값을 의미합니다. 통계 분석에서 평균보다 이상치(outlier)의 영향을 덜 받기 때문에 데이터의 중심 경향을 파악하는 데 자주 활용됩니다.
배열의 중앙값을 구하는 절차는 다음과 같습니다.
1. 배열을 오름차순으로 정렬합니다.
2. 요소 개수가 홀수라면 → 정렬된 배열의 가운데 값을 그대로 반환합니다.
3. 요소 개수가 짝수라면 → 가운데 두 값의 산술 평균을 중앙값으로 반환합니다.
예제 코드
다음은 JavaScript에서 버튼 클릭 시 배열의 중앙값을 계산하여 화면에 출력하는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,
.sample {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
.sample {
color: red;
}
</style>
</head>
<body>
<h1>Calculating median of an array</h1>
<div><pre class="sample"></pre></div>
<div class="result"></div>
<button class="Btn">Calculate</button>
<h3>Click on the above button to calculate the median of the above array</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let sampleEle = document.querySelector(".sample");
let arr = [1, 5, 6, 99, 12, 11, 22];
sampleEle.innerHTML = arr;
BtnEle.addEventListener("click", () => {
let middle = Math.floor(arr.length / 2);
arr = [...arr].sort((a, b) => a - b);
if (arr.length % 2 !== 0) {
resEle.innerHTML = "Median = " + arr[middle];
} else {
resEle.innerHTML = "Median = " + (arr[middle - 1] + arr[middle]) / 2;
}
});
</script>
</body>
</html>코드 핵심 로직 설명
1. 스프레드 연산자로 원본 배열 보호
[...arr].sort((a, b) => a - b)처럼 스프레드 연산자(...)를 사용하면 원본 배열을 변경하지 않고 복사본만 정렬할 수 있습니다. 또한 (a, b) => a - b 비교 함수를 넣어야 숫자 기준 오름차순 정렬이 올바르게 동작합니다. 비교 함수 없이 정렬하면 문자열 기준으로 정렬되어 잘못된 결과가 나올 수 있습니다.
2. 홀수/짝수 개수 분기 처리
Math.floor(arr.length / 2)로 가운데 인덱스를 구한 뒤, 배열 길이가 홀수면 해당 인덱스의 값을, 짝수면 (arr[middle - 1] + arr[middle]) / 2로 두 값의 평균을 계산합니다.
실행 결과
페이지를 열면 다음과 같이 샘플 배열이 표시됩니다.
'Calculate' 버튼을 클릭하면 아래와 같이 계산된 중앙값이 출력됩니다.
예제에서 사용한 배열 [1, 5, 6, 99, 12, 11, 22]는 요소가 7개(홀수)이므로, 정렬 후 가운데 위치한 값인 11이 중앙값으로 출력됩니다.