JavaScript - 함수형 프로그래밍 사용이유와 방법

nRecode·2020년 3월 29일
0

JavaScript

목록 보기
4/12

함수형 프로그래밍을 사용하는이유

함수형 프로그래밍을 하는 방법을 배웠다. 반복문을 이용하지 않고 Method안에 매개변수를 함수로 갖는 것 이다. 왜 반복문을 사용하지 않고 함수형 프로그래밍을 사용하는지에 대한 의문이 들었는데 이 reference를 통해서 어느 정도 이해를 할 수 있었다.

  • 명령형 프로그래밍에서의 동시성 프로그래밍은 값이 Mutable하기 때문에 교착상태에 빠질 위험이 많지만 함수형 프로그래밍을 값이 Immutable하기 때문에 문제가 없다.
  • 함수는 입력과 출력만이 있고 함수가 값처럼 쓰일 수 있는 등

함수형 프로그래밍 Method

callback은 인자로 전달되며 실행여부를 해당함수가 결정하는 형태의 함수를 말한다.

arr.forEach(callback)

전달인자 : 반복실행 할 함수
배열의 길이만큼 반복 실행한다.
return 값 없음
callback함수의 파라미터 순서:순서대로 현재 엘리먼트(value),인덱스(index), 원본 배열(array)

콘솔에서 forEach사용

[15,69,87,45].forEach(function(val,idx){
console.log(idx+':'+val)
});


0:15
1:69
2:87
3:45

arr.map(callback)

전달인자 : 반복 실행할 함수
callback 함수에는 리턴값이 필요하며, 해당 내용이 새로운 배열의 element가 됨
callback함수의 파라미터 순서:순서대로 현재 엘리먼트(value),인덱스(index), 원본 배열(array)

콘솔에서 map사용

function square(num){
return num*num;
}
[15,69,87,45].map(square);


(4) [225, 4761, 7569, 2025]

arr.filter(callback)

전달인자 : 반복 실행할 함수
callback 함수에는 리턴값이 필요하며,true일 경우 필터 조건에 통과하며 그 element들은 새로운 배열의 element들이 된다.
callback함수의 파라미터 순서:순서대로 현재 엘리먼트(value),인덱스(index), 원본 배열(array)

콘솔에서 filter 사용

function over50(num){
return num>50;
}
[15,69,87,45].filter(over50);


(2) [69, 87]

arr.reduce(reducer,[initialValue])

reduce의 작동원리에는 배열 축소에 있다.즉 여러개의 값이 담긴 배열이 줄어서 최종적으로 하나의 값으로 만드는 과정이다. 이때 배열을 하나의 값으로 만드는 함수를 reducer라고 한다.
전달인자: 리듀서, 초기값
reducer함수에는 리턴값이 필요하며, 다음번 리듀서 호출 시, 첫 번째 파라미터로 전달된다.
reducer함수의 파라미터 순서: 순서대로 누적값(accumulator), 현재 엘리먼트(value), 인덱스(index), 원본 배열(array)

function makeAddressBook(acc, cur) {
  let firstLetter = cur.name[0];

  if(firstLetter in acc) {
    acc[firstLetter].push(cur);
  } else {
    acc[firstLetter] = [];
    acc[firstLetter].push(cur);
  }

  return acc;
}

let users = [
  { name: 'Ted', age: 40 },
  { name: 'Sed', age: 30 },
  { name: 'Bad', age: 50 }
];

users.reduce(acc, {});
호출횟수acccur리턴 값
1{}{ name: 'Ted', age: 40 }{T: [{ name: 'Ted', age: 40 }]}
2{T: [{ name: 'Ted', age: 40 }]}{ name: 'Sed', age: 30 }{T: [{ name: 'Ted', age: 40 }],S: [{ name: 'Sed', age: 30 } ]
3{T: [{ name: 'Ted', age: 40 }],S: [{ name: 'Sed', age: 30 } ]{ name: 'Bad', age: 50 }{T: [{ name: 'Ted', age: 40 }],S: [{ name: 'Sed', age: 30 } ],B: [{ name: 'Bad', age: 50 }]}

최종 리턴값

{
  T: [
    { name: 'Ted', age: 40 }
  ],
  S: [
    { name: 'Sed', age: 30 } 
  ],
  B: [
    { name: 'Bad', age: 50 }
  ]
}
profile
안정성, 확장성 있는 서버를 구축하고 가꾸는 개발자를 목표로 공부하고 있습니다. 🤔🤔🤔🤔 부족하기에 맞지 않는 내용이 있을 수 있습니다. 가감없이 피드백 해주시면 정말 감사하겠습니다..🙏

0개의 댓글