[JS] 1단계: forEach,map,filter,reduce 메서드 작동원리

forEach, map, filter, reduce 메소드 작동원리에 대해 알아보자.

.forEach()

배열을 탐색할때 배열을 돌면서, 각각의 인자에 함수를 실행시킴

배열.forEach(함수,thisArg)

let arr = [10,11,12,13,14,15];
arr.forEach(function(item,index){
console.log(item,index,this);
}, [1,2]);

/*출력하면 이렇게 나옴
10 0 [1, 2]
11 1 [1, 2]
12 2 [1, 2]
13 3 [1, 2]
14 4 [1, 2]
15 5 [1, 2]
*/

var arr = ['가','나','다','라'];
arr.forEach(function(item,index,arr2){
    console.log(item,index,arr2[index+1]);
})
/*출력하면 이렇게 나옴
가 0 나
나 1 다
다 2 라
라 3 undefined
*/

item을 보통 value 또는 v 라고 많이 표기함
index를 보통 i 로 표기함
forEach의 함수로(v,i,arr2)처럼 새로운 배열까지 넣어서 만들어줄수있음
index값을 이용해서 새로운 배열에 인자로 item 값을 넣어줄 수 있음

for문 대신으로 사용하는 용도이다.

.map()

map은 배열을 돌면서 함수를 실행시켜 새로운 배열을 생성한다.

하지만 map은 기존의 배열길이와
새롭게 만든 배열의 길이와 항상 동일하다.

a = [10,11,12,13,14,15]
let answer = a.map(function(v,i){
	return v * (i+1)
})
console.log(answer)
출력하면
새롭게 생긴 배열 answer는
[10,22,24,36,70,90] 이 출력됨
10*1,11*2,13*3,14*4,15*5 순인거임

a = [10,11,12,13,14,15]
let answer = a.map((v,i) => {
if(v % 2 == 0) return v;
})
console.log(answer)
출력하면
새롭게 생긴 배열 answer는
[10,undefined,12,undefined,14,undefined]
으로 출력됨

.filter()

map과 똑같이 새로운 배열을 생성하지만,
원본 배열과 길이가 정확하게 똑같을 필요없이
원하는 원소만 딱 뽑아서 배열을 생성해줌.

하지만 새로운 값을 만들어 내는것이 아니라,
원본 값들 중에서 참으로 해당되는 요소만 뽑아오는 용도임

a=[10,11,12,13,14,15];
answer = a.filter((v,i) =>{
return v % 2 == 0; //짝수만 리턴하라는 뜻
})
console.log(answer); 
출력하면 [10,12,14]만 뽑혀서 나옴

a=[10,11,12,13,14,15];
answer = a.filter((v,i) =>{
return v + 1;
})
console.log(answer); //실행안됨

a=[10,11,12,13,14,15];
answer = a.filter((v,i) =>{
return v > 13;
})
console.log(answer); //[14,15]

참인 요소만 콜백함수에서 실행시켜줌

.reduce()

첫번째 인자는 콜백함수,
두번째 인자는 초기화하는 값이다.
reduce는 어떤 값을 리턴한다.
원본배열을 탐색하면서 콜백함수를 반복호출함

a = [10,11,12,13,14,15];
answer = a.reduce(function(acc,v) {
return acc + v;
},0)//0은 초기값임
console.log(answer) //a 모든 배열요소를 더해준 값인
acc 최종값 75가 출력됨

acc는 누적된 계산값을 의미함
v는 콜백함수에서 계산에 사용되는 요소

함수를 따로 쪼개서 reduce의 콜백함수로 사용할 수 있음

const arr = [1, 2, 3, 4];

function func(acc, v) {
  let sum = acc + v;
  return sum;
}

const a = arr.reduce(func); //1+2+3+4
console.log(a); // 10

알고리즘에서 reduce는 보통 배열의 전체 합을 구할때 사용한다.