Map을 사용하는 이유
1. 불변성(Immutability) 유지
map 함수는 원본 배열을 변경하지 않고, 새로운 배열을 생성하여 반환한다.
즉, 데이터가 한번 생성된 후에는 변경되지 않는 특성을 의미한다.
이 개념은 주로 함수형 프로그래밍에서 중요하게 다루어지며, 이 부분은 따로 포스팅할 예정이다.
2. 간결하고 선언적인 코드
map을 사용하면 루프를 사용하는 것보다 더 간결하고 선언적인 코드를 작성할 수 있다.
즉, "어떻게(How)"보다는 "무엇을(What)"에 집중할 수 있게 해준다.
아래 출력결과와 코드를 살펴보면 friends변수에 map()함수를 호출하는데 이때 map함수는 콜백(Callback)함수를 인자로 받는다.
이 과정에서 원본 배열은 변경되지않는다.
~/Dev/lectreact | on main !2 ?6 node map.js ok | base py | at 21:51:12
0: one
1: two
2: tree
3: four
map 함수는 배열내 각 요소에 대해 주어진 함수를 순차적으로 적용, 변환 한ㅁ수에서 변환된 값들로 새로운 배열을 반환한다.
(이것이 불변성 유지라는 큰 장점이다)
const friends = ["one", "two", "tree", "four"]
friends.map((current, index) => {
console.log(`${index}: ${current}`);
return 0;
})
3. 체이닝(Chaining) 가능
map과 같은 배열 메소드들은 체이닝을 지원한다.
즉, 하나의 배열에 여러 가지 배열 메소드(map, filter, reduce 등)를 연쇄적으로 적용할 수 있다.
이를 통해 복잡한 데이터 처리 로직을 명확하고 간결하게 표현할 수 있는데 아래 예시를 보면 조금 이해가 쉽다.
numbers 라는 배열에 1,2,3,4가 저장되어 있다 가정할때,
각 원소에 2를 곱하고 10을 더한 값을 별도의 배열에 저장하게 된다.
const numbers = [1, 2, 3, 4];
console.log("Before map"+numbers);
const res = numbers.map(number => number ** 2)
.map(result => result + 10);
console.log("After map"+res);
console.log("Still numbers"+numbers);
결과를 살펴보면 아래와 같다.
~/Dev/lectreact | on main !2 ?6 node map.js ok | base py | at 22:41:18
Before map1,2,3,4
After map11,14,19,26
Still numbers1,2,3,4
