Javascript :: map(), 반복문 사용법

JavaScript의 map() 함수는 배열의 모든 요소에 대해 주어진 함수를 호출하고,

각 요소를 함수의 반환 값으로 대체하여 새로운 배열을 생성한다.

 

사실 글보단 소스보고 이해 하는게 우린 좋다.

 

예제1) 배열안에 값 곱하기 2하기

const arr = [1, 2, 3, 4];
const newArr = arr.map((num) => num * 2);
console.log(newArr); // Output: [2, 4, 6, 8]

 

예제2) 소문자를 대문자로 변경하기

const arr = ['hello', 'world'];
const upperCaseArr = arr.map((str) => str.toUpperCase());
console.log(upperCaseArr); // Output: ['HELLO', 'WORLD']

 

 

예제3) 객체 배열에서 특정 속성 가져오기

const users = [
  { id: 1, name: 'Kim' },
  { id: 2, name: 'Lee' },
  { id: 3, name: 'Son' },
];
const userIds = users.map((user) => user.id);
console.log(userIds); // Output: [1, 2, 3]

 

예제4) 객체 배열의 속상을 변경하여 새로운 배열 만들기

 

const users = [
  { id: 1, name: 'Kim', age: 30 },
  { id: 2, name: 'Lee', age: 25 },
  { id: 3, name: 'Son', age: 35 },
];
const updatedUsers = users.map((user) => {
  return {
    id: user.id,
    name: user.name.toUpperCase(),
    age: user.age + 5,
  };
});
console.log(updatedUsers);
// Output:
// [
//   { id: 1, name: 'Kim', age: 35 },
//   { id: 2, name: 'Lee', age: 30 },
//   { id: 3, name: 'Son', age: 40 },
// ]

 

React 에서 반복문 하면 가장 많이 사용하는 함수가 아닐까.

 

for 문도 많이 사용하지만 간단하게 표현하고 싶을땐 map 이 좋은거 같다

 

예제 1번의 예제를 for 과 비교하면

 

// map
const arr = [1, 2, 3, 4];
const newArr = arr.map((num) => num * 2);
console.log(newArr); // Output: [2, 4, 6, 8]

// for
const arr = [1, 2, 3, 4];
const newArr = [];
for (let i = 0; i < arr.length; i++) {
  newArr.push(arr[i] * 2);
}
console.log(newArr); // Output: [2, 4, 6, 8]

 

별거 아닌 예제지만 결과만 봤을 땐 map 을 사용하는게 코드량도 줄고 map 을 이해 하고 있다면

쉽게 읽힐것 같다

 

조금 더 깊게 이해하고 사용하려면 이 코드를 보고 아래 내용을 참고하자

 

array.map(callback(currentValue[, index[, array]])[, thisArg])

 

• array: 기존 배열
• callback: 각 요소에 대해 호출할 함수
• currentValue: 현재 처리 중인 요소
• index(선택 사항): 현재 처리 중인 요소의 인덱스
• array(선택 사항): map() 함수를 호출한 배열
• thisArg(선택 사항): callback 함수 내에서 this로 사용할 값

난 아래 element 만 활용하는 경우가 많다.

실력이 부족한듯..

let arr = [2, 4]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    console.log(this);
    return element;
}, 9)

// arr 2에 대한 첫 번째 반복
// "element" 2
// "index" 0
// "array"
// [object Array] (2)
// [2,4]
// "this" 9

// arr 4에 대한 두 번째 반복
// "element" 4
// "index" 1
// "array"
// [object Array] (2)
// [2,4]
// "this" 9

 

작성하면서 map 대해 더 이해가 됬다.

그럼 된거다.

즐코합시다