forEach ( )
forEach()는 자바스크립트 Array 오브젝트의 메서드입니다.
forEach()는 Array 안의 각각의 요소마다 한차례씩 함수를 반복적으로 실행합니다.
forEach()는 Array 안에 요소가 하나도 없는 경우, 실행되지 않습니다.
참고자료
기본 구문 Syntax
1. 기본 구문은 다음과 같습니다.
파라미터에 실행할 함수 이름을 넣습니다. 그리고 실행할 함수는 별도로 정의합니다.
myArray.forEach(함수이름);예제1. 다음의 코드를 실행합니다.
<script>
const myArray = [ 'a', 'b', 'c' ]
myArray.forEach(myFuction);
function myFuction (element) {
console.log(element);
}
</script>console 창에 다음과 같은 결과가 나타납니다.
a
b
c예제1 코드 설명 보기
예를 들어, a b c라는 세 항목을 가진 myArray라는 이름의 오브젝트가 있습니다.
const myArray = [ 'a', 'b', 'c' ]myArray의 각각의 항목들에 myFuction 이라는 함수를 차례대로 실행합니다.
myArray.forEach(myFuction);myFuction 함수의 내용은 다음과 같습니다. 함수가 실행될 때 console에 결과 값을 출력합니다.
function myFuction (element) {
console.log(element);
}먼저, myArray의 첫 번째 항목 a 가 element 자리에 들어갑니다. 함수가 실행되고 콘솔 화면에 a가 출력됩니다.
그 다음 myArray의 두 번째 항목 b가 element 자리에 들어갑니다. 함수가 실행되고 콘솔 화면에 b가 출력됩니다.
마지막으로, myArray의 세 번째 항목 c가 element 자리에 들어갑니다. 함수가 실행되고 콘솔 화면에 c가 출력됩니다.
2. 기본 구문의 파라미터 자리에 함수이름이 아니라 function 함수 표현식을 전체를 넣어서 다음과 같이 표현할 수 있습니다.
myArray.forEach( function(파라미터){실행할코드} );예제 1-2.
<script>
const myArray = [ 'a', 'b', 'c' ]
myArray.forEach( function(element) {
console.log(element); }
);
</script>console 창에 나타나는 결과 값은 위의 예제 1-1 실행했을 때와 동일합니다.
3. 위 2번 구문에 function 함수를 화살표 함수로 바꾸면, 다음과 같이 표현할 수 있습니다.
myArray.forEach( (파라미터) => { 실행할코드 } );예제 1-3.
<script>
const myArray = [ 'a', 'b', 'c' ]
myArray.forEach( (element) => { console.log(element); }
);
</script>console 창에 나타나는 결과 값은 위의 예제 1-1 실행했을 때와 동일합니다.
매개변수 Parameters
myArray.forEach( function(Value1, Value2, Value3) );첫번째 파라미터 Value1은 현재 선택된 요소의 값입니다.
두번째 파라미터 Value2는 현재 선택된 요소의 index입니다.
세번째 파라미터 Value3는 현재 선택된 요소의 array입니다.
첫번째 파라미터 Value1은 반드시 입력해야하는 필수값입니다. 반면, Value2, Value3은 옵션값으로 입력하지 않아도 됩니다.
예제 2-1.
<script>
const myFruit = [ '사과', '배', '토마토' ]
myFruit.forEach( function(element, index, myArr) {
console.log(element);
console.log(index);
console.log(myArr);
console.log("-----"); }
);
</script>예제2-1을 실행하면 다음의 결과가 나타납니다.
사과
0
Array(3) [ "사과", "배", "토마토" ]
-----
배
1
Array(3) [ "사과", "배", "토마토" ]
-----
토마토
2
Array(3) [ "사과", "배", "토마토" ]
-----설명