(JS) forEach() (2019/10/3)

-개념

반복문처럼 배열의 length 만큼 한 바퀴 순회한다.

 

array.forEach(callbackFunction(현재 값, 인덱스 번호, 배열 전체){  })

1. 현재 값

한 바퀴 돌면서 배열의 값을 하나하나 출력한다.

 

2. 인덱스 번호

한 바퀴 돌면서 배열의 인덱스 번호 하나하나 출력한다.

 

3. 배열 전체

배열의 length만큼 배열 전체 값을 출력한다.

 

 

-사용방법

1. 한 바퀴 돌면서 현재 값 가져오기

et array_foreach = ['foreach1', 'foreach2', 'foreach3'];

array_foreach.forEach(function(value){
  console.log(value);
})

// foreach1
// foreach2
// foreach3 출력

array_foreach.forEach(function(value){

  console.log(value);

})

forEach(callbackFunction(){})의 첫 번째 인자는 array_foreach변수에 담긴 배열의 값들을 뜻한다. 배열의 length만큼 돌면서 값들 하나하나를 출력한다. 반복문은 조건이 맞을 때까지 반복하지만 foreach()는 배열의 length만큼 배열을 반복한다.

 

2. 한 바퀴 돌면서 인덱스 값 가져오기

let array_foreach = ['foreach1', 'foreach2', 'foreach3'];

array_foreach.forEach(function(value,index){
  console.log(index);
})

// 0
// 1
// 2 출력

array_foreach.forEach(function(value, index){

  console.log(index);

})

forEach(callbackFunction(){})의 두 번째 인자는 array_foreach변수에 담긴 인덱스 번호 값들을 뜻한다. 

 

3. 한 바퀴 돌면서 배열 가져오기

let array_foreach = ['foreach1', 'foreach2', 'foreach3'];

array_foreach.forEach(function(value,index,array){
  console.log(array);
})

// ["foreach1", "foreach2", "foreach3"] 출력
// ["foreach1", "foreach2", "foreach3"] 출력
// ["foreach1", "foreach2", "foreach3"] 출력

array_foreach.forEach(function(value, index, array){

  console.log(array);

})

forEach(callbackFunction(){})의 세 번째 인자는 array_foreach변수에 담긴 배열 값들을 뜻한다. 

 

 

-응용

1. 배열 값 모두 더하기

let array_foreach = [1, 20, 30];

let foreach_sum = 0;

array_foreach.forEach(function(value,index,array){
  foreach_sum += value;
})

console.log(foreach_sum);

// 51 출력

array_foreach.forEach(function(value, index, array){

  foreach_sum += value;

})

array_foreach변수에 담기 배열 값을 한 바퀴 돌면서 값들을 더하기 위해서 더한 값을 저장할 foreach_sum변수를 선언한다. 제일 처음 foreach_sum은 0 이기 때문에 0 + 1(array_foreach변수에 담긴 배열의 첫 번째 값) = 1이 나오고 이 값은 foreach_sum에 저장된다. 

 

이후, forEach() 문 때문에 반복해서 값이 더해진다.

두 번째는 foreach_sum은 1 + 20(array_foreach변수에 담긴 배열의 두 번째 값) = 21

세 번째는 foreach_sum은 21 + 30(array_foreach변수에 담긴 배열의 세 번째 값) = 51