[JS] 49. forEach Method

안녕하세요. 박기린 입니다.

for-of문에 이어서, 이번엔 forEach 문에 대해 알아보도록 하겠습니다.

 

 

for-of 문이었을 때

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
for (const movement of movements) {
  if (movement > 0) {
    console.log(`You deposited ${movement}`);
  } else {
    console.log(`You withdrew ${movement}`);
  }
}

movements 라는 Array가 있습니다. 양수일 경우 예금을, 0 또는 음수일 경우 출금으로 인식하는 코드입니다.

for-of문의 경우 위처럼 사용합니다. movement라는 변수에 배열의 요소를 하나씩 집어놓고, 반복해서 코드를 실행합니다.

 

 

 

---

Array.prototype.forEach()

forEach 또한 for-of 문과 유사하게, 배열의 요소들을 하나씩 접근 한 후 반복해서 코드를 실행합니다.

 

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];

movements.forEach(function(movement) {
  if (movement > 0) {
    console.log(`You deposited ${movement}`);
  } else {
    console.log(`You withdrew ${movement}`);
  }
});

 

배열의 이름.forEach( 콜백함수 )

forEach()는 Array의 내장 메소드 입니다. 그래서 Array를 부른 후에 '.'을 이용해서 접근합니다. 그리고 High level function으로 콜백함수를 인수로 받습니다.

위의 코드를 보면, 콜백함수 안에 'movement'라는 인수가 있습니다. 이 인수 안에 'movements' 배열의 각 요소가 전달되는 구조입니다. 각각의 요소가 전달될 때마다 콜백함수가 반복해서 실행되는 구조입니다.

 

 

실행결과물

 

 

 

---

forEach()의 콜백함수의 인수들

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];

movements.forEach(function (mov, i, arr) {
  if (mov > 0) {
    console.log(`Movement ${i + 1}: You deposited ${mov}`);
  } else {
    console.log(`Movement ${i + 1}: You withdrew ${Math.abs(mov)}`);
  }
});

-forEach()의 콜백함수-
function( 배열의 요소가 담기는 인수,  배열 요소의 index가 담기는 인수, 전체 배열 )

순서 중요!

forEach()는 콜백함수의 인수 목록에 순서대로 '현재 element (mov)', '현재 index (i)' , '전체 배열 (arr)'을 전달합니다.

 

 

실행결과물

 

 

 

---

forEach문과 for문을 각각 언제 써야 할까?

사실, 굳이 forEach()를 사용하지 않고, for문 내부에 함수를 적용시키는 방식으로 사용해도 괜찮습니다. forEach()에서 가능한 작업은 그 근간이 되는 for문에서 역시 전부 작동합니다.

하지만, forEach()문은 좀 더 간결하고 깔끔하게 보인다는 장점이 있습니다. 각 배열의 요소에 함수를 적용하고 싶다면 forEach()가 더 효율적일 수 있습니다.

다만, forEach()문에서는 break, continue가 작동하지 않습니다. 따라서 forEach()는 항상 전체 배열을 반복합니다. 따라서 루프(반복)에서 꼭 벗어나야 하는 경우 for문을 사용해야 합니다.

그 외에는 개인 취향에 달렸습니다.

 

 

 

---

Map에서의 forEach()

const currencies = new Map([
  ['USD', 'United States dollar'],
  ['EUR', 'Euro'],
  ['GBP', 'Pound sterling'],
]);

currencies.forEach(function(value, key, map){
  console.log(`${key}: ${value}`);
});

Map의 이름.forEach(function ( value값을 담을 인수, key 값을 담을 인수, Map 원본을 담을 인수 ) {})

Map에서도 forEach()를 사용할 수 있습니다. forEach()의 콜백함수는 세 개의 인수를 받습니다. 첫 번째는 Map의 현재 value값, 두 번째는 현재 key값, 세 번째는 전체 Map입니다.

 

실행결과물

 

 

 

---

Set에서의 forEach()

const currenciesUnique = new Set(['USD', 'GBP', 'USD', 'EUR', 'EUR']);
currenciesUnique.forEach(function(value, key, set) {
  console.log(`${key}: ${value}`); // USD: USD // GBP: GBP // EUR: EUR
});
currenciesUnique.forEach(function(value, _, set) {
  console.log(`${value}: ${value}`); // USD: USD // GBP: GBP // EUR: EUR
});

Set의 이름.forEach(function ( value값을 담을 인수, value 값을 담을 인수, Set 원본을 담을 인수 ) {})

Set에서도 forEach()를 사용할 수 있습니다. forEach()의 콜백함수는 세 개의 인수를 받습니다. 첫 번째는 Set의 현재 value 값, 두 번째도 Set의 현재 value 값, 세 번째는 전체 Set입니다.

Set은 [키 : 인덱스] 개념이 없습니다. 하지만 forEach() 콜백함수의 인수의 종류가 데이터타입(Array, Set, Map)마다 달라지면 혼동이 올 수 있다고 판단하여, 두 번째 파라미터를 그대로 유지시킨 후 첫 번째 것(value)과 같은 값이 들어가도록 설정했습니다.