[javascript] 배열 메소드인 map() 함수 실습 및 정리

 

* map() 함수 

🫠 코드를 작성하다가 정말 간단하게 배열 요소에 * 10을 해준 값을 다시 return 하고 싶을 때, 배열 메소드인 map() 함수를 모르면 어려운 코드가 될 수도 있다. 나 역시도 map()을 제대로 쓸 줄 몰라 계속 버벅 댔으니, 아주 편리하게 쓰이는 map() 함수를 실습 및 정리해보고자 한다.

 

 

 

---

 배열을 하나 생성하자 

let arr1 = [10, 45, 76, 34, 12, 45];

 

🫠 배열 메서드 map() 함수

> 입력 형식 : map(function(element 요소, index 인덱스, array 배열){}) 

> 입력 형식(화살표함수) : map((element, index, array) => {})

> 배열의 요소에 특정 값을 가공해서 새로운 값을 호출해내야 할 때 사용

> return은 다시 배열로 ✅

* 각 배열의 요소에 * 10을 하는 map함수를 실습해보자

let arr1 = [10, 45, 76, 34, 12, 45];

let res1 = arr1.map((item) => {
  return item * 10;
});

console.log(res1); // [ 100, 450, 760, 340, 120, 450 ]

👉🏻 output : 주석 처리 확인
✅  arr1 배열의 요소를 map함수를 통해 item으로 지정하여 받고, item을 하나씩 순차적으로 받아 * 10을 해준 후, 계산된 값을 배열로 다시 return 해 줌
❗️ 배열에 숫자가 아닌, 문자열이 들어올 경우 예시를 들어보자

 

 

 

---

 배열을 하나 생성해보자 (배열 내에 객체)

let colorMix = [
  {'first' : 'red', 'second' : 'green'},
  {'first' : 'orange', 'second' : 'green'},
  {'first' : 'brown', 'second' : 'yeollow'},
];

 

🫠 map()함수를 통해 'first + second' 값으로 반환해 보자

let colorMix = [
  {'first' : 'red', 'second' : 'green'},
  {'first' : 'orange', 'second' : 'green'},
  {'first' : 'brown', 'second' : 'yeollow'},
];

const colorMix_res = colorMix.map((item) => {
  return `${item.first}` + ' + ' + `${item.second}`;

});

console.log(colorMix_res); // [ 'red + green', 'orange + green', 'brown + yeollow' ]

👉🏻 output : 주석 처리 확인
✅  colorMix 내의 객체를 item으로 하나씩 순차적으로 받기 때문에, item.key를 통해 value값에 접근할 수 있다.
❗️ map 함수 사용 시, 요소뿐만 아니라 index 값도 받아서 사용해 보자

 

 

 

---

 배열을 하나 생성해보자 (배열 내에 객체)

let arr = [10, 13, 54, 67, 45, 86];

 

🫠 map() 함수를 이용해서 요소와 요소의 위치값을 받아보자

let arr = [10, 13, 54, 67, 45, 86];

const res = arr.map((element, index) => {
  return "index : " + index + ", element : " + element;
});

console.log(res);
/*
[
  'index : 0, element : 10',
  'index : 1, element : 13',
  'index : 2, element : 54',
  'index : 3, element : 67',
  'index : 4, element : 45',
  'index : 5, element : 86'
]
*/

👉🏻 output : 주석 처리 확인
✅  각 요소의 index도 반환하는 것을 확인