[자바스크립트/JavaScript] 고차 함수 map 사용 방법 #1

☘️ 시작하며...

코딩 테스트 공부를 하려고 자료구조를 공부하고 있는데

문제를 풀다가 도중에 내가 자바스크립트 고차함수에 대해 잘 모르고 있다는 것을 알게 되어

글을 작성하면서 공부할 겸 정보를 알려주기 위해 해당 글을 작성하게 되었다.

 

첫 번째 게시물은 map 에 대해 알아볼 것이다.

---

☘️ 고차 함수란?

고차 함수란?

함수를 파라미터(인자)로 받거나 결과로 반환해 주는 함수(메서드)

 

☘️ Array.map()

map은 배열을 for와 같이 돌면서, 결과로 배열을 반환해 준다.

 

사용 예시

배열 array가 있을 때, 각 요소에 2를 곱한 배열을 반환받고 싶을 때, 아래처럼 코드를 작성한다.

 

map의 첫 번째 인자인 item은 배열의 각 요소이다. (인자 이름은 사용자가 원하는 대로 작성할 수 있다.)

그래서 각 요소인 item에 2를 곱해주고 반환해 준다.

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

const result = array.map((item) => {
  console.log(item);
  return item * 2;
});

console.log(result);

그러면 각 요소가 for처럼 배열이 도는 것을 확인할 수 있고, 각 요소에 2가 곱해진 배열을 결과로 반환받는 것도 알 수 있다.

코드 실행 결과

조금 더 간단하게 한 줄로 표현할 수 있다.

const result = array.map((item) => item * 2);

 

map의 파라미터(인자)

map의 첫 번째 인자는 배열의 요소인 것을 위에서 확인할 수 있다. 그 이외에는 아래 사진에서 참고할 수 있다.

map의 파라미터를 출력하면 아래와 같은 결과를 얻을 수 있다.

코드 실행 결과

 

☘️ map 활용 하기

배열 반환

map의 결과로 배열을 반환하기 때문에 참조한 배열을 활용해 새로운 배열을 만들 수 있다.

 

기존 참조한 배열의 lastName과 firstName을 추출하여 새로운 배열을 만들었다.

const student = [
  { firstName: 'Ann', lastName: 'Lee', id: 100 },
  { firstName: 'Jane', lastName: 'Kim', id: 200 },
  { firstName: 'Tom', lastName: 'Park', id: 400 },
];

const nameArr = student.map((item) => item.lastName + ' ' + item.firstName);

출력 결과

객체 배열 반환

결과로 배열뿐만 아니라 객체가 담긴 배열도 만들 수 있다.

 

map에서 (item) => {...} 를 하면 그냥 함수가 실행되기 때문에 객체를 반환할 때에는 (item) => ({...}) 를 사용해야 한다.

const nameArr = student.map((item) => ({
  firstName: item.firstName,
  lastName: item.lastName,
  fullName: item.lastName + ' ' + item.firstName,
  id: item.id / 100,
}));

출력 결과

 

이차원 배열

이차원 배열에 접근할 때에는 map을 두 번 사용한다.

 

numArr의 각 요소인 배열을 다시 map을 사용해서 배열 안에 있는 요소에다가 10을 곱하였다.

const numArr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

const newArr = numArr.map((arr) => {
  return arr.map((num) => num * 10);
});

출력 결과

 

구조 분해

이차원 배열을 위에 처럼 map을 두 번 사용하는 방법 말고도 구조 분해를 사용할 수 있다.

 

첫 번째 인자를 배열 형태로 [n1, n2, n3] 이렇게 구조 분해를 사용하여 각 배열의 요소의 값을 원하는 데로 할 수 있게 된다.

const arr = [
  ['a', 500, true],
  ['b', 200, false],
  ['c', 300, true],
];

const newArr = arr.map(([n1, n2, n3]) => {
  return [n1 + ' 입니다', n2 / 10, !n3];
});

출력 결과

 

---

☘️ 마무리 하며...

map에 대해 알아보았다.

for와 다르게 map은 배열로 반환을 해주어 새로운 배열을 만들어 값을 넣어야 할 번거로움이 줄어들었다.

그리고 위에 예시 이외에도 다양한 방법이 있으니깐 map을 잘 활용할 수 있도록 연습해야겠다!