[javascript] 자바스크립트 forEach 사용 방법 (루프돌기)

참고: https://www.programiz.com/javascript/forEach

이 튜토리얼에서는 javascript forEach() 메소드에 대해 설명합니다. forEach() 메소드는 배열의 요소를 반복하며 함수를 호출합니다. 이 루프 방법은 map 및 set에서도 사용할 수 있습니다.

JavaScript forEach

forEach() 메소드의 문법은 다음과 같습니다.

array.forEach(function(currentValue, index, arr));

위의 코드를 설명하면

• function(currentValue, index, arr) - 배열의 각 항목에 대해 실행할 함수
• currentValue - 배열의 값
• index (선택 사항) - 현재 항목의 인덱스
• arr (선택 사항) - 현재 항목의 배열

배열과 forEach

forEach() 메소드는 기본적으로 배열에서 루프돌 때 사용합니다. 예를 들어:

let students = ['John', 'Sara', 'Jack'];

// using forEach
students.forEach(myFunction);

function myFunction(item) {
    console.log(item);
}

결과:

John
Sara
Jack

위의 코드에서 forEach() 메소드는 myFunction() 함수를 받아서 students 배열의 각 항목을 표시합니다.

배열 항목 업데이트

위의 예에서 봤듯이 forEach() 메소드는 배열에서 루프를 돌 때 사용 합니다. 여기서 배열 항목을 업데이트 하는 것은 쉽습니다. 예를 들어:

let students = ['John', 'Sara', 'Jack'];

// using forEach
students.forEach(myFunction);

function myFunction(item, index, arr) {
    // adding strings to the array elements
    arr[index] = 'Hello ' + item;
}

console.log(students);

결과:

["Hello John", "Hello Sara", "Hello Jack"]

화살표 함수와 forEach

다음 예제와 같이 소스코드를 짤 때 forEach() 메소드와 함께 화살표 함수를 사용할 수 있습니다.

// with arrow function and callback

const students = ['John', 'Sara', 'Jack'];

students.forEach(element => {
  console.log(element);
});

결과:

John
Sara
Jack

for loop를 forEach로 바꾸기

다음의 예제는 동일한 코드를 for 루프와 forEach() 메소드로 작성하는 방법을 보입니다.

for loop 사용:

const arrayItems = ['item1', 'item2', 'item3'];
const copyItems = [];

// using for loop
for (let i = 0; i < arrayItems.length; i++) {
  copyItems.push(arrayItems[i]);
}

console.log(copyItems);

결과:

["item1", "item2", "item3"]

forEach() 사용:

const arrayItems = ['item1', 'item2', 'item3'];
const copyItems = [];

// using forEach
arrayItems.forEach(function(item){
  copyItems.push(item);
})

console.log(copyItems);

set과 forEach

소스코드 작성 시 forEach() 메소드를 사용해 set 항목을 루프돌릴 수 있습니다. 예를 들면:

// define Set
const set = new Set([1, 2, 3]);

// looping through Set
set.forEach(myFunction);

function myFunction(item) {
    console.log(item);
}

결과:

1
2
3

map과 forEach

다음의 예제와 같이 forEach() 메소드를 통해 map 항목을 루프할 수 있습니다.

let map = new Map();

// inserting elements
map.set('name', 'Jack');
map.set('age', '27');

// looping through Map
map.forEach (myFunction);

function myFunction(value, key) {
    console.log(key + '- ' + value);
}

결과:

name- Jack
age- 27

관련 글

자바스크립트 while, for, for...of, for...in 루프 사용 방법