배열 순회와 숫자 정렬

여러 값을 담는 배열

배열은 순서가 있는 값들을 한 이름으로 묶습니다. [12, 3, 25, 8]은 네 숫자를 담은 배열입니다. 각 위치의 번호를 인덱스라고 하며 첫 위치는 1이 아니라 0입니다. 따라서 scores[0]은 12이고 scores[3]은 8입니다. scores.length는 배열에 들어 있는 항목 수인 4를 나타냅니다.

반복문에서 인덱스를 0부터 시작하고 index < scores.length인 동안 실행하면 실제 항목의 위치를 차례로 방문할 수 있습니다. 각 숫자를 합계에 더하면 배열 전체의 합을 구할 수 있습니다.

실행 예제와 결과

const scores = [12, 3, 25, 8];
console.log("첫 점수", scores[0]);
console.log("점수 개수", scores.length);

let total = 0;
for (let index = 0; index < scores.length; index = index + 1) {
  total = total + scores[index];
}
console.log("합계", total);

function isAtLeastTen(score) {
  return score >= 10;
}
const selected = scores.filter(isAtLeastTen);
console.log("10 이상", selected.join(", "));

const sorted = scores.slice();
function compareNumbers(first, second) {
  return first - second;
}
sorted.sort(compareNumbers);
console.log("정렬 결과", sorted.join(", "));
console.log("원본", scores.join(", "));

합계는 48입니다. filter는 배열의 각 값에 isAtLeastTen 함수를 적용하고 참을 반환한 값만 모아 새 배열을 만듭니다. 그 결과는 12와 25입니다. join(", ")은 배열의 값 사이에 쉼표와 공백을 넣어 하나의 문자열로 만듭니다.

slice()는 이 예제에서 배열의 얕은 복사본을 만듭니다. 숫자만 담긴 복사본을 sort로 정렬해도 원본의 순서는 유지됩니다. 비교 함수가 first - second를 반환하면 작은 숫자가 앞에 오도록 정렬할 수 있어 결과는 3, 8, 12, 25입니다.

인덱스와 정렬의 주의점

항목이 네 개라면 유효한 인덱스는 0부터 3까지입니다. 반복 조건을 index <= scores.length로 쓰면 존재하지 않는 4번 위치까지 읽게 됩니다. 그 값은 undefined이며 숫자 합계에 더하면 기대한 결과가 나오지 않습니다. 빈 배열의 길이는 0이므로 이 반복문은 한 번도 실행되지 않고 합계는 초기값 0으로 남습니다.

sort는 호출한 배열 자체의 순서를 바꿉니다. 원래 순서가 필요하다면 예제처럼 먼저 복사하세요. 또한 비교 함수를 생략한 기본 정렬은 값을 문자열 기준으로 비교하므로 숫자의 크기순과 다를 수 있습니다. slice는 얕은 복사라는 점도 기억하세요. 배열 안에 객체가 있다면 객체 자체까지 새로 복사하는 것은 아닙니다.

원본·필터 결과·정렬 결과를 따로 보기

배열을 처리할 때는 어떤 작업이 새 배열을 만들고 어떤 작업이 기존 배열을 바꾸는지 구분해야 합니다. 이 예제의 scores, selected, sorted는 서로 다른 용도로 사용하는 이름입니다. 원본의 순서, 조건에 맞는 값, 크기순 결과를 한 배열로 계속 덮어쓰지 않기 때문에 비교가 쉽습니다.

이름	담긴 숫자의 순서	만든 방법
scores	12, 3, 25, 8	처음 입력한 배열
selected	12, 25	10 이상인 값만 filter
sorted	3, 8, 12, 25	slice() 후 숫자 비교 정렬

정렬은 필터와 달리 항목을 골라내지 않습니다. 네 항목을 그대로 두고 순서만 바꿉니다. 필터는 조건을 만족하는 항목의 상대적인 순서를 유지하므로 12와 25가 원래 등장한 순서대로 남습니다. 화면에 정렬과 필터가 함께 있다면 각각이 수행하는 일을 분리해서 생각해보세요.

얕은 복사는 이번 숫자 배열에서는 원본 순서를 보존하는 데 충분합니다. 하지만 다음 강의처럼 객체를 담은 배열에서는 복사한 배열과 원본 배열이 같은 객체를 가리킬 수 있습니다. 배열 자체를 복사하는 것과 각 객체까지 복제하는 것은 다릅니다. 또한 sort의 비교 함수가 호출되는 구체적인 순서나 횟수에는 의존하지 마세요. 두 값을 받았을 때 어떤 값이 앞에 올지를 일관되게 반환하는 규칙에 집중하면 됩니다.

연습문제와 해설

배열 [4, 11, 7]의 합계를 반복문으로 구해 보세요. 인덱스 0, 1, 2의 값을 차례로 더하면 22입니다. 같은 배열에서 10 이상인 값만 filter로 고르면 11 하나가 들어 있는 새 배열을 얻습니다. 원본 배열의 항목은 그대로 남습니다.

숫자 [10, 2, 1]을 작은 순서로 정렬하되 원본은 유지해 보세요. slice()로 새 배열을 만든 후 first - second를 반환하는 비교 함수를 sort에 전달하면 결과는 1, 2, 10입니다. 두 배열을 각각 join으로 출력하면 복사본과 원본의 순서 차이를 확인하기 쉽습니다.