자바스크립트 문법 - forEach()

❤️‍🔥TIL : Today I Learned

 

forEach()

배열을 순회하며, 인자로 전달한 함수를 호출하는 반복문이다.

배열, Set, Map 에서 사용 가능하다

1. forEach() 문법
2. 배열 순회
3. 배열 순회 - Lambda 식
4. value, index 인자로 받기
5. value, index, array 인자로 받기
6. Set 에서 forEach()로 요소 순회하기
7. Map 에서 forEach()로 요소 순회하기

---

• forEach() 문법
  
  

arr.forEach(func(value, index, array))

value : 현재 돌고있는 데이터

index : 현제 돌고있는 데이터중 index

array : 배열중 하나

result = cal(b=2, a=1) : 매개변수 호출 시 매개변수명을 지정해서 대입한다면 순서는 무관합니다

 

 

• forEach()로 배열 순회
  배열을 순회 하며 모든 데이터를 출력합니다
  arr.forEach() 소괄호 안에 매개변수로 코드를 작성하면
  함수의 매개변수로 요소를 하나씩 전달합니다.

const 과일바구니 = ['사과', '키위', '포도', '오렌지'];

function singlyFruit (과일) {
  console.log(과일);
}

과일바구니.forEach(myFunc);

// 과일바구니 안에 있는 데이터를 하나씩 과일로 쪼개어 출력

// 출력 =>

// 사과
// 키위
// 포도
// 오렌지

 

 

 

• 배열 순회 - Lambda 식
  위와 같은 배열 순회식 이지만(같은 결과 값)
  Lambda 사용이 가능 합니다 
  

const 과일바구니 = ['사과', '키위', '포도', '오렌지'];

과일바구니.forEach((과일) => {
	console.log(과일)
});

// 과일바구니 안에 있는 데이터를 하나씩 과일로 쪼개어 출력

// 출력 =>

// 사과
// 키위
// 포도
// 오렌지

 

 

 

• value, index 인자로 받기식
  s위 에서는 forEach에 전달되는 함수에서 value(과일)만 받았지만,
  value, index를 받아 출력할수 있습니다.

const 과일바구니 = ['사과', '키위', '포도', '오렌지'];

과일바구니.forEach((item, index) => {
  console.log("index: " + index + ", item: " + item);
});

// index: 0, item: 사과
// index: 1, item: 키위
// index: 2, item: 포도
// index: 3, item: 오렌지

 

 

 

• value, index, array를 인자로 받기
  위에서 array 까지 전달받아 출력해 보겠습니다

const 과일바구니 = ['사과', '키위', '포도', '오렌지'];

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

// index: 0, item: apple, arr[0]: 사과
// index: 1, item: kiwi, arr[1]: 키위
// index: 2, item: grape, arr[2]: 포도
// index: 3, item: orange, arr[3]: 오렌지

 

 

• Set 에서 forEach()로 요소 순회하기
  아래처럼 Set의 모든 요소를 돌면서 출력할 수 있습니다.

const set = new Set([사과, 바나나, 고구마]);

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

// 사과
// 바나나
// 고구마

 

 

• Map에서 forEach()로 요소 순회
  Map 에서도 가능 합니다!

let map = new Map();
map.set('name', '이친구');
map.set('age', '30');

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

// 이친구
// 30

 

 

---

 

 최종 정리 

1. 배열을 순회하며, 인자로 전달한 함수를 호출하는 반복문
2. 람다식 적용도 할 수 있다
3. set과 map 에서도 사용 가능하다