[JavaScript 심화] 배열 메서드 (배열 변형)

배열의 데이터를 필터링, 가공, 정렬, 문자열로 변환할 때 사용하는 메서드들을 정리해봄
이들은 원본 배열을 변경하거나 새로운 배열을 만들어내는 변형 메서드임

---

1. filter()

조건을 만족하는 요소만 남겨 새로운 배열로 반환

let arr1 = [
  { name: "도서", hobby: "코딩" },
  { name: "이도서", hobby: "코딩" },
  { name: "doseo", hobby: "게임" },
];

const gamePeople = arr1.filter((item) => {
  if (item.hobby === "게임") return true;
});
console.log(gamePeople);

const gamePeople1 = arr1.filter((item) => item.hobby === "게임");
console.log(gamePeople1);

• 조건식이 `true`인 요소만 모아 새로운 배열 반환
• 원본 배열 변경하지 않음
• 검색/필터 기능 구현시 자주 사용

---

2. map()

모든 요소를 순회하며 콜백의 반환값으로 새로운 배열 생성

let arr2 = [1, 2, 3];
const mapResult1 = arr2.map((item, idx, arr) => {
  return item * 2;
});
console.log(mapResult1); // [2, 4, 6]

let names = arr1.map((item) => item.name);
console.log(names); // ["도서", "이도서", "doseo"]

• 배열의 모든 요소를 가공해 새로운 배열 반환
• 원본 배열 변경하지 않음
• `forEach`처럼 순회하지만 return 결과를 모은다는 점이 다름

---

3. sort()

배열의 요소를 사전순(문자 기준)으로 정렬
숫자를 올바르게 정렬하려면 비교 함수 필요

let arr3 = ["b", "a", "c"];
arr3.sort();
console.log(arr3); // ["a", "b", "c"]

let arr4 = [10, 3, 5];
arr4.sort((a, b) => a - b); // 오름차순
console.log(arr4); // [3, 5, 10]

let arr5 = [10, 3, 5];
arr5.sort((a, b) => b - a); // 내림차순
console.log(arr5); // [10, 5, 3]

• 원본 배열이 변경됨
• 문자열은 기본적으로 사전순으로 정렬
• 숫자는 비교 함수 `(a, b) => a - b` 형태로 정렬하는 것이 일반적

---

4. toSorted()

`sort()`와 동일하지만, 원본 배열은 유지하고 새로운 배열을 반환

let arr6 = ["c", "a", "b"];
const sorted = arr6.toSorted();

console.log(arr6);  // ["c", "a", "b"]
console.log(sorted); // ["a", "b", "c"]

• `sort()`의 불변 버전
• 원본 배열 변경하지 않음

---

5. join()

배열의 모든 요소를 하나의 문자열로 합쳐 반환

let arr7 = ["hi", "im", "doseo"];
const joined = arr7.join(" ");
console.log(joined); // "hi im doseo"

• 구분자를 지정 가능

arr7.join(", "); // "hi, im, doseo"
arr7.join("");   // "hiimdoseo"

• 주로 텍스트 조합, 템플릿 문자열 제작 시 사용

---

 

메서드	설명	반환값	원본 변경	사용 예시
`filter()`	조건 만족 요소만 추출	새로운 배열	❌	카테고리/검색 필터
`map()`	각 요소 변환 후 반환	새로운 배열	❌	데이터 변환
`sort()`	요소 정렬 (문자/숫자)	정렬된 배열	✅	순서 정렬
`toSorted()`	정렬하되 원본 보존	새로운 배열	❌	불변 정렬
`join()`	요소를 문자열로 결합	문자열	❌	문장, 출력용