들어가며
파이썬에서 map() 함수를 너무 애용했기 때문에 자바스크립트에서도 map 함수가 있는지 궁금했습니다. 찾아보니 자바스크립트에서도 map 메소드가 역시나 있었고 많이 쓰이더라고요. “자바스크립트 map 메소드”는 파이썬에서와 마찬가지로 원본 배열의 각 요소에 제공된 함수를 적용하여 새 배열을 만드는데 사용할 수 있는 메서드입니다.
그리고 제목에서 보셨다시피 배열을 다루기 위한 많은 메스드와 연계해서 많이 쓰이는 배열의 콤보 기술 중 하나입니다.
기본 이지만 정말 강력한 map 메소드…! 이번 포스트에서는 map 함수는 무엇인지 그리고 어떻게 활용할 수 있는지에 대해서 정리해보았습니다.
자바스크립트 map 메소드 기본 사용법
map() 함수는 원본 데이터를 변경하지 않고 배열의 데이터를 변환하는 데 유용합니다.
기본적인 사용법은 다음과 같습니다.
const newArray = originalArray.map(callback(element, [index], [array]));originalArray: map() 함수가 호출되는 배열callback: 배열의 각 요소에 대해 한 번씩 호출되는 함수. 세 가지 매개변수 받을 수 있음element: 배열에서 현재 처리되는 요소index(optional): 현재 요소의 인덱스array(optional): map() 함수가 호출된 배열
기존의 배열은 수정하지 않는 것에 유의해주세요. 대신 각 요소에 함수를 적용한 결과가 포함된 새 배열을 반환합니다.
배열의 요소들을 제곱으로 만든다고 하면 map 메소드를 활용해서 아래와 같이 간단히 구현할 수 있습니다.
const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map(function (num) {
return num * num;
});
console.log(squaredNumbers); // [1, 4, 9, 16]화살표 함수를 사용한 map 메소드
map 메소드 내의 콜백 함수는 function(){}을 사용하지 않고 간단하게 화살표 함수로 표현할 수도 있습니다.
인자를 요소 하나만 쓰는 경우에는 ()을 생략할 수 있기 때문에 arr.map(el => el * el); 처럼 사용할 수 있습니다.
화살표 함수에 대한 설명은 아래 글을 참고해주세요
const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); //[1, 4, 9, 16]화살표 함수
map 콜백 함수의 index 인자
index 인자를 받아서 아래와 같이 숫자로 된 추가 연산 작업을 할 수 있습니다.
아래 코드에서는 요일을 받아서 Day [숫자]를 붙여주는 작업을 진행 했습니다.
index 인자를 활용함으로써 파이썬의 enumerate 처럼 사용할 수 있습니다.
const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
const indexedDays = daysOfWeek.map((day, index) => {
return `${day} (Day ${index + 1})`;
});
console.log(indexedDays);
// ['Monday (Day 1)','Tuesday (Day 2)','Wednesday (Day 3)','Thursday (Day 4)','Friday (Day 5)','Saturday (Day 6)','Sunday (Day 7)']map 콜백 함수의 array 인자
array 인자를 받아서 아래와 같이 배열의 속성을 배열의 요소에 적용하는 코드를 작성 할 수 있습니다.
const numbers = [1, 2, 3, 4, 5];
// Multiply each element of the array by its index
const newArray = numbers.map((element, _, array) => {
return element * array.length;
});
console.log(newArray); // [5, 10, 15, 20, 25]index 인자는 필요 없고 array는 필요한 경우
map 메소드에서 element와 array 인자만 사용하고 index 인자가 필요 없는 경우는 _ 을 사용해서 생략 할 수 있습니다.
const newArray = originalArray.map((element, _, array) => {
// Your code here
});_(밑줄)이 index 매개변수의 자리 표시자로 사용되어 해당 매개변수가 무시되고 콜백 함수에서 사용되지 않음을 나타냅니다.
자바스크립트 map 메소드 사용 예
map 메소드는 정말 무궁무진하게 활용 될 수 있습니다. 아래 사용 예는 map 메소드를 활용할 수 있는 몇 가지 사례 입니다.
데이터 변환
const names = ["Alice", "Bob", "Charlie"];
const nameLengths = names.map(name => name.length);
console.log(nameLengths); // [5, 3, 7]데이터 타입 변환
const strings = ["1", "2", "3"];
const numbers = strings.map(str => parseInt(str));
console.log(numbers); // [1, 2, 3]객체 정보를 배열로 변환
const users = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
];
const userNames = users.map(user => user.name);
console.log(userNames); // ["Alice", "Bob"]다른 배열 메소드와 연결
아래 코드는 배열 숫자 중 짝수만 제곱하는 코드 입니다. filter() 메소드와 연결해서 사용하는 것에 주목해주세요.
const numbers = [1, 2, 3, 4];
const squaredEvenNumbers = numbers.filter(num => num % 2 === 0).map(num => num * num);
console.log(squaredEvenNumbers); // [4, 16]문자열 변환
문자열에 ‘A’가 있다면 ‘B’로 바꾸고 아니면 ‘A’로 바꾸는 기능을 아래 와 같이 구현할 수 있습니다.
문자열에서 replaceAll() 메소드를 사용할 수도 있지만 배열로 만든 뒤 다음과 같이 map 함수를 활용해서 기능을 구현할 수도 있습니다.
const solution = (myString, pat) => [...myString].map(v => v === 'A' ? 'B' : 'A').join('')확산연사자를 활용 문자열 -> 배열
map 함수와 삼항 연산자를 활용해서 각 요소를 검사 후 변환
”join() 함수를 통해서 배열 -> 문자열
확산 연산자란?
마치며
파이썬의 map 함수와 마찬가지로 자바스크립트 map 메소드 또한 굉장히 유용한 기능인 것 같습니다.
콜백 함수의 index인자와 array 인자를 활용하여 추가적인 도움을 주는 게 인상적이였습니다.
파이썬은 map 함수 사용 시 map 객체를 반환하는 반면 자바스크립트에서는 바로 배열로 반환 해주는 게 사용 측면에서는 편리하다고 느껴졌습니다.
그 밖에 파이썬 map 함수와 유사하지만 재미있는 차이점 들이 있는데요.
해당 내용은 시간이 되면 정리하면 재밌을 것 같습니다.
참고하면 좋은 글
