본문 바로가기
기술 개발/Javascript

순수 함수 (feat. 불변성, 사이드 이펙트)

by 쪼짱 2023. 4. 5.
728x90
반응형
SMALL

 

함수형 프로그래밍

Funtional Programming은 순수함수를 중심으로 Side-Effect가 없도록 프로그래밍을 하는 것을 말한다.


순수함수 (Pure Function)

  • input : 어떠한 함수에서 외부의 데이터를 직접적으로 사용하지 않고, 파라미터로 받는다.
  • output : input값에 의해 output이 결정되기 때문에 외부의 값들이 변경되더라도 함수 자체에는 외부에 영향을 받지 않기 때문에 Side-Effect가 없다.

순수 함수일한 입력에 대해 항상 동일한 출력을 반환하며, 외부 상태를 변경하지 않는 함수를 말한다. 즉, 함수 내부에서 어떤 값이 변경되지 않으며, 외부에서 관찰 가능한 상태에도 영향을 주지 않는 함수다.

 

ex) 더하기 함수

function add(x, y) {
  return x + y;
}

이 함수는 인자로 전달받은 x와 y를 더한 결과를 반환한다. 이 함수는 동일한 인자에 대해 항상 동일한 결과를 반환하며, 함수 내부에서 어떤 값도 변경하지 않는다.

 

ex) 배열을 정렬하는 함수

function sortArray(array) {
  return array.slice().sort();
}

이 함수는 입력으로 받은 array를 변경하지 않고, 새로운 배열을 생성하여 그 배열을 정렬한다. array.slice() 호출은 array 배열의 사본을 생성하기 때문에, array 배열 자체가 변경되는 것을 방지한다. 따라서, sortArray() 함수는 외부 상태를 변경하지 않고, 항상 같은 입력에 대해 같은 출력을 반환하므로 순수 함수다.

 

순수 함수의 장점

  • 순수 함수는 불변성을 유지하기 때문에 코드의 예측 가능성과 안정성을 높여준다.
  • 함수를 호출하면 항상 동일한 결과를 반환하기 때문에, 함수를 디버깅하거나 테스트하기 쉬워진다.
  • 순수 함수는 병렬 처리와 메모이제이션 등을 적용하기 쉬워 성능을 향상시키는데 도움을 준다.

사이드 이펙트

사이드 이펙트는 함수 외부의 상태를 변경하는 것을 말한다. 함수의 호출로 인해 예상치 못한 결과가 발생할 수 있다.

 

ex) Array.push() 함수

const arr = [1, 2, 3];
arr.push(4);

이 함수는 배열에 새로운 요소를 추가한다. 이는 외부 상태를 변경하는 사이드 이펙트다.

 

 

ex) Math.random() 함수

const randomNum = Math.random();

이 함수는 0과 1 사이의 임의의 실수를 반환한다. 외부 상태를 변경하지는 않지만, 매번 다른 결과를 반환하는 사이드 이펙트다.


Pure and Impure Methods

pure methods: 순수 함수 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환한다.

  • Array.map(): 배열의 모든 요소에 대해 주어진 함수를 호출한 결과를 모은 새로운 배열을 반환
  • Array.reduce(): 배열의 요소를 순회하며 각 요소에 대해 주어진 콜백 함수를 호출하고 그 결과값을 누적시켜 최종 결과값을 반환
  • Array.find(): 주어진 조건에 부합하는 첫 번째 요소를 반환하거나, 조건에 부합하는 요소가 없을 경우 undefined를 반환
  • Array.filter(): 배열의 모든 요소에 대해 주어진 함수를 호출하여, 반환값이 true인 요소로만 이루어진 새로운 배열을 반환
  • Array.concat(): 두 개 이상의 배열을 결합하여 새로운 배열을 반환
  • Array.slice(): 배열의 일부분을 선택하여 새로운 배열을 반환

impure methods: 비순수 함수 메서드는 원본 배열을 변경한다.

  • Array.push(): 배열의 끝에 하나 이상의 요소를 추가
  • Array.pop(): 배열의 끝에서 요소를 제거하고 반환
  • Array.splice(): 배열의 일부분을 선택하여 제거하거나, 새로운 요소를 추가
  • Array.sort(): 배열의 요소를 정렬함. 이 때, 원본 배열이 변경됨
  • Date.now(): 현재 시간을 밀리초 단위로 나타내는 숫자를 반환
  • Math.random(): 0 이상 1 미만의 난수를 생성하고 반환

출처

https://evan-moon.github.io/2019/12/29/about-pure-functions/

https://ko.wikipedia.org/wiki/함수형_프로그래밍

https://medium.com/jinshine-기술-블로그/1-순수함수-functional-programming-in-swift-5835839b14d3

https://en.wikipedia.org/wiki/Pure_function

https://www.scaler.com/topics/pure-function-in-javascript/

https://dev.to/suprabhasupi/pure-vs-impure-functions-3e33

https://www.freecodecamp.org/news/what-is-a-pure-function-in-javascript-acb887375dfe/

 

 

728x90
반응형
LIST