JavaScript 13. forEach 메서드 (반복문 아님!!)

forEach

오직 배열(Array) 객체에서만 사용 가능한 메서드 forEach.
배열 요소들을 반복 호출하여 처리할 때 사용하며, 결과는 for와 비슷하다. 다른 변칙없이 배열 내 모든 요소들을 호출하기 때문에 for문에 비해 더 깔끔하고 직관적이다.

하지만 예외를 발생시키지 않으면 중간에 반복을 종료할 수 없기 때문에, 만약 조건을 만족할 때까지만 반복해야 한다면 for 반복문을 사용해 break를 사용하는 것을 권장한다.

• forEach의 콜백(callback) 함수로는 세가지 매개변수(parameter)를 받는다. .forEach(function(currentValue, index , array){});
  • currentValue 값으로는 보통 item 이나 element가 온다.

<script>
    //매개변수 사용 예시
    let arr = [1, 6, , 7, 8]
    arr.forEach(function(element,index){
    	console.log('arr[${index}] : ${element}');
    }
    
    //콘솔창 출력결과
    //arr 변수에 설정되지 않은 빈 값은 반복을 생략한다. 
    arr[0] : 1
    arr[1] : 6
    arr[3] : 7
    arr[4] : 8
    
    //배열에 새로운 요소 추가하기 
    const arr = [0,1,2,3,4,5,6,7,8,9,10];
    const oddArray = [];
  
    arr.forEach(function(element){
    	if(element%2==1){
        	oddArray.push(element);
        }
    });
    
    console.log(oddArray);  // 결과 = 1,3,5,7,9
</script>

thisArg

forEach의 callback함수를 실행할 때 this로 사용가능한 객체를 말한다.
(일단 this를 사용할 수 있다 정도로만 알아두자!)

<script>
    const arr = [0,1,2,3,4,5,6,7,8,9,10];
    const obj1 = {name : "kim"};
    const obj2 = {name : "park"}

    arr.forEach(function(element){
        console.log('${this.name} - ${element}');
    },obj1);

    // 결과 > kim-0, kim-1, kim-2 ...

    arr.forEach(function(element){
        console.log('${this.name} - ${element}');
    }, obj2);

    // park-0, park-1, park-2 ...
</script>