-
자바스크립트 고차함수 - forEach()프론트엔드/JavaScript 2020. 10. 3. 05:03
forEach() 메서드란?
for 문을 대체할 수 있는 메서드이다.
배열을 순회하며 배열의 각 요소에 대하여 인자로 주어진 콜백 함수를 실행한다.
이때 반환값은 undefined다.
콜백 함수의 매개변수를 통해 배열의 요소 값, 인덱스값, forEach를 호출한 배열 그 자체를 전달받을 수 있다.
간단하게 사용법을 보면 다음과 같다.
<body> <script> let num1 = [1,3,5,7,9]; for(i = 0; i < num1.length; i++){ num1[i] = num1[i]*2; } console.log(num1); // [2, 6, 10, 14, 18] </script> </body>일반적인 for문을 사용하면 위와 같다.
<body> <script> let num1 = [1,3,5,7,9]; num1.forEach(function(item,index,self){ self[index]=item*2; }) // item은 배열 요소, index는 index, self는 배열 그 자체 // foreach에 인자로 주어지는 함수는 매개변수를 통해 위 세가지를 제공받는다 console.log(num1); // [2, 6, 10, 14, 18] </script> </body>forEach를 써주면 위와 같다.
forEach 메서드는 함수를 인자로 받으며 배열을 통해 호출할 수 있다.
그리고 불러낸 함수는 배열의 요소, 인덱스, 배열을 인자로 제공받을 수 있다.
forEach 뜯어보기
조금 더 콜백함수를 뜯어보면 다음과 같다.
<body> <script> let num = [1,3,5]; num.forEach(function(item,index,self){ console.log("배열요소: "+item+" 배열인덱스: "+index+" 배열: "+self) }) // 배열요소: 1 배열인덱스: 0 배열: 1,3,5 // 배열요소: 3 배열인덱스: 1 배열: 1,3,5 // 배열요소: 5 배열인덱스: 2 배열: 1,3,5 </script> </body>forEach 메서드는 호출한 배열이 가진 요소의 숫자만큼 실행된다.
그 과정에서 메서드가 가진 콜백함수는
ForEach를 호출한 배열의 요소, 배열의 인덱스, 배열을 인자로 제공받는다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트 고차함수 - filter() (0) 2020.10.03 자바스크립트 고차함수 - Map() (0) 2020.10.03 자바스크립트 고차함수 - Sort(), reverse() (0) 2020.10.03 고차함수(Higher-Order Function)에 대해서 (0) 2020.09.22 자바스크립트 배열(Array) (0) 2020.09.21