[map] JavaScript 유용한 함수 map

예를 들어 다음과 같은 배열 요소가 있다고 가정해 보자.

 

let arr = [3, 4, 5, 6];

 

이제 배열의 각 요소에 3을 곱해야 한다고 상상해 보자.

 

원초적인 판단으로는 다음과 같이 for 루프 사용을:할 수 있다.

 

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

 

그러나 사실 Array.map() 메소드를 사용한다면 이런 동일한 결과를 얻을 수 있다.

 

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

일반적으로 Array.map() 메소드는 위의 코드에서와 같이 특정 숫자를 곱하거나,

애플리케이션에 필요한 다른 작업을 수행하는 등 요소에 어떤 변경 사항을 적용하는 데 사용된다.

---

현업에서는 일반적으로 객체 배열을 사용하게 될 것이다.

어떻게 사용해야 할까.

 

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

다음과 같이 map() 메소드를 사용하여 배열을 순환하며 처리해서 firstName 및 lastName 값을 결합할 수 있다:

 

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"]

아래와 같이 key값을 이용해 value값을 순회할 수도 있다.

 

let userFullnames = users.map(function(user) {
    console.log(user.firstName)    
})

//Susan, Daniel, Jacob

 

리액트에서는 이러한 방법으로 JSX 코드를 동적으로 생성해낼 수 있다.