[JavaScript] forEach( ) 함수

이번 포스팅에서는 자바스크립트의 배열 객체(Array)에서 사용할 수 있는 메서드인 forEach( )에 대하여 공부를 해보고자 한다.

 

---

forEach( )란

forEach( )는 자바스크립트의 배열 객체(Array)에서 사용할 수 있는 메서드이다.
forEach( ) 메서드는 배열의 각 요소에 대해 주어진 함수를 실행한다.
이 함수는 배열의 각 요소에 대해 한 번씩 호출되며, 요소의 값, 인덱스 및 배열 자체에 대한 접근이 가능하다.

 

forEach( ) 메서드의 일반적인 구문은 다음과 같다.

arr.forEach(function(currentValue, index, array) {
    // 실행할 코드
});

• 여기서 arr은 forEach( ) 메서드를 호출하는 배열을 나타낸다.
• currentValue는 현재 처리 중인 요소의 값이다.
• index는 현재 처리 중인 요소의 인덱스이다.
• array는 forEach( ) 메서드가 호출된 배열 자체를 나타낸다.

 

forEach( ) 메서드는 반복문과 유사하게 동작하지만, 명시적으로 인덱스를 관리하거나 반복 횟수를 설정할 필요가 없다.
배열의 각 요소에 대해 콜백 함수가 순차적으로 실행된다.

 

---

forEach( ) 메서드의 특징

array (선택 사항)

• forEach( ) 메서드가 호출된 배열 자체를 의미한다.
• 일반적으로 사용되지는 않지만, 필요한 경우에는 해당 배열에 접근할 수 있다.
• 콜백 함수 내에서 이러한 매개변수를 사용하여 현재 요소의 값을 읽거나 변경할 수 있다. 

 

thisArg 매개변수

• forEach( ) 메서드는 두 번째 인자로 선택적인 thisArg 매개변수를 받을 수 있다.
• thisArg는 콜백 함수 내에서 this로 사용될 객체를 지정하는 데 사용된다.
• thisArg가 제공되면 콜백 함수 내에서 this는 해당 객체를 참조한다. 

 

배열 변경

• forEach( ) 메서드는 기존 배열을 변경하지 않는다.
• 배열의 각 요소에 대해 작업을 수행하거나 값에 접근하는 용도로 사용된다.
• 만약 배열을 변경하고자 한다면 map( ) 메서드를 사용하는 것이 좋다.
• map( ) 메서드는 forEach( )와 유사하지만, 각 요소에 대한 작업 결과를 새로운 배열로 반환한다. 

 

반복 제어

• forEach( ) 메서드는 일반적인 반복 제어문인 break나 continue와 같은 제어문을 사용할 수 없다.
• 만약 특정 조건에서 반복을 중단하고 싶다면, forEach( ) 내부에서 return 문을 사용하여 현재 실행 중인 콜백 함수만 종료시킬 수 있다.
• 이렇게 하면 다음 요소의 콜백 함수가 계속 실행된다. 

 

반환값

• forEach( ) 메서드는 반환값을 가지지 않는다.
• 그저 배열의 각 요소에 대해 콜백 함수를 실행하는 동작만 수행한다.

 

---

예제 코드

각 요소의 값에 2를 곱한 후 출력하는 코드

var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  var doubled = number * 2;
  console.log(doubled);
});

 

 

배열의 각 요소의 인덱스와 값을 출력하는 코드

var colors = ['red', 'green', 'blue'];
colors.forEach(function(color, index) {
  console.log('Index:', index, 'Color:', color);
});

 

 

thisArg 매개변수를 사용하여 콜백 함수 내에서 this로 사용될 객체를 지정하는 코드

var person = {
  name: 'John',
  age: 30,
  sayHello: function() {
    var self = this;
    var greetings = ['Hello', 'Hola', 'Bonjour'];
    greetings.forEach(function(greeting) {
      console.log(greeting + ', ' + self.name);
    }, self); // thisArg로 self 전달
  }
};
person.sayHello();

---