forEach, map, filter, reduce 메서드 작동원리

이유정·2023년 2월 20일
0

코딩지식모아

목록 보기
5/5

forEach, map, filter, reduce

  • 고차함수: 자신의 매개변수에 함수를 받는것

forEach

  • for 반복문 대신 사용한다고 생각하면 됨
// forEach 예) 
a=[10,11,12,13,14,15]; 
a.forEach(function(v,i){
 	console.log(v,i,this)// 10 0 / 11 1 / 12 2 ...
}, [1,2])

this([1,2])까지 출력하면 이렇게 됨

// forEach 내부가 이렇게 되어있을 것이다 쌤 뇌피셜
function forEach(predicate, thisArg){//함수(predicate)를 받는다
  	for(let i=0; i<a.length; i++){
    	predicate(a[i], i); 
    }
}

map

  • 원본 배열의 요소들을 하나하나 탐색하면서 요소들을 이용해서 새로운 배열을 생성하는 것
  • 원본 배열과 새로운 배열의 길이는 같게 나온다.
a=[10,11,12,13,14,15]
let answer=a.map(function(v,i){
	return v*v;
},[1,2]);

console.log(answer);

이런식으로 호출됨

//map 내부함수는 이렇게 되어있지 않을까? 쌤뇌피셜
function map(predicate, thisArg){
	let list=[]; 
  	for(let i=0; i<a.length; i++){
    	list.push(predicate(a[i],i));
    }
  return list; 
}

이런식으로 map 돌릴 때 짝수만 return 하게 해도

map 내부 함수는 못받은 값도 다 호출한다. (원본배열과 새로운 배열의 길이는 똑같을 수 밖에 없음)

filter

  • 원하는 원소만 리턴해서 생성해준다.
  • 원본 배열에 있는 요소들 중에서 특정 원하는 값들만 추출하는 것(새로운 값을 만들어내는 것이 아님)
  • 새로운 배열을 만들어내는 것은 맞음
  • 따라서, 원본배열과 새로운배열의 길이가 다를 수 있음
a=[10,11,12,13,14,15]
let answer=a.filter(function(v,i){
	return v%2===0 //참을 리턴했을 때의 요소만 저장한다.
},[1,2]);
console.log(answer) //[10,12,14]
//filter 내부함수 쌤 뇌피셜
function filter(){
	let list=[];
  for(let i=0; i<a.length; i++){
   	if(predicate(a[i],i)) list.push(a[i]) //조건문이 참일때만 push
  }
  return list;
}

reduce

  • map이나 filter처럼 배열을 생성하는 것이 아님
  • 어떤 값을 생성해서 리턴한다.
  • 알고리즘에서는 합을 구할때 reduce 사용한다.
a=[10,11,12,13,14,15]
let answer= a.reduce(function(acc, cur){
	return acc+cur;
},0) //0으로 초기화하는 값
console.log(answer);
//reduce 내부함수는 이렇게 생기지 않을까? 쌤 뇌피셜
function reduce(predicate, val){
	let result=val; 
    for(let i=0; i<a.length; i++){
    	result = predicate(result, a[i])
    }
  return result //이 result 값이 위 함수의 acc로 간다. 
}
profile
팀에 기여하고, 개발자 생태계에 기여하는 엔지니어로

0개의 댓글