map 함수

map 함수는 JavaScript의 배열 메서드 중 하나로, 배열의 각 요소에 대해 특정 작업을 수행하고 그 결과로 새로운 배열을 만들어준다.

초보자가 이해하기 쉽게 구조와 사용 방법을 보면,

 

1. map 함수의 구조

const newArray = originalArray.map((element, index, array) => {
	// 작업을 수행하고 반환할 값
})

• originalArray(원본 배열)
  • map 함수를 호출하는 배열. 이 배열의 각 요소에 대해 작업을 수행한다.
  • 예를 들어, const numbers = [1, 2, 3] 가 원본 배열이다.
• newArray(새로운 배열)
  • map 함수가 반환하는 새로운 배열. 이 배열은 원본 배열의 각 요소에 대해 수행한 작업의 결과로 만들어진다.
  • 예를 들어, numbers.map(num ⇒ num * 2) 의 결과로 [2, 4, 6] 가 생성된다.
• element(현재요소)
  • map 함수가 원본 배열의 각 요소를 하나씩 가져와서 작업을 수행할 때 그 요소를 가리킨다.
  • 예를 들어, 배열 [1, 2, 3] 에서 첫 번째 호출에서는 1, 두 번째에서는 2, 세 번째에서는 3이 element 가 된다.
• index(현재 요소의 인덱스) → 선택적
  • 원본 배열에서 현재 요소의 위치를 나타내는 숫자이다. 배열의 첫 번째 요소는 0, 두 번째 요소는 1 등의 형식으로 지정된다.
  • 선택적으로 사용할 수 있으며, 예를 들어 numbers.map((num, index) ⇒ index) 는 [0, 1, 2] 를 반환한다.
• array(원본 배열) → 선택적
  • 선택적 매개변수로, 현재 map이 호출된 원본 배열 자체를 참조한다. 특정 작업을 수행할 때 요소 뿐만 아니라 배열 전체를 참고할 수 있다.
  • 예를 들어, numbers.map((num, index, arr) ⇒ arr.length)는 모든 요소에 대해 원본 배열의 길이를 반환한다.

 

 

2. 예시로 이해하기

2-1. 사용 방법

1) 기본 사용 예시: 배열의 각 숫자에 2를 곱하기

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

 

2) 객체 배열 변환: 객체 배열에서 특정 속성만 추출하기

const users = [
	{ name: 'Alice', age: 25 },
	{ name: 'Bob', age: 30 },
	{ name: 'Chalie', age: 35},
];

const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Chalie']

 

3) 인덱스 활용: 인덱스를 사용하여 작업할 수도 있다.

const numbers = [10, 20, 30];
const indexed = numbers.map((num, index) => `${index}: ${num}`);
console.log(indexed); // ['0: 10', '1: 20', '2: 30']

 

 

3. element의 변수명

• element의 변수명(이름)은 어떤 것도 상관 없고, 개발자가 이해하기 쉽도록 자유롭게 선택할 수 있다.
• 예를 들어, numbers.map(n ⇒ n * 2) 처럼 n 이라고 이름을 지을 수도 있고, value 라고 할 수도 있다.

3.1 몇 가지 예시

1. 기본 형태:

const nubmer = [1, 2, 3];
const doubled = numbers.map(num => num * 2); 
// num은 현재 요소를 나타냄

 

2. 다른 이름 사용:

const numbers = [1, 2, 3];
const doubled = numbers.map(value => value * 2);
// value라는 이름으로 사용

 

3. 의미 있는 이름:

const temperatures = [0, 10, 20];
const fahrenheit = temperatures.map(celsius => (celsius * 9/5) +32);
// celsius라는 이름 사용

 

즉, num 은 원본 배열의 각 요소를 참조하기 위한 변수 이름일 뿐이다. 각 요소가 어떤 값인지는 그 변수를 통해 처리되는 방식으로 파악할 수 있다. 만약 특정한 의미를 담고 싶다면, 변수명을 보다 명확하게 지어주면 좋다.

 

 

4. index, array

• index: 이 부분은 반드시 index 라는 이름으로 사용해야 한다. 인덱스 번호를 나타내는 역할을 함
• array: 선택적 매개변수로, 원본 배열을 참조할 때 array라는 이름을 사용하는 것이 일반적이다. 그러나 사용자가 originalArray 와 같이 다른 이름을 지정해도 된다.

따라서, index 는 반드시 그대로 써야 하고, array 는 자유롭게 바꿀 수 있지만 일반적으로 array 라는 이름을 많이 사용한다.

 

 

5. 요약

map 함수

• map 함수는 원본 배열의 각 요소에 대해 작업을 수행하고 새로운 배열을 반환한다.
• 원본 배열은 변하지 않고, 필요한 변형된 값을 새 배열로 만들 수 있다.
• 구조:

const newArray = originalArray.map((element, index, array) => { 
	// 작업 수행 
});

매개변수

1. element: 현재 배열의 요소 (변수명 자유롭게 지정 가능).
2. index: 현재 요소의 인덱스 (항상 index 사용).
3. array: 원본 배열 (일반적으로 array 사용, 다른 이름 가능).