배열메서드 알아보기 feat(map, filter..)

오늘은 JavaScript 의 배열 메서드에 대해서 정리해볼 예정이다.

굉장히 자주 쓰이고, 콜백 함수와 함께 사용되는 대표적인 배열 메서드인 map() 부터 알아보도록 하겠다.

map() 은 언제 사용하는가?

기존 배열의 값을 새롭게 가공할 때 사용한다고 보면 된다.

map() 을 사용하지 않고 작성한 코드를 먼저 살펴보면 아래와 같다.

let arr = [1, 2, 3, 4, 5];
let newArray = [];

for (let i = 0; i < arr.length; i++) {
    newArray.push(arr[i] * 10);
}
console.log(newArray);

위와 같이 새로운 빈 배열 newArray를 생성한 뒤 반복문 속에서 newArray에 원하는 값을 push해주는 방식의 코드이다.

이번에는 map()을 활용하여 위 코드를 조금더 간단하게 바꿀 것이다.

let arr = [1, 2, 3, 4, 5];

let newArray = arr.map((elm) => {
    return elm * 10;
});
console.log(newArray);

위와 같이 map() 을 이용하여 for문을 사용하지 않고도, 화살표 함수만을 이용하여 기존 배열의 값을 가공하여 새로운 배열의 요소로 담을 수 있게된다.

조금더 살펴보면 map() 의 형태는 아래와 같다.

const newArray = oldArray.map((element, index, array) => {
    // return 값이 새로운 배열에 담긴다
});

• element: 현재 요소
• index (선택): 현재 인덱스
• array (선택): 원본 배열 전체

위와 같이 (선택) 이라고 써있는 인자는 사용하지 않아도 된다.

이번엔 객체 배열에서 특정 속성만 추출하는 예시를 보자.

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 22 }
];

const names = users.map(user => user.name);

console.log(names); // ['Alice', 'Bob', 'Charlie']

위 예시에서는 names라는 새로운 배열에 map() 메서드를 활용하므로써 각 객체에서 .name만 추출해서 새로운 배열을 만든다.

이번에는 map()메서드의 두번째 인자인 index를 활용하는 예제를 보자.

const numbers = [10, 20, 30];

const withIndex = numbers.map((num, idx) => `${idx}: ${num}`);

console.log(withIndex); // ['0: 10', '1: 20', '2: 30']

위와 같이 새로운 배열 withIndex를 console.log()로 출력하면, 해당 요소의 인덱스도 추출할 수 있다는 것을 확인할 수 있다.

그렇다면 배열 메서드 map()과 forEach() 와의 차이점은 무엇일까?

map() vs forEach()

* gpt를 이용하여 표로 정리한 내용 캡쳐

결론적으로, 우리가 map()에 대해서 개념적으로 알아야할 내용은 아래와 같다.

• map()은 배열 요소를 변환해 새 배열을 만드는 함수형 메서드이다.
• 원본 배열은 변하지 않고, 항상 새로운 배열을 반환한다.

이번엔 filter()에 대해서 알아보자.

filter() 란 무엇인가?

filter() 메서드는 특정 배열에서 원하는 요소들을 추출할 수 있게하는 메서드이다.

이또한 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 생성한다.

기본문법은 아래와 같다.

filter() 기본 문법

const newArray = oldArray.filter((element, index, array) => {
  return 조건식;
});

• element: 현재 요소
• index: 현재 인덱스 (선택)
• array: 원본 배열 전체 (선택)
• return이 true인 요소만 새 배열에 포함

기본문법에서 볼수있 듯, 새로운 배열 newArray 를 생성한다.

간단한 객체 배열 예시를 통해 알아보자.

let colors = [
    { id: 1, color: "green" },
    { id: 2, color: "blue" },
    { id: 3, color: "purple" }
];

let filterArray = colors.filter((elm, idx, array) => elm.id > 1);
console.log(filterArray);

위 코드는 새로운 배열 filterArray 에 filter 메서드를 통해 배열요소의 id 값이 1보다 큰 요소들을 담아주게 된다.

filterArray 를 출력해보면, { id: 2, color: "blue" } 와 { id: 3, color: "purple" } 값이 담긴 배열이 출력된다.

그렇다면 map() 과 filter()의 차이는 무엇일까?

map() vs filter()

gpt를 통해 표로 예쁘게 정리한 모습

아래 코드를 보면 차이를 명확하게 깨달을 수 있을 것이다.

const arr = [1, 2, 3, 4];

const mapped = arr.map(x => x * 2);    // [2, 4, 6, 8]
const filtered = arr.filter(x => x > 2); // [3, 4]

 주석은 해당 배열의 출력결과를 나타낸다.

 

결론

 

• filter()는 조건에 맞는 요소만 남긴다
• 항상 새 배열 반환 (원본 배열 수정 X)
• map()과 filter() 를 함께 사용한다면 코드를 작성할 때 매우 유용할 것이라는 생각이 든다.

오늘 공부한 배열 메서드 2개는 실제로 프론트엔드로 프로젝트를 진행할때 서버로 부터 GET으로 불러온 데이터를 UI에 뿌려줄 때마다 항상 사용했다. 이제는 map과 filter를 제대로 공부하였으니 나 스스로가 좀 알고 사용하기를 바라며 글 마친다.