Master the JavaScript Interview: What is Functional Programming?

medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0

Master the JavaScript Interview: What is Functional Programming?

이 페이지를 기반으로 작성함당

새로은 단어를 겁내지 마세요, 듣기보단 쉽습니다.

• pure functions
• function composition
• avoid shared state
• avoid mutating state
• avoid side effects

함수형 프로글래밍을 알고 싶다면 기본 개념을 이해할 필요가 있습니다

 

 

pure function (순수함수) 는

• 같은 input이 주어질 때 항상 같은 output을 리턴한다
• 사이드이팩트가 없다

pure function은 많은 참조투명성과(프로그램의 의미 변경없이 함수호출을 결과값으롤 바꿀 수 있음) 같은 fp에서 중요한 요소를 많이 가지고 있습니다.

 

 

function composition (함수 합성) 은 두 개 이상의 함수를 새로운 함수나 어떤 계산을 실행하기 위해 조합사는 과정입니다. 예를들어 f.g
에서 . <- 얘는 옆에 애랑 구성되어있다는 뜻인데, 이건
f(g(x))
얘랑 같은 뜻입니다. function composition은 어떻게 소프트웨어가 fp를 이용해 설계되었는지 이해하기위해 중요한 단계입니다.

 

 

shared state 는 공유된 scope나 scope사이에서 왔다갔다하는 객체의 property에서 존재하는 변수, 객체, 메모리 공간입니다. shared scope는 글로벌 스코프나 클로저 스코프도 포함됩니다. 종종 OOP에서 객체는 property로 다른 객체를 추가함으로써 스코프사이에서 공유됩니다.

예를들어 유저 객체를 저장한다고 생각해봅시다, saveUser() 는 서버에 요청합니다. 그리고 그동안 유저는 사진을 updateAvatar()를 이용해서 ㅇ업데이트합니다. 그리고 다른 saveUsere()르 요청합니다.두번째 응답이 첫번째 응답이 오기 전에 왔습니다. (...ㅠㅠ) 첫번째 응답이 리턴될때 새로은 프로필 사진은 이미 메모리에서 나가리되었고 예전 사진으로 대체되었습니다. 이건 race condition (경쟁상태)의 하나의 예입니다.

shared state와 관련된 문제는 순서의 변화입니다. shared state에서 시간에 의존성을 가진 요청된 함수는 실패의 연속을 유발합니다.

// shared state에서 함수의 호출 순서는 결과값을 바꿔버립니더
const x = {
  val: 2
};

const x1 = () => x.val += 1;

const x2 = () => x.val *= 2;

x1();
x2();

console.log(x.val); // 6

// This example is exactly equivalent to the above, except...
const y = {
  val: 2
};

const y1 = () => y.val += 1;

const y2 = () => y.val *= 2;

// ...the order of the function calls is reversed...
y2();
y1();

// ... which changes the resulting value:
console.log(y.val); // 5

미쳤네요.

const x = {
  val: 2
};

const x1 = x => Object.assign({}, x, { val: x.val + 1});

const x2 = x => Object.assign({}, x, { val: x.val * 2});

console.log(x1(x2(x)).val); // 5


const y = {
  val: 2
};

// Since there are no dependencies on outside variables,
// we don't need different functions to operate on different
// variables.

// this space intentionally left blank


// Because the functions don't mutate, you can call these
// functions as many times as you want, in any order, 
// without changing the result of other function calls.
x2(y);
x1(y);

console.log(x1(x2(y)).val); // 5

이런 식으로 해결하면 된다네요.

shared state를 피할때 함수 호출의 타이밍과 순써는 결과를 바꾸지 않습니다. pure function과 함께 같은 input을 넣으면 같은 output이 나오는거쥬.

 

 

Immutability (불변성) 은 생성된 이후로 수정되지 않은 객체입니다. 역으로 mutable object는 생성된 이후로 변화된 객첼를 뜻합니다.

immutability는 fp의 기본 개념입니다. 왜냐면 immutability없이 프로그램의 데이터 흐름은 손실되니까요. 상태의 히스토리는 지멋대로고 버그는 소프트웨어를 그지로 만듭니다.

자바스크립트에서 const를 떠올려보세요. const는 immutable한 객체를 만들지 않고 개발자가 바꿀수도 없습니다. 하지만 여전히 객체의 propertys는 바꿀 수 있습니다. 리얼 Immutability한 객체는 아무것도 바꿀 수 없다구요ㅠㅠ

const a = Object.freeze({
  foo: 'Hello',
  bar: 'world',
  baz: '!'
});

a.foo = 'Goodbye';const a = Object.freeze({
  foo: 'Hello',
  bar: 'world',
  baz: '!'
});

a.foo = 'Goodbye';

그래서 자바스크립트에서는 freeze라는 걸 제공하나봅니다. 하지만 이건 걍 형식상으로 freeze인가보네요 왜냐면

const a = Object.freeze({
  foo: { greeting: 'Hello' },
  bar: 'world',
  baz: '!'
});

a.foo.greeting = 'Goodbye';

console.log(`${ a.foo.greeting }, ${ a.bar }${a.baz}`);

이게 가능하대요 ^^^^^

가장 최상단의 property만 수정불가입니다. (그럼 왜...?) 많은 fp 언어에서 trie data structures (tree)라는 데이터 구조를ㄹ 제공하고 이건 deep frozen을 할 수 있습니다.

자바스크립트에는 Immutable.js 와 Mori라는 라이브러리가 있다고 하네요.

 

 

side effects 는 호출된 함수 외부에서 관찰 할 수 있는 어플리케이션 상태 변화입니다.

• 외부 변수나 객체를 수정 (글로벌 변수나 parent scope의 변수)
• 콘솔에 로깅
• 스크린에 쓰기
• 팡일에 쓰기
• 네트워크에 쓰기
• 외부 프로세스를 트리거하기
• 사이드 이펙트와 함께 다른 함수 호출하기

사이드이펙트는 대게 fp에서 피합니다.

Haskel(?)과 다른 함수언어는 monads를 이용한 순수함수를 이용해 사이드이팩트를 격리하고 캡슐화합니다.

당장 알아야 할건 사이드이펙트는 소프트웨어의 나머지부분에서 격리해야된다는 겁니다. 만약 사이드이팩트를 프로그램 로직 나머지부분에서 분리하도록 유지한다면 소프트웨어는 더 확장, 리팩토링, 디버깅, 테스트, 유지하기 쉬워집니니다.

이건 모든 프론트엔드 프레임워크가 유저에게 개별적으로 상태를 관리하고 렌더링을 느슨하게 연결하도록 권장합니다.