• Blog
  • Projects
  • Resume
profile_image

[JavaScript] 순수함수

JavaScript

2021.01.19

정의

  1. 함수형 프로그래밍: 부수 효과를 없애고 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임
  2. 부수 효과: 외부의 상태를 변경하는 것 또는 함수로 들어온 인자의 상태를 직접 변경하는 것
  3. 순수 함수: 부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수, 외부의 상태를 변경하지 않는 함수


순수함수와 순수함수가 아닌것

순수함수

  • 예시 1

    function add1(a, b) {
      return a + b;
    }
    console.log(add1(10, 5));
    

    언제, 어디서 실행해도 add(10,5)는 항상 15라는 같은 값을 리턴하고 외부 상태를 변경하지 않고 있기 때문에 순수함수다.

  • 예시 2

    var obj1 = {val: 10};
    function add2(obj, b) {
      return {val: obj.val + b}; // obj의 val만 참조만 할 뿐 변경없음.
    }
    console.log(obj1.val); //변경 전 10
    var obj2 = add2(obj1, 5);
    console.log(obj1.val); //변경 후 10
    console.log(obj2.val); //15
    

순수함수가 아닌 함수

  • 예시 1

    var c = 10;
    function add3(a, b) {
      return a + b + c;
    }
    console.log(add3(10, 3));
    console.log(add3(10, 3));
    c = 20;
    console.log(add3(10, 3));
    

    함수 내에서 외부의 c라는 변수 값이 변하면 결과값도 달라지기 때문에 add3는 순수함수가 아니다.
    만약, c가 변하지 않는 수(상수)라면 add3는 순수 함수다.
    외부의 값을 참조해도 결과값이 동일한 인자에 대해서 같기 때문이다. (즉, 리턴 값을 보장해주기 때문)

  • 예시 2

    var c = 20;
    function add4(a, b) {
      c = b; // 외부상태에 영향을 미치면 ==> 부수효과임!
      return a + b;
    }
    console.log('c : ', c);
    console.log(add4(20, 30));
    console.log('c : ', c);
    

    리턴하는 값이 항상 일정하더라도 외부의 상태를 변경하는 코드가 있으면 순수 함수가 아니다.

  • 예시 3

    var obj1 = {val: 10};
    function add5(obj, b) {
      obj.val += b;
    }
    

    객체를 인자로 받아서 그 상태를 변경 시키는 코드를 가지고 있기 때문에 순수함수가 아니다.
    이 코드를 순수 함수로 나타낼 경우는 순수함수 : 예시 2 를 참고하길!


정리

  • 모듈화 수준이 높으면 재사용성이 높고 좋은 프로그래밍이라 할 수 있다.
  • 궁극적으로 평가 시점이 무관하다는 특성으로 효율적인 로직을 구성하는 것이 함수형 프로그래밍 패러다임이다.
  • 순수 함수는 평가 시점은 중요하지 않다.
  • "순수 함수는 외부의 상태를 변경하지 않으면서 동일한 인자에 대해 항상 똑같은 값을 리턴하는 함수다."



참고 자료