JavaScript - forEach(), 다양한 예제로 이해하기

Javascriptexamples

자바스크립트에서 forEach()가 무엇인지 알아보고 다양한 예제로 사용 방법을 알아봅니다.

forEach()는 배열을 순회하면서 인자로 전달한 함수를 호출하는 반복문입니다. 배열 뿐만 아니라, Set이나 Map에서도 사용 가능합니다.

1. forEach() syntax

forEach()의 문법은 아래와 같으며, 함수로 value, index, array를 전달할 수 있습니다.

arr.forEach(func(value, index, array))
  • value : 현재 순회 중인 요소
  • index : 현재 순회 중인 요소의 index
  • array : 배열 객체

2. forEach()로 배열 순회

아래 코드는 forEach로 배열을 순회하면서 모든 요소를 출력하는 예제입니다. arr.forEach()의 인자로 함수를 전달하면 배열의 모든 요소를 순회할 때, 함수의 인자로 요소를 전달합니다.

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

const arr = ['apple', 'kiwi', 'grape', 'orange'];

arr.forEach(myFunc);

Output:

apple
kiwi
grape
orange

3. forEach()로 배열 순회 : Lambda(Arrow function)로 구현

위의 예제는 아래와 같이 Lambda 표현식으로 구현할 수 있습니다. 이렇게 구현하는 것이 코드가 간단합니다.

const arr = ['apple', 'kiwi', 'grape', 'orange'];

arr.forEach((item) => {
  console.log(item);
});

Output:

apple
kiwi
grape
orange

4. forEach()로 배열 순회 : value, index를 인자로 받기

위의 예제는 forEach에 전달되는 함수에서 value(item)만 받았는데, 아래 예제는 value, index를 인자로 전달 받고 출력합니다.

const arr = ['apple', 'kiwi', 'grape', 'orange'];

arr.forEach((item, index) => {
  console.log("index: " + index + ", item: " + item);
});

Output:

index: 0, item: apple
index: 1, item: kiwi
index: 2, item: grape
index: 3, item: orange

5. forEach()로 배열 순회 : value, index, array를 인자로 받기

다음은 함수에서 value, index, arr을 모두 전달 받아 출력하는 예제입니다.

const arr = ['apple', 'kiwi', 'grape', 'orange'];

arr.forEach((item, index, arr) => {
  console.log("index: " + index + ", item: " + item
      + ", arr[" + index + "]: " + arr[index]);
});

Output:

index: 0, item: apple, arr[0]: apple
index: 1, item: kiwi, arr[1]: kiwi
index: 2, item: grape, arr[2]: grape
index: 3, item: orange, arr[3]: orange

6. Set에서 forEach()로 요소 순회

Set에서도 forEach를 사용할 수 있습니다. 아래와 같이 Set의 모든 요소를 순회하면서 출력할 수 있습니다.

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

set.forEach((item) => console.log(item));

Output:

1
2
3

7. Map에서 forEach()로 요소 순회

Map에서도 forEach를 사용할 수 있습니다. 아래와 같이 Map의 모든 요소를 순회하면서 value를 출력할 수 있습니다.

let map = new Map();
map.set('name', 'John');
map.set('age', '30');

map.forEach ((value) => console.log(value));

Output:

John
30

위의 예제에서는 value만 함수의 인자로 전달받았는데, 아래와 같이 key와 value를 함께 전달받을 수도 있습니다.

let map = new Map();
map.set('name', 'John');
map.set('age', '30');

map.forEach ((value, key) => console.log("key: " + key + ", value: " + value));

Output:

key: name, value: John
key: age, value: 30
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha