JavaScript map

map() 메소드는 배열의 모든 요소에 대해 주어진 함수를 호출하고, 해당 함수의 반환값들을 모아 새로운 배열로 반환하는 자바스크립트의 내장 함수입니다. 이 메소드는 원본 배열을 변경하지 않고 새로운 배열을 생성합니다.

map() 메소드는 배열의 각 요소에 대해 주어진 콜백 함수를 호출하며, 콜백 함수는 세 가지 매개변수를 받습니다:

1. currentValue: 현재 처리 중인 요소의 값
2. index (옵션): 현재 처리 중인 요소의 인덱스
3. array (옵션): map() 메소드를 호출한 배열 자체

콜백 함수가 요소를 가공한 결과들이 새로운 배열의 요소로 들어가게 됩니다.

이제 map() 메소드에서 언제 boolean 배열과 언제 내용물 배열을 반환하는지 코드 예시를 통해 상세히 설명하겠습니다.

1. 내용물을 반환하는 경우:

map() 메소드에서 콜백 함수가 반환하는 값들이 새로운 배열의 요소로 들어가는 경우를 살펴봅시다. 콜백 함수가 어떤 값을 반환하든 해당 값들이 순서대로 새로운 배열에 들어갑니다.

const numbers = [1, 2, 3, 4, 5];

// 각 요소들을 2배로 곱한 배열을 반환
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]

// 각 요소들을 문자열로 변환한 배열을 반환
const stringNumbers = numbers.map((num) => String(num));
console.log(stringNumbers); // 출력: ['1', '2', '3', '4', '5']

위 예시에서는 map() 메소드를 호출한 배열의 각 요소들을 변형한 후, 새로운 배열에 변형된 요소들이 들어간 것을 확인할 수 있습니다.

2. Boolean 배열을 반환하는 경우:

map() 메소드에서 콜백 함수가 boolean 값을 반환하는 경우, 해당 boolean 값들이 순서대로 새로운 배열에 들어갑니다. 이 경우에는 보통 콜백 함수 내에서 조건을 판단하거나 특정 조건을 만족하는 요소들만 필터링하는 용도로 사용됩니다.

const numbers = [1, 2, 3, 4, 5];

// 각 요소들이 짝수인지 아닌지를 판별한 boolean 배열을 반환
const isEvenArray = numbers.map((num) => num % 2 === 0);
console.log(isEvenArray); // 출력: [false, true, false, true, false]

위 예시에서는 map() 메소드를 호출한 배열의 각 요소들을 짝수인지 아닌지 판별한 결과가 새로운 배열에 들어간 것을 확인할 수 있습니다. 반환된 boolean 배열은 원본 배열의 각 요소에 대해 짝수 여부를 담고 있습니다.

정리하면, map() 메소드에서는 콜백 함수가 반환하는 값에 따라 결과적으로 새로운 배열의 요소가 결정됩니다. 콜백 함수가 내용물을 반환하면 해당 내용물이 배열의 요소로 들어가고, 콜백 함수가 boolean 값을 반환하면 그 값들이 배열의 요소로 들어갑니다. 이를 활용하여 배열의 요소들을 변형하거나 조건에 따라 필터링하는 등 다양한 작업을 수행할 수 있습니다.