[JavaScript] 22. 배열메소드 / 배열변형

서회정

Feb 02, 2026

Contents

5가지 배열 변형 메서드 1. filter 2. map 3. sort 4. toSorted 5. join

5가지 배열 변형 메서드

1. filter

💡

기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환


// 5가지 배열 변형 메서드
// 1. filter
// 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환
let arr1 = [
  { name: "서회정", hobby: "테니스" },
  { name: "홍길동", hobby: "테니스" },
  { name: "이순신", hobby: "독서" },
];

const tennisPeaple = arr1.filter((item) => item.hobby === "테니스");

console.log(tennisPeaple);

2. map

💡

배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고 그 결과 값들을 모아서 새로운 배열로 반환


// 2. map
// 배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고
// 그 결과 값들을 모아서 새로운 배열로 반환
let arr2 = [1, 2, 3];
const mapResult1 = arr2.map((item, idx, arr) => {
  return item * 2;
});

console.log(mapResult1);

예제

💡

arr1에서 name property만 뽑아서 새로운 배열을 만들어보자


let names = arr1.map((item) => item.name);
console.log(names);

3. sort

💡

배열을 사전순으로 정렬하는 메서드


// 3. sort
// 배열을 사전순으로 정렬하는 메서드
let arr3 = ["b", "a", "c"];
arr3.sort();
console.log(arr3);

✅ 숫자를 비교하는 경우에는?

⇒ 콜백 함수를 활용하여 a와 b, 즉 비교할 두 개의 매개변수를 기입하고 비교해보고 앞 뒤로 보내는 식을 작성하여 정렬을 할 수 있다.

⇒ 내림차순으로 정렬하고자 할 때에는 같은 조건문에 음수와 양수 위치만 바꾸면 된다.


let arr3 = [10, 3, 5];
arr3.sort((a, b) => {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  } else {
    return 0;
  }
});
console.log(arr3);

4. toSorted

💡

배열을 정렬하여 새로운 배열로 반환하는 메서드


// 4. toSorted (가장 최근에 추가된 최신 함수)
// 배열을 정렬하여 새로운 배열로 반환하는 메서드
let arr4 = ["c", "a", "b"];
const toSorted = arr4.toSorted();
console.log(arr4);
console.log(toSorted);

5. join

💡

배열 요소를 하나의 문자열로 결합하여 반환하는 메서드


// 5. join
// 배열 요소를 하나의 문자열로 결합하여 반환하는 메서드
let arr5 = ["hi", "im", "clubnerdy"];
const joind = arr5.join();
console.log(joind);