-
Javascript map()메서드javascript 2023. 3. 8. 14:59728x90
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() 메서드 장점
- 간결한 코드 작성
- 새로운 배열 생성
- 함수형 프로그래밍 지원
- 속도 향상
- 코드의 가독성 향상
이렇게 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( ) 함수를 사용하면 깔끔하게 코드를 작성하는 것을 두 눈으로 보니 이 함수에 대해 얼마나 잘 활용하느냐에 따라 나의 코딩실력이 결정될 정도였다.
노션에 정리한걸 복붙한거라 상대적으로 가독성이 떨어집니다. 좀 더 가독성 좋게 보고 싶으신 분들은 링크통해서 보셔도 됩니다:)
반응형'javascript' 카테고리의 다른 글
JavaScript forEach()메서드 (0) 2023.03.10 JavaScript filter()메서드 (0) 2023.03.09 Javascript split()메서드 (0) 2023.03.06 Javascript Set객체 (0) 2023.03.04 Javascript findIndex()문법 (0) 2023.03.02