개발감성

부분 적용과 커링의 차이 커링 //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..

다형성이란 상황의 변화에 따라 유연하게 대응하는 성질이다. JS OOP의 다형성 //Polymorphism class Animal { constructor(name) { this.name = name; } attack() { return "attack with " + this.weapon; } } class Cat extends Animal { constructor(name, nail) { super(name); this.weapon = nail; } } const naby = new Cat("Naby", "sharp nail"); naby.attack(); 동물 클래스를 상속하는 고양이 클래스는 이름과 공격 외에 무기 속성을 별도로 가지고 있다. 그리고 고양이 나비는 발톱을 이용해 공격한다. class..

ES2022부터 클래스에 private도입이 정식스펙으로 도입되었다. Private 이전엔 IIFE 등으로 클래스 내부의 자원을 외부로부터 개입하지 못하도록 막았지만 이제는 #을 통해 private으로 설정하면 변수와 메서드를 외부에서 접근하지 못하도록 할 수 있다. //ES2022 private class class Employee { #name = "Test"; //private field constructor(name) { this.#setName(name); //ok } #setName(name) { //private method this.#name = name; } sayName() { return this.#name; } } const emp = new Employee("New"); //ok ..

JS의 OOP에서는 extends를 통해 상속을 구현하고 부모클래스의 구성요소를 자식요소가 가져다 쓸 수 있도록 한다. 상속이 필요한 경우 class Elf { constructor(name, weapon) { this.name = name; this.weapon = weapon; } attack() { return "attack with" + this.weapon; } } const fiona = new Elf("Fiona", "ninja stars"); const ogre = { ...fiona }; console.log(ogre); ogre.__proto__; //empty obj console.log(fiona === ogre); //false ogre.attack(); //not func err..

OOP의 new연산자 this 바인딩 JS에서 클래스를 사용한 OOP방식의 코드작성에는 new 연산자를 사용해 this값을 생성되는 인스턴스에 바인딩해서 this가 인스턴스를 가리키게끔 한다. 그 외에 this를 바인딩하는 방식들이 JS에는 여러 개 존재한다. Default JS는 lexical scope를 기본적으로 따르지만 this를 계산할 때는 dynamic scope방식을 따른다. 따라서 실행 익스큐션의 this value는 작성된 위치에서 계산되는 것이 아닌 실행하는 global객체를 기본적으로 가리키게 된다. new binding //new binding this function Person(name, age) { this.name = name; this.age = age; } const pe..