자바스크립트에서 배열을 다룰 때, 특정 기준에 따라 배열의 요소를 대체하거나 정렬해야 할 때가 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 배열의 요소를 특정 기준으로 대체하고 정렬하는 방법에 대해 알아보겠습니다.

1. 배열의 요소 대체하기

특정 조건에 맞는 배열의 요소를 다른 값으로 대체해야 할 때, 다음과 같이 자바스크립트 배열 메소드인 map을 활용할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];

const replacedNumbers = numbers.map((number) => {
  if (number % 2 === 0) {
    return "even";
  } else {
    return "odd";
  }
});

console.log(replacedNumbers);
// 출력: ["odd", "even", "odd", "even", "odd"]

위 예제에서는 numbers 배열의 각 요소를 순회하면서 해당 요소가 홀수인지 짝수인지 판별하고, 홀수는 “odd”로, 짝수는 “even”으로 대체하는 방법을 보여줍니다. map 메소드는 배열의 모든 요소에 대해 실행된 함수의 반환값으로 새로운 배열을 생성하므로, replacedNumbers 배열에 원하는 형태의 배열을 얻을 수 있습니다.

2. 배열 요소 정렬하기

자바스크립트에서 배열의 요소를 특정 기준으로 정렬하기 위해서는 sort 메소드를 사용할 수 있습니다. sort 메소드는 기본적으로 배열을 유니코드 순서로 정렬하지만, 특정 기준에 따라 정렬을 수정할 수 있습니다. 예를 들어, 숫자 배열을 오름차순으로 정렬하려면 다음과 같이 사용할 수 있습니다.

const numbers = [5, 2, 4, 3, 1];

numbers.sort((a, b) => a - b);

console.log(numbers);
// 출력: [1, 2, 3, 4, 5]

위 예제에서는 sort 메소드에 비교 함수(주로 익명 함수로 작성)를 전달하여 숫자 배열을 오름차순으로 정렬하였습니다. 비교 함수는 두 개의 인자 a와 b를 받아 오름차순으로 정렬하기 위해 a에서 b를 뺀 값을 반환합니다. 따라서 반환값이 음수일 경우 a가 b보다 작은 순서로 정렬됩니다.

또한, sort 메소드를 사용하여 객체 배열을 특정 속성 값에 따라 정렬할 수도 있습니다. 예를 들어, 다음과 같이 사람 객체를 이름(문자열) 속성에 따라 정렬하는 예제를 확인해보세요.

const people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 20 }
];

people.sort((a, b) => a.name.localeCompare(b.name));

console.log(people);
/* 출력:
[
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 20 }
]
*/

위 예제에서는 sort 메소드에 a.name.localeCompare(b.name)를 비교 함수로 전달하여 사람 객체를 이름 속성에 따라 정렬하였습니다. localeCompare 메소드는 유니코드 문자열을 비교할 수 있는 메소드로, 반환값이 음수일 경우 a가 b보다 작은 순서로 정렬됩니다.

이처럼 자바스크립트에서 배열의 요소를 특정 기준으로 대체하거나 정렬하기 위해서는 map과 sort 메소드를 활용할 수 있습니다. 이를 통해 더욱 다양한 배열 조작이 가능해지며, 원하는 형태로 배열을 조작할 수 있습니다.