TIL(20.02.21) JavaScript(함수형 프로그래밍 : forEach, map, filter, reduce)

이민택·2020년 2월 21일
0

TIL

목록 보기
6/44

함수형 프로그래밍

함수형 프로그래밍이란 수학적 함수에서 계산을 하는 방식에서 따온 프로그래밍 방식이다 기존 절차지향적인 프로그래밍 방식에서는 프로그램 상태에 영향을 미치기 쉬운 단점이 있었다 그러나 이 함수형 프로그래밍의 경우 함수로 넘겨준 입력값만 조작할 수 있기 때문에 에러를 처리할 때에도 함수내부에서만 코드를 수정하여 고칠 수 있다는 장점이 있다 밑에 코드를 보면서 예시를 보여주겠다

let testArr=[1,2,3,4];

//절차 지향 프로그램
function procedureProgram(testArr){
  for(let i=0;i<testArr.length;i++){
    console.log(testArr[i]);
  }
}

//함수형 프로그램
function functionalProgram(testArr){
  testArr.forEach(function(x){
    console.log(x)
  });
}


procedureProgram(testArr);
functionalProgram(testArr);

위 코드를 보면 일반적인 절차지향 코드의 경우 for문을 이용하여 반복문을 실행하고 있다
우리가 볼 함수형 프로그램의 코드를 보면 forEach함수가 내부의 매게변수로 함수를 받고 있는 것을 볼 수 있다

간단하게 forEach 함수에 대해 설명하면 배열의 메소드인 이 함수는 내부 콜백함수의 매게 변수로 호출할 배열의 요소와 인덱스 그리고 원래 자체 배열을 가진다 위 코드에서는 x는 배열의 현재요소를 나타낸다

배열의 메소드(map,filter,reduce)

map

map 메소드는 배열을 이용해서 새로운 메소드를 생성해야 될 때 사용한다. 예시를 들어 보겠다

let testArr=[1,2,3,4];

function mapFunction(arr){
  let newArr;
  return newArr=testArr.map(function(element){
    return element*2
    }
  );
}

console.log(mapFunction(testArr));

map메소드를 보면 콜백 함수에서 return 값으로 다음 배열에 저장할 요소 값으로 한다 이를 이용하여 배열에 모든 요소에 곱하기 2를 한 값을 저장한 배열을 반환한다

filter

filter 메소드는 의미 그대로 배열의 값들을 조건에 따라 그 값을 걸러주는 역할을 한다
사용법은 아래와 같다

배열의 홀수만 걸러내서 배열을 리턴하는 프로그램이다

let testArr=[1,2,3,4];

function mapFunction(arr){
  let newArr;
  return newArr=testArr.filter(function(element){
    return element%2==1;
    }
  );
}

console.log(mapFunction(testArr));

reduce

reduce 메소드는 filter와 map 함수와는 다르게 return 할 값의 타입을 지정할 수 있다
reduce 메소드의 매개변수로는 콜백 함수 하나와 초기값 2개를 가지고 콜백함수는 다음 4개의 매개변수를 가진다

  • 누산기(accumlator)
  • 현재값(currentValue)
  • 현재 인덱스(currentIndex)
  • 오리지널 배열

reduce함수는 누산기에 콜백함수의 값을 누적해서 다음 콜백함수로 넘겨준다 현재값은 배열의 요소를 순회하며 반복을 진행한다

reduce를 이용해서 배열의 합을 구하는 함수이다

let testArr=[1,2,3,4];

function funcReduce(arr){
  let newArr;
  return newArr=testArr.reduce(getArrSum);
}

function getArrSum(sum,cur){
  return sum+cur;
}

console.log(funcReduce(testArr));

위 코드에서 sum이 누산기가 되어서 배열의 요소를 돌면서 순회한 합을 sum에다 저장한다 각 변수에 더해지는 과정을 표로 나타내면

sum,누산기의 값은 reduce함수 호출시 초기화 해주지 않으면 배열의 첫번째 값으로 초기값을 설정한다 여기서는 초기화 해주지 않았기 때문에 그 값이 배열의 첫번쨰 값인 1로 초기화 된것이다

여러 배열 메소드를 사용하는 이유

이런 메소드들을 사용하는 이유는 이 메소드를 이용하면 배열의 값의 영향을 주지않고 배열의 값을 수정하거나 필터링을 거치거나 형식을 바꾸어서 사용할 수 있기 때문이다

profile
데이터에 소외된 계층을 위해 일을 하는 개발자를 꿈꾸는 학생입니다

0개의 댓글