Javascript map()메서드

Javascript map() 메서드에 대해서

map() 메서드는 무엇일까?

Javascript map() 함수는 배열의 모든 요소에 대해 지정된 함수를 호출하고, 그 결과로 새로운 배열을 반환한다. 즉, 기존의 배열을 변경하지 않고 새로운 배열을 만들어내는 함수이다.

array.map(function(currentValue,index,array){
	//처리할 코드
},thisValue);

array는 map()함수가map() 함수가 호출되는 배열이다. function(currentvalue, index, array)는 배열의 각 요소를 처리할 함수이다. currentValue는 현재 처리 중인 요소의 값이다. index는 현재 처리 중인 요소의 인덱스이며, array는 map() 함수가 호출된 배열 자체를 나타낸다. thisValue는 선택적으로 사용할 수 있으며, function 내에서 this로 참조할 객체를 지정한다.

그리고 array.map(function( ){ })으로 작성해도 해도 되고 array.map(( )⇒{ }) (화살표 함수)로 작성해도 된다!

(개인적으로 화살표함수가 더 간결해서 선호하는 편이다!)

예시)

const arr1 = [1,2,3];
const arr2 = arr1.map(function(num){
	return num * 2;
});

console.log(arr2); //[2,4,6]

위의 코드에서는 ‘arr1’ 배열의 각 요소에 대해 2를 곱한 새로운 배열 ‘arr2’를 만들어 반환한다. 이때 map()함수를 호출할 때 처리할 함수를 인자로 전달하고 있다. 함수 내에서는 각 요소에 대해 곱셈 연산을 수행하고, 그 결과를 반환한다. map() 함수는 이 반환값을 모아서 새로운 배열을 만들어 반환한다.

⇒ arr1배열 값 하나씩 곱하기 2한 후에 새로운 배열(arr2)에 넣는다.

(저기서 num은 그냥 arr1를 받은거임)

map() 메서드 장점

1. 간결한 코드 작성
2. 새로운 배열 생성
3. 함수형 프로그래밍 지원
4. 속도 향상
5. 코드의 가독성 향상

이렇게 5가지의 장점이 있다.

간결한 코드 작성은 for 루프나 forEach 등을 사용하는 것보다 간결한 코드를 작성할 수 있다. 배열의 모든 요소를 순회하면서 각 요소에 대해 처리할 함수를 인자로 전달할 필요가 없으며 map( ) 함수 내에서 간단한 함수를 작성하여 코드를 작성할 수 있다.

새로운 배열 생성은 map( ) 함수는 원래의 배열을 변경하지 않고 새로운 배열을 반환한다. 그래서 위에 작성한 예시를 보면 arr1를 map( ) 함수에 적용하면 arr1의 요소가 변하는 게 아니라 arr2라는 새로운 배열이 만들어진다.

함수형 프로그래밍 지원은 map( ) 함수는 함수형 프로그래밍에서 많이 사용되는 고차 함수(higher-order function) 중 하나이다. 함수형 프로그래밍에서는 함수를 일급 객체로 취급하므로 함수를 인자로 전달하거나 함수를 반환하는 것이 가능하다. 그래서 map( ) 함수는 이러한 함수형 프로그래밍의 개념을 구현하는데 유용하게 사용된다. (여기서 함수를 일급 객체로 취급한다는 의미는 함수를 일급 객체로 취급하면, 함수를 조합하거나 추상화하여 코드를 작성할 수 있으며 이를 통해 코드의 재사용성과 유연성을 높일 수 있다. )

속도 향상은 map( ) 함수는 내부적으로 최적화가 되어 있어 다른 배열 순회 방법에 비해 더 빠르게 처리할 수 있다. 이는 대규모 데이터를 다룰 때 유용하며, 성능 개선에 도움이 된다. (그래서 항상 프로그래머스 문제에서 내가 작성한 코드는 4~5줄이 넘어갈 때 map() 함수를 사용한 문제 풀이는 1줄이거나 길어봤자 2줄일 정도로 코드가 굉장히 짧고 간결했다. )

코드의 가독성 향상은 map( )함수를 사용하면 코드의 가독성이 향상된다. 루프나 forEach 등을 사용한 코드보다 map( )함수를 사용하면 간결하고 명확한 코드를 작성할 수 있다. 이는 코드 유지보수와 개발 생산성에도 도움이 된다.

map( ) 활용

const numbers = [1,2,3,4,5];
const deletedNumbers = numbers.map((number,index) => {
	if( index === 2 ){
		return null;
	}
	return number;
}).filter( number => number !== null );
console.log(deletedNumbers);
//[1,2,4,5]

이처럼 삭제 기능 만들 때 사용하기 좋은 함수이다. 2번째 인덱스에 위치한 3에 null이란 값을 주고 리턴해서 number에 [1,2, null,4,5]란 값에 filter를 사용해 null이 아닌 값들을( number!== null ) 리턴한다.

그리고 map( ) 메서드 안에 number([1,2,3,4,5])랑 index(4)는 각각 배열과 배열 길이 수가 들어있다.

그래서 numbers [index]해버리면 [1,2,3,4,5]가 나온다. 이처럼 알아서 순환해 주니까 for대신 사용하기 좋다.

map( ) 함수에 대한 나의 주관적인 생각

프로그래머스 문제 풀고 나면 map( ) 함수를 이용해 다양하게 코드를 작성한 것을 보고 얼마나 유용한 함수인지 알게 되어 이렇게 정리해 보게 되었다. 또한 리액트에서 컴포넌트 안에 상품 목록 같은 정보 데이터를 갖고 있을 때 map( ) 함수를 사용하면 깔끔하게 코드를 작성하는 것을 두 눈으로 보니 이 함수에 대해 얼마나 잘 활용하느냐에 따라 나의 코딩실력이 결정될 정도였다.

노션에 정리한걸 복붙한거라 상대적으로 가독성이 떨어집니다. 좀 더 가독성 좋게 보고 싶으신 분들은 링크통해서 보셔도 됩니다:)