11. [Javascript] forEach 메서드 (Array용 for문)

forEach는 배열의 각 요소에 대해 반복적으로 작업을 수행하기 위한 배열 메서드입니다. 

forEach 메서드는 콜백 함수를 사용하여 배열의 각 요소에 대해 작업을 수행합니다.

---

1. forEach 사용법

array.forEach(callback(currentValue, index, array), thisArg);

• array: 반복 작업을 수행할 배열입니다.
• callback: 각 요소에 대해 실행될 콜백 함수입니다.
• currentValue: 현재 처리 중인 요소의 값입니다.
• index (선택적): 현재 처리 중인 요소의 인덱스입니다.
• array (선택적): forEach 메서드를 호출한 배열입니다.
• thisArg (선택적): 콜백 함수 내에서 this로 사용할 객체입니다.

---

2. 다양한 forEach 작성법

 

1) 익명 함수

array.forEach(function(element) {
  // 콜백 함수 동작
});

2) 화살표 함수

array.forEach((element) => {
  // 콜백 함수 동작
});

3) 콜백 함수 분리

function callbackFunction(element) {
  // 콜백 함수 동작
}

array.forEach(callbackFunction);

---

3. forEach 메서드 예시.

var fruits = ['Apple', 'Banana', 'Cherry'];

fruits.forEach(function(fruit, index) {
  console.log('과일:', fruit);
  console.log('인덱스:', index);
});

console 결과 값

과일: Apple
인덱스: 0
과일: Banana
인덱스: 1
과일: Cherry
인덱스: 2

---

 

4. thisArg 사용 예시

 

forEach 메서드는 thisArg 매개변수를 제공하여 콜백 함수 내에서 사용할 this 값을 지정할 수도 있습니다. thisArg 매개변수에 값을 전달하면 해당 값을 콜백 함수 내부에서 this로 사용할 수 있습니다.

var obj = {
  greeting: 'Hello',
  names: ['Alice', 'Bob', 'Charlie'],
  greetNames: function() {
    this.names.forEach(function(name) {
      console.log(this.greeting + ' ' + name);
    }, this); // thisArg로 obj 전달
  }
};

obj.greetNames();

• 위의 예시에서 obj 객체의 greetNames 메서드 내부에서 names 배열을 순회하고 있습니다. 
• forEach 메서드의 콜백 함수 내부에서 this.greeting을 사용하기 위해 thisArg로 obj 객체를 전달하여 콜백 함수에서 this 값을 올바르게 참조할 수 있도록 하였습니다.

console 결과 값

Hello Alice
Hello Bob
Hello Charlie