🌈 Chapter 1: 함수형 길들이기

• 최근에 유행하기 시작한 리액티브 프로그래밍은 데이터 흐름(data flow)과 변경 전파(propagation of change)에 초점을 둔다.
• 자바스크립트로 비동기 또는 이벤트 중심 코드를 다룰 때도 이런 부분이 아주 중요하다.

📚 함수형 프로그래밍은 과연 유용한가?

• FP 사고방식은 자바스크립트만의 매우 표현적인 특성을 가다듬어, 깔끔하면서 모듈적인, 테스트하기 좋고 간결한 코드를 작성하는 데 도움이 된다.
• 자바스크립트 코드를 함수형으로 작성하면 대부분의 문제가 해결된다. 순수함수에 기반을 두고 이미 검증된 기법과 관례에 따라 구현하면 코드가 점점 복잡해지더라도 헤아리기 쉬운 방향으로 작성할 수 있다.

📚 함수형 프로그래밍이란?

• 함수형 프로그래밍이란, 한마디로 함수 사용을 강조하는 소프트웨어 개발 스타일이다.
• 목표는 애플리케이션의 부수 효과(Side Effect)를 방지하고 상태 변이(mutation of state) 를 감소하기 위해 데이터의 제어 흐름과 연상을 추상(abstract)하는 것이다.

document.querySelector('#msg').innerHTML = '<h1>Hello World!</h1>';

• 위 예제는 모든 걸 하드코딩한 단순한 프로그램이라서 메시지를 동적으로 표시할 수 없다.
• 함수를 만들어 달라지는 부분만 매개변수로 주면 같은 코드를 다시 사용할 수 있다.

function printMessage(elementId, format, message) {
  document.querySelector(`#${elementId}`).innerHTML = `<${format}>${message}</${format}>`;
}

• 나아지긴 했지만 완벽히 재사용 가능한 코드는 아니다.
• 메시지를 HTML 페이지 대신 파일에 써보자.
• 매개변수가 단순한 스칼라 값이 아닌, 특정 기능을 함수에 추가하여 매개변수로 전달하는, 다시 말해 함수를 매개변수화하는 전혀 다른 차원의 과정을 떠올려야 한다.

var printMessage = run(addToDom('msg'), h1, echo);

printMessage('Hello World!');

• 작은 함수들을 재료로 새로운 함수를 만들어낸다.
• 재사용성과 믿음성(reliability)이 좋고 이해하기 쉬운, 더 작은 조각들로 프로그램을 나눈 후, 전체적으로 더 헤아리기 쉬운 형태의 프로그램으로 다시 조합하는 과정을 나타낸다.
• 임시 함수 run 참고
• 함수형 코드는 기본적으로, 마치 알고리즘의 초기 조건을 조정하듯, 본연의 기능은 그대로 간직한 채 코드를 쉽게 변경하기 위해 코드 자체를 매개변수화하는 것이다.

🎈 함수형 프로그래밍은 선언적

• 함수형 프로그래밍은 큰 틀에서 선언적(declarative) 프로그래밍 패러다임에 속한다.
• 내부적으로 코드를 어떻게 구현했는지, 데이터는 어떻게 흘러가는지 밝히지 않은 채 연산/작업을 표현하는 사상이다.
• 아직은 자바, C#, C++ 등의 구조적/객체지향 언어가 지원하는 명령형 또는 절차적 모델이 더 많이 쓰인다.
• 명령형으로 짠 코드

var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for(let i = 0; i < array.length; i++) {
  array[i] = Math.pow(array[i], 2);
}

• 명령형 프로그래밍은 컴퓨터에게 원하는 작업을 어떻게 하는지 상세히 이른다.
• 이와 달리 선언적 프로그래밍은 프로그램의 서술부와 평가부를 분리하여, 제어 흐름이나 상태 변화를 특정하지 않고도 프로그램 로직이 무엇인지를 표현식으로 나타낸다.

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(
  function(num) {
    return Math.pow(num, 2);
  }
);

• 루프를 함수로 추상하면 ES6부터 새로 선보인 람다 표현식(lambda expression) 이나 화살표 함수(arrow function) 를 쓸 수 있다.

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => Math.pow(num, 2));

• 루프를 제거해야 되는 이유는 루프를 재사용하기도 어렵고 다른 연산에 끼워 넣기도 어려운 명령형 제어 구조물이다.
• 또 루프는 성격상 반복할 때마다 값이나 상태가 계속 바뀐다.
• 그러나 함수형 프그램은 무상태성(statelessness) 과 불변성(immutability) 을 지향한다.
• 무상태 코드는 전역 상태를 바꾸거나 혼선을 일으킬 가능성이 단 1%도 존재하지 않는다.
• 상태를 두지 않으려면 부수효과와 상태 변이를 일으키지 않는 순수함수(pure function) 를 써야 한다.

🎈 순수함수와 부수효과

• 함수형 프로그래밍은 순수함수로 구성된 불변 프로그램 구축을 전제로 한다.
• 순수함수 특성
  1. 주어진 입력에만 의존할 뿐, 평가 도중 또는 호출 간 변경될 수 있는 숨겨진 값이나 외부 상태와 무관하게 작동한다.
  2. 전역 객체나 레퍼런스로 전달된 매개변수를 수정하는 등 함수 스코프 밖에서 어떤한 변경도 일으키지 않는다.

var counter = 0;
function increment() {
  return ++counter;
}

• 자신의 스코프에 없는 외부 변수 counter를 읽고 수정하므로 불순하다.
• 외부 자원을 상대로 데이터를 읽고 쓰는 함수는 부수효과를 동반한다.
• 여기서 counter는 암시적 전역 변수를 통해 접근하는데, this 키워드를 거쳐 인스턴스 데이터에 접근하는 것 역시 부수효과가 유발된다.
• 다음은 부수효과가 발생하는 상황이다.
  1. 전역 변수에서 변수, 속성, 자료구조를 변경
  2. 함수의 원래 인수 값을 변경
  3. 사용자 입력을 처리
  4. 예외를 일으킨 해당 함수가 붙잡지 않고(catch) 그대로 예외를 던짐(throw)
  5. 화면 또는 로그 파일에 출력
  6. HTML 문서, 브라우저 쿠키, DB에 질의
• 이렇듯 무조건 함수형 프로그래밍은 모든 상태 변이를 근절하자는 건 아니고, 상태 변이를 줄이고 관리할 수 있는 프레임워크를 제공하여 순수/불순 함수를 구분하자는 것이다.
• 다음 예제는 SSN으로 학생 레코드를 검색하여 브라우저에 표시하는 명령형 프로그램이다.

function showStudent(ssn) {
  let student = db.find(ssn); // db 조회
  if(student !== null) {
    document.querySelector(`#${elementId}`).innerHTML = `
    ${student.ssn},
    ${student.firstname},
    ${student.lastname}
    `;
  }
  else {
    throw new Error('학생을 찾을 수 없습니다.');
  }
}

showStudent('444-44-4444');

• 이 함수는 확실히 자신의 스코프를 벗어나 몇 가지 부수효과를 파장을 일으킨다.
  • 변수 db를 통해 데이터에 접근하는데, 함수 서명에는 이런 매개변수가 없기 때문에 외부 변수이다.
  • elementId는 그 값이 언제라도 그 값이 언제든지 바뀔 수 있는 전역 번수다.
  • HTML 요소를 직접 고치기 때문에 그 자체로 가변적인, 전역 공유 자원이다.
  • 학생 레코드를 찾지 못해 예외를 던지면 전체 프로그램의 스택이 툭 풀리면서 종료될 것이다.
• 그렇기 때문에 함수형으로 구현부를 개선할 수 있다.
  • 긴 함수를 하나의 목적을 가진 짧은 함수로 각각 분리한다.
  • 함수가 해야 할 작업에 필요한 인수를 모두 명시하여 부수효과 개수를 줄인다.
• 커링을 사용하여 단항 함수(unary function) 로 나눈다.

var find = curry((db, id) => {
  let obj = db.find(id);
  if(obj === null) {
    throw new Error('객체를 찾을 수 없습니다.');
  }
  return obj;
});

var csv = student => 
  `${student.ssn}, ${student.firstname}, ${student.lastname}`;

var append = curry((selector, info) => {
  document.querySelector(selector).innerHTML = info;
});

• 부수효과를 줄임으로써 외부 조건 변화에 덜 취약한 프로그램이 되었다.
• 함수가 일관된 반환값을 보장하도록 해서 전체 함수 결과를 예측 가능한 방향으로 유도하면 여러모로 이로운데 이것을 참조 투명성(referential transparency) 이라는 순수함수 본연의 특징이다.

🎈 참조 투명성과 치환성

• 참조 투명성은 순수함수를 정의하는 좀 더 공식적인 방법이며, 여기서 순수성(purity) 이란 함수의 인수와 결괏값 사이의 순수한 매핑 관계를 의미한다.
• 따라서 어떤 함수가 동일한 입력을 받았을 때 동일한 결과를 내면 이를 참조 투명한 함수라고 한다.
• 참조 투명한 함수로 만들려면 이 함수가 의존하는 상태, 즉 외부 변수를 제거하고 함수 서명에 정규 매개변수로 명시해야 한다.

// 변경 전
var counter = 0;

function increment() {
  return ++counter;
}

// 변경 후
var increment = counter => counter + 1;

• 이런 함수는 코드를 테스트하기 쉽고 전체 로직을 파악하는 것도 쉽다.

🎈 불변 데이터 유지하기

• 불변 데이터는 한번 생성된 후에는 절대 바꾸지 않는다.
• 배열을 정렬하는 간단한 코드이다.

var sortDesc = arr => {
  arr.sort(
    (a, b) => b - a
  );
};

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9,];
sortDesc(arr); // [9, 8, 7, 6, 5, 4, 3, 2, 1]

• 얼핏 보기에 부수효과와 전혀 무관해 보이지만, 불행히도 상태적 함수인 Array.sort는 원본 레퍼런스가 가리키는 배열의 원소를 정렬하는 부수효과를 일으킨다.
• 함수형 프로그래밍은, 외부에서 관찰 가능한 부수 효과가 제거된 불변 프로그램을 작성하기 위해 순수함수를 선언적으로 평가하는 것이다.
• 함수를 순수 연산의 관점에서 데이터를 절대 변경하지 않는 고정된 작업 단위로 바라본다면 잠재적인 버그는 줄게 될 것이다.

📚 함수형 프로그래밍의 좋은 점

• FP로 개발한 자바스크립트 애플리케이션은 어떤 점이 좋을까
  • 간단한 함수들로 작업을 분해한다.
  • 흐름 체인으로 데이터를 처리한다.
  • 리액티브 패러다임을 실현하여 이벤트 중심 코드의 복잡성을 줄인다.

🎈 복잡한 작업을 분해하도록 유도

• 함수형 프로그래밍은 고수준에서 보면, 사실상 분해와 합성간의 상호작용이라 할 수 있다.
• 이러한 양면성 덕분에 함수형 프로그램은 모듈적으로, 효율적으로 동작한다.
• 모듈성의 단위, 곧 작업 단위는 함수 자신이다.
• FP에서 모듈화는 단일성(singularity) 의 원리와 밀접한 관련이 있다.
• 모름지기 함수는 저마다 한 가지 목표만 바라봐야 한다는 사상이다.
• 두 함수를 합성하면 첫 번째 함수의 결과를 다음 함수에 밀어 넣는 새로운 함수가 탄생한다.

var showStudent = compose(append('#student-info'), csv, find(db));

showStudent('444-44-4444');

• compose함수는 함수형 애플리케이션의 모듈성과 재사용성을 학습하는 데 매우 각별한 의미를 지닌다.
• 함수형으로 합성한 코드는 전체 표현식의 의미를 개별 조각의 의미에서 추론할 수 있다.
• 또한, 함수 합성은 고수준의 추상화를 통해 자세한 내막을 밝히지 않아도 코드가 수행하는 전 단계를 일목요연하게 나타낸다.
• compose는 다른 함수를 인수로 받으므로 고계함수(higher-order-function) 라고 한다.

🎈 데이터를 매끄럽게 체이닝하여 처리

• 함수형 라이브러리를 이용하면 어느 자바스크립트 프로젝트라도 다양한 고계함수를 마음껏 가져다 쓸 수 있다.
• 함수형 라이브러리: 로대시JS(Lodash), 람다JS(Ramda)
• 두 라이브러리의 공통점은 함수 체인을 조립한다.
• 체인(chain) 은 같은 객체를 반환하는 순차적인 함수 호출이다.
• 다음은 학생들의 평균 점수를 계산하는 예제이다.

let enrollment = [
  { enrolled: 2, grade: 100 },
  { enrolled: 2, grade: 80 },
  { enrolled: 1, grade: 89 },
];

// 명령형
var totalGrades = 0;
var totalStudentsFound = 0;
for(let i = 0; i < enrollment.length; i++) {
  let student = enrollment[i];
  if(student !== null) {
    if(student.enrolled > 1) {
      totalGrades +=student.grade;
      totalStudentsFound++;
    }
  }
}

var average = totalGrades / totalStudentsFound; // 90

• 각 단계에서 해당하는 함수를 로대시JS로 묶으면 다음과 같은 함수 체인이 형성된다.
• 함수 체인은 필요한 시점까지 실행을 미루는 느긋한 평가(lazy evaluation) 를 수행한다.
• 다른 데에선 전혀 쓸 일이 없는 일련의 코드를 전부 실행하지 않아도 되니 CPU 부하가 줄어들어 성능이 좋아진다. 이렇게 하면 다른 함수형 언어에 기본 탑재된 필요 시 호출(call-by-need) 동작을 효과적으로 모방할 수 있다.

_.chain(enrollment)
  .filter(student => student.enrolled > 1)
  // 객체로 구성된 배열에서 객체의 특정 키에대한 값을 추출할 때 사용한다. version 4 deleted??
  .pluck('grade') 
  .average()
  .value(); // 90

🎈 복잡한 비동기 애플리케이션에서도 신속하게 반응

• 리액티브 패러다임의 가장 큰 장점은, 더 높은 수준으로 코드를 추상하여 비동기, 이벤트 기반 프로그램을 설정하느라 반복되는 판박이 코드는 아예 잊고 비지니스 로직에만 전념할 수 있게 해준다는 점이다.
• 또 함수를 체인으로 묶고 합성하는 FP의 능력을 최대한 이끌어낼 수 있다.
• 다음 예제는 어떤 학생의 SSN이 올바른 번호인지 검중하는 함수이다.

var valid = false;
var elem = document.querySelector('#student-ssn');
elem.onkeyup = function(event) {
  var val = elem.value; // 부수 효과
  if(val !== null && val.length !== 0) {
    val = val.replace(/^\s*|\-|\s*$/g, ''); // 입력 데이터 정제/변경
    if(val.length === 9) {
      console.log(`올바른 SSN: ${val}!`);
      valid = true; // 부수 효과
    }
  }
  else {
    console.log(`잘못된 SSN: ${val}!`);
  }
};

• 위 코드는 복잡해보이고, 비지니스 로직이 모두 한곳에 집중되어 있어 모듈성도 결여되어 있다.
• 무엇보다 이 함수는 외부 상태에 의존하는 탓에 재사용이 어렵다.
• 함수형 프로그래밍에 기반을 둔 리액티브 프로그램은 순수함수를 이용하여 map, reduce처럼 많이 쓰는 연산으로 데이터를 처리할 수 있고 람다 표현식의 간결함을 누릴 수 있다는 이점이 있다.
• 리액티브 패러다임은 옵저버블(observable) 이라는 아주 중요한 장치를 매개로 움직이는데, 옵저버블을 이용하면 데이터 스트림을 구독해서 원하는 연산을 합성 및 체이닝하여 처리할 수 있다.

Rx.Observable.fromEvent(document.querySelector('#student-ssn'), ('keyup'))
  .pluck('srcElement', 'value')
  .map(ssn => ssn.replace(/^\s*|\-|\s*$/g, ''))
  .filter(ssn => ssn !== null && ssn.length === 9)
  .subscribe(validSsn => {
    console.log(`올바른 SSN ${validSsn}!`);
  })

• 가장 주목해야 할 부분은, 수행하는 모든 연산이 완전한 불변이고 비지니스 로직은 모두 개별 함수로 나뉘었다는 점이다.
• 굳이 리액티브/함수형을 섞어 쓸 필요는 없지만, 함수형으로 사고하다 보면 두 가지를 혼용하게 되어 결국 함수형 리액티브 프로그래밍(FRP) 이라는 아키텍처에 눈을 뜨게 된다.
• 객체지향 설계를 FP가 완전히 대체하는 것일까?
  • 함수형 프로그래밍을 코드에 적용하는 건 전부를 얻거나 전부를 잃는 식의 접근 방법이 아니다.
  • FP는 불변성과 공유 상태를 엄격하게 통제하므로 멀티스레드 프로그램도 보다 직관적으로 작성할 수 있다.

📚 마치며

• 순수함수를 사용한 코드는 전역 상태를 바꾸거나 깨뜨릴 일이 전혀 없으므로 테스트, 유지보수가 더 쉬운 코드를 개발하는 데 도움이 된다.
• 함수형 프로그래밍은 코드를 선언적으로 작성하므로 헤아리기 쉽고 전체 애플리케이션의 가독성 역시 향상된다. 또 함수와 람다 표현식을 조합하여 깔끔하게 코딩할 수 있다.
• 여러 원소로 구성된 컬렉션 데이터는 map, reduce 같은 연산을 함수 체인으로 연결하여 물 흐르듯 매끄럽게 처리할 수 있다.