Javascript Map함수

Map 함수란

Map함수는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해준다. 다시 말하자면 콜백 함수는 배열의 각 요소에 실행된다

예를들어 간단한 예제 코드를 보도록한다

먼저 다음과 같은 배열 요소가 있다고 가정해본다

[단순한 Javascript 배열]

  //배열 arr을 만들고 1~5 까지 숫자를 넣어둔다 
  const arr = [1, 2, 3, 4, 5];

해당 배열의 각 요소에 10을 곱해야 한다고 생각해보자 그럼 아래와 같이 for문이 제일 먼저 떠오를 수 있다

[for문을 사용한 배열 요소 처리]

  let arr = [1, 2, 3, 4, 5];
  
  for (let i = 0; i < arr.length; i++){
    arr[i] = arr[i] * 10;
  }
  
  console.log(arr); // [10, 20, 30, 40, 50]

하지만 Array.map() 함수를 사용하면 더욱 간결한 코드로 동일 결과 값을 얻을 수 있다 하기 코드처럼

[Array.map 함수를 사용한 배열 요소 처리]

  let arr = [1, 2, 3, 4, 5];
  
  let modifiedArr = arr.map(function(element){
      return element *10;
  });
  
  console.log(modifiedArr); // [10, 20, 30, 40, 50]

다른도 보면서 어떤 상황일때 편하게 Map함수를 사용할 수 있는지 보도록 한다

[Array.map 함수를 사용한 객체 배열 요소 처리]

  let users = [
    {firstName : "Susan", lastName: "Steward"},
    {firstName : "Daniel", lastName: "Longbottom"},
    {firstName : "Jacob", lastName: "Black"}
  ];
  
  let userFullnames = users.map(function(element){
      return `${element.firstName} ${element.lastName}`;
  })
  
  console.log(userFullnames);
  // ["Susan Steward", "Daniel Longbottom", "Jacob Black"]