본문 바로가기

IT/JavaScript

Functional programming

Pure vs Impure Functions

Pure function은 input에 따라 output이 변경되지 않는 값을 내놓는다. 또한 함수 밖의 변수에 영향을 받지 않는다.

const add = (a, b) => a + b

위에서 add 함수는 Pure function이다. 함수에서 받는 parameter a와 b에 따라서 항상 a + b 값을 결과로 반환하기 때문이다.

const NUMBER = 42
const getNumber = (a) => NUMBER * a

위의 getNumber 함수는 Pure function이 아니다. 바깥의 NUMBER라는 변수의 영향을 받고 있기 때문에 항상 같은 결과값을 반환한다고 보장할 수 없다.

이러한 상황에서 우리가 debug를 할 때 다양한 어려움에 겪을 확률이 높아진다. 따라서 함수는 Pure function으로 작성하는 것이 적절하다고 판단할 수 있다.

Functional Programming

Functional Programming을 작성하기 위해선 몇 가지 원칙이 존재한다.

  • Don't mutate data
  • Use pure functions: fixed output for fixed inputs, and no side effects
  • Use expressions and delarations

위의 조건들만 지켜 진다면 우리는 코드를 함수형으로 작성할 수 있다.

Functional Programming in JavaScript

JavaScript에서 함수형 프로그래밍을 작성하기 위해서 Array의 내장 함수를 이용하면 매우 간편하게 작성할 수 있다.

Filter

어떠한 조건에 부합하는 값들을 가진 새로운 배열을 반환한다.

const arr = [1, 2, 3, 4]
const newArr = arr.filter((a) => a % 2 == 0)

filter 안의 callback 함수는 파라미터로 들어오는 값 a에 따라서 짝수인 값들만 반환하는 pure function이다.

Map

기존의 배열을 전부 다 반복하면서 새로운 배열을 반환한다.

const numbers = [1, 2, 3, 4]
const double = numbers.map((v) => v * 2)

forEach

기존의 배열을 전부 다 반복하지만 새로운 배열을 반환하지 않는다.

const numbers = [1, 2, 3, 4]
numbers.forEach((v) => {
    console.log(v)
})

reduce

배열의 각 요소에 대해 reducer를 적용한다. 이 때 callback 함수에서 받는 파라미터는 총 5가지 이다.

  • accumulator
  • currentValue
  • currentIndex(op)
  • array(op)
  • initialValue(op)
const arr = [1, 2, 3, 4]
const result = arr.reduce((acc, cur) => { return acc += cur }, 0)

initialValue가 0 이므로 acc의 초기값은 0에서부터 시작하여 배열의 모든 요소를 더한 최종 값 10을 반환한다.

이처럼 함수형 프로그래밍으로 프로그램을 작성하여 기존 변수에 대한 Side effect가 없도록 구현하는 것이 디버깅에도 좋고 가독성에도 좋다고 생각한다. 따라서 JavaScript를 활용하여 함수형 프로그래밍을 작성할 때 Array의 내장함수를 적절히 사용하여 Side effect를 최소화 하는 것이 옳다.

'IT > JavaScript' 카테고리의 다른 글

Static  (0) 2022.09.12
Optional chaining  (0) 2022.08.29
Shallow copy && Deep copy  (0) 2022.08.11
Prototype  (0) 2022.08.02
Lexical Environment  (0) 2022.07.30