자바스크립트 배열 처리 방법 정리

자바스크립트에서 배열은 여러 값을 순서대로 저장할 수 있는 강력한 자료구조입니다. 배열을 활용하여 다양한 작업을 수행할 수 있으며, 그 중에서도 배열의 정렬과 항목의 추가 및 제거는 매우 빈번하게 요구되는 작업입니다. 이번 글에서는 자바스크립트 배열을 효과적으로 처리하는 방법에 대해 살펴보겠습니다.

배열 정렬 방법

자바스크립트에서 배열을 정렬하는 데 사용되는 주요 방법은 sort() 함수와 toSorted() 함수입니다. 이 두 메서드는 배열의 요소를 정렬하는 데에 유용하지만, 각기 다르게 작동하는 특성을 지니고 있습니다.

sort() 메서드

sort() 메서드는 배열 내의 요소를 정렬할 때 가장 널리 사용되는 방법입니다. 기본적으로 이 메서드는 각 요소를 문자열로 변환한 후, 해당 문자열의 유니코드 순서에 따라 정렬을 수행합니다.

다음은 sort() 메서드를 사용하는 기본적인 예입니다:

const numbers = [3, 1, 2];
numbers.sort(); // 결과: [1, 2, 3]

이 메서드는 배열의 원본을 변형하며, 반환된 결과와 원본 배열이 동일한 것을 확인할 수 있습니다. 예를 들어:

const nums = [3, 1, 2];
const sortedNums = nums.sort();
console.log(nums === sortedNums); // true

문자열로 변환된 정렬

하지만 숫자로 이루어진 배열을 정렬할 때, sort() 메서드의 동작 방식은 엉뚱한 결과를 초래할 수 있습니다. 문자열 비교가 적용되기 때문인데, 예를 들어 다음과 같은 경우를 보겠습니다:

[100, 3, 1, 20].sort(); // 결과: [1, 100, 20, 3]

이와 같은 문제를 피하기 위해, 숫자의 경우에는 비교 함수(callback function)를 사용하여 올바른 비교를 수행해야 합니다.

비교 함수의 사용

정확한 숫자 배열의 정렬을 위해서는 sort() 메서드에 인자로 비교 함수를 전달해야 합니다. 이 함수는 두 개의 인자를 받고, 다음과 같은 규칙을 따릅니다:

• 첫 번째 인자가 두 번째 인자보다 작으면 음수를 반환
• 첫 번째 인자가 두 번째 인자보다 크면 양수를 반환
• 두 인자가 같으면 0을 반환

예를 들어, 숫자 배열을 오름차순으로 정렬하고자 한다면 다음과 같이 사용할 수 있습니다:

const nums = [-3, 2, 0, 1, 3, -2, -1];
nums.sort((a, b) => a - b); // 결과: [-3, -2, -1, 0, 1, 2, 3]

반대로 내림차순으로 정렬하려면 비교 함수의 인자 순서를 바꿉니다:

nums.sort((a, b) => b - a); // 결과: [3, 2, 1, 0, -1, -2, -3]

객체 배열 정렬하기

실제 애플리케이션에서는 숫자나 문자열 배열보다 객체 배열을 정렬할 일이 많습니다. 다음 예시는 국가 정보를 포함한 객체 배열을 정렬하는 방법입니다:

const countries = [
 { no: 1, code: "KR", name: "Korea" },
 { no: 2, code: "CA", name: "Canada" },
 { no: 3, code: "US", name: "United States" },
 { no: 4, code: "GB", name: "United Kingdom" },
 { no: 5, code: "CN", name: "China" },
];

이 배열을 정렬하기 위해서는 특정 기준을 설정해야 하며, 예를 들어 국가 코드 기준으로 오름차순 정렬하는 경우:

countries.sort((a, b) => a.code.localeCompare(b.code));

다중 기준 정렬

때때로 여러 기준에 따라 배열을 정렬해야 할 필요가 있습니다. 예를 들어, 성별과 나이를 기준으로 정렬하려면, 다음과 같은 방식으로 비교 함수를 구성할 수 있습니다:

const users = [
 { mail: "gregorythomas@gmail.com", name: "Brett Holland", gender: "M", age: 73 },
 { mail: "hintc12@hotmail.com", name: "Madison Martinez", gender: "F", age: 29 },
 { mail: "wwagner33@gmail.com", name: "Michael Jenkins", gender: "M", age: 51 },
 { mail: "ujacksonxejyen@gmail.com", name: "Amber Rhodes", gender: "F", age: 42 },
 { mail: "daniel7900@gmail.com", name: "Karen Rodriguez", gender: "F", age: 32 },
];
users.sort((a, b) => {
 if (a.gender === b.gender) {
  return a.age - b.age; // 성별이 같을 경우, 나이로 정렬
 }
 return a.gender.localeCompare(b.gender); // 성별로 정렬
});

배열 항목 추가 및 제거

자바스크립트에서 배열에 항목을 추가하거나 제거하는 메서드도 매우 유용합니다. push() 메서드는 배열의 끝에 요소를 추가하며, pop() 메서드는 마지막 요소를 제거합니다.

const numbers = [1, 2, 3, 4];
numbers.push(5); // [1, 2, 3, 4, 5]
numbers.pop(); // [1, 2, 3, 4]

shift()와 unshift() 메서드

배열의 시작 부분에서 항목을 추가하거나 제거하고 싶을 때는 shift()와 unshift() 메서드를 사용할 수 있습니다. 각각 배열의 첫 번째 요소를 제거하고, 배열의 시작 부분에 요소를 추가합니다.

const fruits = ['사과', '오렌지'];
fruits.unshift('바나나'); // ['바나나', '사과', '오렌지']
fruits.shift(); // ['사과', '오렌지']

사용자 정의 배열 메서드 만들기

내장 메서드를 사용하지 않고도 사용자 정의 함수를 통해 배열의 항목을 추가하거나 제거할 수 있습니다. 예를 들어, myPush()와 myPop() 함수를 만들어 이를 구현할 수 있습니다.

function myPush(array, item) {
 return [...array, item];
}
function myPop(array) {
 return array.slice(0, -1); // 마지막 요소 빼기
}

결론

이번 글에서는 자바스크립트 배열의 여러 가지 처리 방법에 대해 살펴보았습니다. 배열의 정렬, 항목 추가 및 제거와 같은 기본적인 작업은 자바스크립트를 활용하는 데 매우 중요합니다. 이 지식을 바탕으로 실제 프로젝트에서 유용하게 활용하시기 바랍니다.

자주 묻는 질문 FAQ