-
자바스크립트 고차함수 - Map()프론트엔드/JavaScript 2020. 10. 3. 07:32
Map 메서드란?
for 문을 대신할 수 있는 메서드로 forEach뿐 아니라 Map()도 있다.
forEach 메서드는 for를 대체하여 배열을 순회시키며 어떤 동작을 반복하기 쉽게 한다.
반면 Map 메서드는 for문을 대체하여 배열을 순회시키며 새로운 배열을 만든다.
즉 특정 배열을 복사하기 쉽게 만든 것이 Map() 메서드다.
<body> <script> let num = [1,3,5]; // 배열 선언 let num2 = []; for(i=0; i < num.length; i++){ num2[i] = num[i]; } // for문을 이용한 배열 복사 console.log(num2); // [1,3,5] 출력 </script> </body>기존 for문을 이용한 배열 복사는 위 코드와 같다.
배열을 별도로 선언하고 내용을 복사해주는 식이다.
<body> <script> let num = [1,3,5]; let num2 = []; num.forEach(function(item,index){ num2[index] = item; }) console.log(num2) // [1,3,5] 출력 </script> </body>forEach를 써도 배열을 따로 선언하고 복사해야해서 번거롭다.
<body> <script> let num = [1,3,5]; let num2 = []; let num2 = num.map(function(item){ return item }); console.log(num2) // [1,3,5] 출력 </script> </body>Map 메서드를 쓰면 for문이나 forEach 메서드보다 편하게 배열을 복사할 수 있다.
<body> <script> let num = [1,3,5]; let num2 = num.map(function(item, index, self){ return "아이템:"+item+" 인덱스:"+index+" 배열:"+self; }); console.log(num2); // ["아이템:1 인덱스:0 배열:1,3,5", "아이템:3 인덱스:1 배열:1,3,5", "아이템:5 인덱스:2 배열:1,3,5"] </script> </body>Map 메서드는 인자로 받는 함수의 인자로 Map메서드를 호출한
배열의 요소, 인덱스, 배열 그 자체를 전달받을 수 있다.
<body> <script> let num = [1,3,5]; let num2 = num.map(function(item){ return item * 2; }); let num3 = num.map(function(item){ return item * item; }); console.log(num2); // 2, 6, 10 출력 console.log(num3); // 1, 9, 25 출력 </script> </body>Map 메서드는 콜백함수의 인자로 받은 요소들을 통해 다양한 연산이 가능하다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트 고차함수 - reduce() (0) 2020.10.03 자바스크립트 고차함수 - filter() (0) 2020.10.03 자바스크립트 고차함수 - forEach() (0) 2020.10.03 자바스크립트 고차함수 - Sort(), reverse() (0) 2020.10.03 고차함수(Higher-Order Function)에 대해서 (0) 2020.09.22