개발감성

함수형 프로그래밍 operation이 많고 fixed data(회사의 사업자 등록 번호나 제품의 시리얼 번호 등) 서버와 독립적인 stateless pure declerative, 직관적인 코드 객체지향형 프로그래밍 operation이 적고 common data(고객의 이름이나 주소 등) 서버와 연관된 stateful side effect imperative, 절차에 집중된 코드 OOP - inheritance //Inheritance > what it is //tight coupling //fragile base class problem class Parent { constructor(name) { this.name = name; } sleep() {} } class Child1 extends pare..

FP FP 패러다임으로 프로그램이 어떻게 작성되는지에 대한 예시코드다. UseCase //shopping const user = { name: "Kim", active: true, cart: [], purchase: [], }; let amzHistory = []; //Shopping usecase // 1. Add items to cart // 2. Add 3% tax to item in cart // 3. Buy item: cart --> purchase // 4. Empty cart // 5. Accept refunds // 6. Track user history 사용자 객체에는 이름, 활성여부, 장바구니, 구매내역이 있다. 상품을 장바구니에 담을 수 있다. 담긴 상품은 3%의 부가세가 부과된다. ..

Compose //Compose //data >> fn >> data >> fn >> data const compose = (f, g) => (data) => f(g(data)); const multiplyBy3 = (num) => num * 3; const makePositive = (num) => Math.abs(num); const multiplyBy3AndAbsolute = compose(multiplyBy3, makePositive); multiplyBy3AndAbsolute(-50); multiplyBy3은 3을 곱해주는 함수이다. makePositive는 절댓값으로 변경해 주는 함수다. compose는 커링기법으로 두 함수 f와 g를 인자로 먼저 받고 데이터를 이후에 받아서 먼저 받은 두 함..

Memoization 메모이제이션은 함수의 동일 동작을 반복해서 처리하지 않고 저장하여 불필요한 반복행위를 방지하는 것이다. function addTo5(n) { console.log("calculation..."); return n + 5; } addTo5(5); addTo5(5); addTo5(5); 함수를 실행할 때마다 매번 같은 연산을 실행한다. //only one time calculation function memoizedAddTo5() { let cache = {}; return function (n) { if (n in cache) { return cache[n]; } else { console.log("calculation..."); cache[n] = n + 5; return cache..

부분 적용과 커링의 차이 커링 //Currying const add = (a, b, c) => a + b + c; const curriedAdd = (a) => (b) => (c) => a + b + c; curriedAdd(1)(2)(3); //currying expect one arg at time 커링은 한 번에 하나의 인자를 전달하는 것이 원칙이다. 또한 마지막 인자가 완성되기까지 원본함수인 add는 대기한다. 부분적용 //Partial Application const add = (a, b, c) => a + b + c; const partialAdd5 = add.bind(null, 1); partialAdd5(2, 3); //second call expect all the arg 부분 적용은 호..

HOF - 고계함수 JS 클로저 3편 - HOF(고계함수, Higher Order Function) HOF hof는 여러 상황에 유동적으로 대응할 수 있는 일반화된 함수를 말한다. 기본적인 함수가 전편에서 설명했던 first class의 기능을 가질 때 HOF로 만들어질 수 있다. 로그인 기능을 예시로 HOF를 만 developefeel.tistory.com //HOF const hof = () => () => 5; hof()(); const hoF = (fn) => fn(5); hoF(function a(x) { return x; }); 고계함수는 함수를 인자로 받고 함수를 리턴한다. 위 코드에서 hof는 인자로 받은 함수에 5라는 인자를 전달하여 리턴한다. 그리고 전달된 함수 a는 인자값을 그대로 리..

JS의 불변성 불변성이란 함수등의 동작을 거쳐도 대상이 되는 변수의 값이 변하지 않는 것을 의미하며 side effect의 중요성이 있는 FP에서는 불변성을 지키는 편이 좋다. const obj = { name: "Kim" }; obj.name = "Park"; 객체 obj가 있을 때 name 속성을 park로 바꿀 수 있다면 obj는 불변성이 지켜지지 않는 것이다. const는 재할당이 불가능하다, 하지만 그게 불변성이 지켜진다는 것은 아니다. //Immutability const obj = { name: "Kim" }; function clone(obj) { return { ...obj }; //this is pure } function updateName(obj) { const obj2 = clon..

객체 지향 프로그래밍은 명령형 프로그래밍이다. 함수형 프로그래밍은 선언형 프로그래밍이다. 깊게 파고들어 간다면 위처럼 단정 지을 수 없지만 OOP와 FP의 차이를 이해하기 위해서는 이렇게 이해해도 무방하다고 생각한다. 친구와 약속을 잡은 상황에서 친구는 먼저 약속장소에 도착했고 나에게 기다리는 장소를 알려주는 상황이다. 명령형 - How 버스에서 내려서 앞으로 120미터 직진 후 우측 82도 각도로 회전하여 40미터 직진하면 내가 기다리는 장소야! 선언형 - What 올리브 영에서 기다리고 있을게! 명령형은 어떻게 프로그램의 절차를 밟아가는지에 집중했다고 볼 수 있다. 위 예시에서 기다리는 장소로 오기 위해서 해야 할 절차를 설명하고 있다. 선언형은 무엇을 원하는지에 집중했다. 위 예시에서 장소를 알려주..

함수형 프로그래밍에서 참조 투명성을 가진다는 것은 함수의 결괏값이 예측이 가능하다는 것을 의미한다. //Idempotence function notGood(num) { return Math.random(num); //인자에 영향받지 않는 다른 결과 console.log(num); //인자에 영향받는 같은 결과 } notGood(5); notGood이라는 함수에 어떤 인자를 넣어도 랜덤값을 출력한다. 5를 인자로 아무리 넣어도 항상 랜덤한 값을 출력하며 100을 인자로 전달해도 랜덤값을 출력한다. 이 함수는 인자에도 영향을 받지 않고 결과를 예측할 수 없으며 이런 함수를 참조 투명성을 가지지 않는다.(결과 예측 불가능) 순수합수다.(외부의 어떤 값을 변화시키지는 않음) 멱등성을 가지지 않는다.(차후 설명)..

함수의 사이드 이펙트 함수의 side effect는 함수를 동작시키면서 함수 외부에서 무언가를 변화시키는 것을 의미한다. //side effect //input -> output const array = [1, 2, 3]; function mutateArray(arr) { arr.pop(); } mutateArray(array); console.log(array); mutateArray함수는 side effect를 일으킨다. 해당 함수에 인자로 전달된 배열인 array는 함수가 동작하면 pop으로 인해 변화하기 때문이다. function mutateArray2(arr) { arr.forEach((item) => { arr.push(1); }); } mutateArray2(array); console.lo..