자바스크립트의 배열 메서드 중 map()의 사용법은 무엇인가요?

Q1: 자바스크립트에서 map() 메서드는 무엇인가요?
A1: map() 메서드는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 반환하는 배열 메서드입니다. 원본 배열은 변경되지 않습니다.

Q2: map() 메서드를 어떻게 사용하나요?
A2: 배열.map(callback(currentValue, index, array), thisArg) 형태로 사용합니다.
- callback: 각 요소마다 실행할 함수로, 적어도 현재 요소(currentValue)를 인자로 받습니다.
- index: 현재 요소의 인덱스(선택 사항)
- array: 원본 배열(선택 사항)
- thisArg: callback 내부에서 사용될 this 값(선택 사항)

예)
```javascript
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
```

Q3: map() 메서드의 반환값은 무엇인가요?
A3: map() 메서드는 callback 함수의 결과가 담긴 새로운 배열을 반환합니다. 원본 배열은 수정하지 않습니다.

Q4: map() 메서드는 원본 배열을 변경하나요?
A4: 아니요. map()은 원본 배열의 각 요소를 변환한 새로운 배열을 반환할 뿐 원본 배열은 변경하지 않습니다.
Q5: map()과 forEach()의 차이점은 무엇인가요?
A5: forEach()는 배열을 순회하며 각 요소에 대해 함수를 실행하지만 반환값이 없고 원본 배열을 변경할 수 있습니다. map()은 각 요소에 함수를 적용하고 새로운 배열을 반환합니다. 즉, map()은 결과 배열 생성에 적합하고 forEach()는 부수 효과를 위한 반복에 적합합니다.

Q6: map()의 콜백 함수에서 index와 array 인자를 꼭 사용해야 하나요?
A6: 아니요. index와 array 인자는 선택사항이며 필요할 때만 사용할 수 있습니다. 최소한 currentValue 인자는 반드시 받아야 합니다.

Q7: map() 메서드는 빈 배열에 대해 어떻게 작동하나요?
A7: 빈 배열에 map()을 호출하면, 콜백 함수가 호출되지 않고 빈 배열을 즉시 반환합니다.

Q8: map() 메서드는 비동기 작업에 적합한가요?
A8: map() 자체는 동기 메서드입니다. 비동기 함수와 함께 사용하면 Promise 객체 배열을 반환할 수 있지만, 모든 비동기 작업이 완료되도록 하려면 Promise.all()과 함께 사용해야 합니다.

Q9: map() 메서드의 성능에 영향을 미치는 요소는 무엇인가요?
A9: 배열 크기와 복잡한 연산을 수행하는 콜백 함수가 성능에 영향을 줍니다. map()은 내부에서 반복 작업을 하기 때문에 간단한 변환 목적에 적합합니다.

Q10: map() 메서드를 사용할 때 주의할 점은?
A10:
- callback 함수는 반드시 값을 반환해야 합니다. 반환값이 없으면 undefined가 배열 요소로 들어갑니다.
- 원본 배열의 요소 중 빈 요소(없는 요소)는 callback이 호출되지 않습니다.
- map()은 이터러블이 아닌 배열에서 사용할 수 없습니다.

---

이상으로 자바스크립트 map() 메서드의 사용법과 관련 FAQ를 정리했습니다.

`map()` 메서드는 자바스크립트의 배열(Array) 메서드 중 하나로, 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다.

이 메서드는 원본 배열을 변경하지 않고, 새로운 배열을 생성하는 점에서 불변성을 유지하는 특징이 있습니다.

`map()` 메서드는 주로 배열의 각 요소를 변형하거나 가공할 때 유용하게 사용됩니다.

기본 문법 ```javascript let newArray = array.map(function(currentValue, index, array) { // return element for newArray }, thisArg); ``` - `currentValue`: 현재 처리 중인 배열 요소 - `index` (선택적): 현재 처리 중인 배열 요소의 인덱스 - `array` (선택적): `map()`이 호출된 배열 - `thisArg` (선택적): 콜백 함수에서 `this`로 사용할 값 사용 예시 1. 기본 사용법 ```javascript const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(num => num *

2); console.log(doubled); // [2, 4, 6, 8, 10] ``` 위의 예시에서 `map()` 메서드는 `numbers` 배열의 각 요소를 2배로 만드는 함수를 적용하여 새로운 배열 `doubled`를 생성합니다.



2. 인덱스와 원본 배열 사용하기 ```javascript const fruits = ['apple', 'banana', 'cherry']; const fruitLengths = fruits.map((fruit, index) => { return `${fruit} is at index ${index} and has ${fruit.length} characters.`; }); console.log(fruitLengths); // ["apple is at index 0 and has 5 characters.", "banana is at index 1 and has 6 characters.", "cherry is at index 2 and has 6 characters."] ``` 이 예시에서는 각 과일의 이름, 인덱스, 그리고 글자 수를 포함한 문자열을 생성하여 새로운 배열을 만듭니다.



3. 객체 배열 변형하기 ```javascript const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 } ]; const userNames = users.map(user => user.name); console.log(userNames); // ["Alice", "Bob", "Charlie"] ``` 여기서는 객체 배열에서 각 사용자 객체의 `name` 속성만 추출하여 새로운 배열을 생성합니다.

주의사항 - `map()` 메서드는 항상 새로운 배열을 반환합니다.

원본 배열은 변경되지 않습니다.

- `map()`의 콜백 함수는 배열의 각 요소에 대해 호출되며, 배열의 길이만큼 호출됩니다.

- 만약 `map()` 메서드의 콜백 함수가 `undefined`를 반환하면, 결과 배열의 해당 요소는 `undefined`로 설정됩니다.

결론 `map()` 메서드는 배열의 각 요소를 변형하여 새로운 배열을 생성하는 데 매우 유용한 도구입니다.

특히 데이터 가공, 변형, 필터링 등의 작업을 수행할 때 자주 사용됩니다.

자바스크립트의 함수형 프로그래밍 스타일을 활용하여 코드의 가독성과 유지보수성을 높이는 데 기여할 수 있습니다.