[JavaScript] map 함수

 

map() 함수는 모든 배열의 값에 특정 함수를 실행하고자 할 때 사용하는 메소드이다.

 

const colors = ["red", "orange", "yellow", "green", "blue"];

예를 들어 colors 라는 배열의 변수가 있다고 하자.

이 배열의 모든 값에 특정 문자를 추가하고자 한다.

이때 우리는 map() 함수를 이용할 수 있다.

 

map() 함수를 이용하여 모든 배열의 값에 특정 함수를 실행하고, 이 함수에서 나온 값을 저장해 새로운 배열을 만든다.

 

즉 map() 함수는 요약하면 배열의 모든 인덱스에 접근해 함수를 실행하고 이 결과를 가지고 새로운 배열을 만들어내는 것이다.

 

const showColors = colors.map(color => console.log(color));

colors 배열의 모든 인덱스 값을 console 창에 보여주는 map 함수이다.

이때 color처럼 colors.map()이 해당하는 함수에 주는 변수는 아무 것이나 가능하다.

 

console.log(color)를 리턴하면 color가 배열의 각각의 값을 가지게 된다.

colors.map()은 리턴한 값으로 이루어진 배열을 리턴하는 것이다.

 

 

const addString = colors.map(color => `add ${color}`);
console.log(addString);

또다른 위의 예시 실행 결과 console 화면에는

["add red", "add orange", "add yellow", "add green", "add blue"]가 출력되는 결과를 볼 수 있을 것이다.

 

 

 

< map() 함수에서 여러 파라미터 전달되는 경우 >

map() 함수를 사용하다 보면 하나의 값만 전달되는 것이 아닌, 여러 개의 값을 사용하고 전달받을 수 있을 것이다.

그 중 가장 많이 전달되는 파라미터 중 하나가 index이다.

 

const colors = ["red", "orange", "yellow", "green", "blue"];

const indexColors = colors.map((color, index) => `[${index}] ${color}`);
console.log(indexColors);

이때 color는 배열의 각각의 값, index는 배열의 인덱스 값을 나타내는 숫자일 것이다.

실행 결과 console 창에는 다음과 같은 결과가 나타나는 것을 확인할 수 있을 것이다.

 

 

< map() 함수로 객체타입 접근 >

const scores = [
  {id: 1, name: "A", score: 90},
  {id: 2, name: "B", score: 80},
  {id: 3, name: "C", score: 80},
  {id: 4, name: "D", score: 75},
  {id: 5, name: "E", score: 100},
]

const nameResult = scores.map(student => `${student.name} : ${student.score}`);
console.log(nameResult);