배열을 순회하면서 특정 요소를 다른 타입으로 매핑해야하는 경우가 종종 있습니다. 이 경우 JavaScript의 map() 메서드를 사용하면 간편하게 처리할 수 있습니다.
map() 메서드의 사용법
map() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 변환합니다. 매핑될 요소에 대한 로직을 콜백 함수에 작성하면 됩니다.
다음은 map() 메서드의 기본적인 사용법입니다.
const array = [1, 2, 3, 4, 5];
const mappedArray = array.map((element) => {
// 매핑될 로직 작성
return element * 2; // 요소를 2배로 곱해 매핑
});
console.log(mappedArray); // [2, 4, 6, 8, 10]
위의 예시에서는 원래 배열의 각 요소를 2배로 곱해 매핑한 결과를 새로운 배열로 만들었습니다.
특정 요소를 다른 타입으로 매핑하기
특정 요소를 다른 타입으로 매핑하기 위해서는 콜백 함수에서 요소 타입을 변환하는 로직을 작성해야 합니다. 예를 들어, 숫자로 이루어진 배열을 문자열로 변환하고 싶다면 다음과 같이 작성할 수 있습니다.
const numberArray = [1, 2, 3, 4, 5];
const stringArray = numberArray.map((element) => {
return String(element); // 요소를 문자열로 변환하여 매핑
});
console.log(stringArray); // ["1", "2", "3", "4", "5"]
위의 예시에서는 map() 메서드를 사용하여 숫자로 이루어진 배열의 각 요소를 String() 함수를 이용해 문자열로 변환했습니다.
요소의 다른 속성을 참조하여 매핑하기
매핑할 데이터가 배열 요소 자체가 아니라 요소 내의 다른 속성에 저장되어 있는 경우도 있습니다. 이 경우 콜백 함수에서 해당 속성을 참조하여 매핑할 수 있습니다. 예를 들어, 다음과 같이 객체로 이루어진 배열을 순회하면서 특정 속성을 매핑할 수 있습니다.
const objectArray = [
{ name: "John", age: 32 },
{ name: "Jane", age: 28 },
{ name: "Bob", age: 45 },
];
const nameArray = objectArray.map((element) => {
return element.name; // "name" 속성을 참조하여 매핑
});
console.log(nameArray); // ["John", "Jane", "Bob"]
위의 예시에서는 objectArray 배열의 각 요소에서 “name” 속성을 참조하여 매핑했습니다.
결론
JavaScript의 map() 메서드를 사용하면 배열을 순회하면서 특정 요소를 다른 타입으로 매핑하는 작업을 쉽게 할 수 있습니다. 콜백 함수에 원하는 로직을 작성하여 요소를 원하는 타입으로 변환하면 됩니다. 다양한 상황에 따라 map() 메서드를 유연하게 활용해 보세요!