[Js] 함수형 프로그래밍 vs 객체지향 프로그래밍

함수형 프로그래밍은 함수 정의및 실행을 통해  상태를 변경하고 확인한다.

어떤 프로젝트든 상태 관리가 매우 중요한데, 함수형은 상태 불변성을 가정하고 개발한다.

 

아래 상태에서 A라는 사람이 a의 값을 2로 바꿨다. 그런데  실수로 b를 바꾸거나, a를 바꾸면서 b를 삭제할수 있다. 

B라는 사람은 b를 바꾸게끔 코드를 짰다. 그런데 A사람이 b를 삭제했다면, 실행시 undefined 에러가 발생한다.

이런 상황은 모든 로직들을 디버깅 혹은 콘솔을 찍어봐야 알게 되는데, 일일히 확인하는건 생산성이 떨어져 개발자들끼리 불변성을 약속한 것이다.

 

const state = {
	a: 1,
    b: 2
}

즉, 자신이 바꾸고자 하는 곳만 바뀌어야한다. 

*call by value, call by reference를 알아야하는 이유도 외부 state 접근 로직이 다르기 때문이다

 

객체지향 프로그래밍은 상태 관리를 객체 단위로 진행한다.

객체는 사전적으로 '실제 존재한 것'인데, 어떤 무엇이든 객체가 될수있다.

다만, 개발적으론 메소드와 스테이트를 가지고 있는 클래스로 보는게 편하다. 그리고 클래스는 new를 통해 인스턴스화가 되었을 경우에만 사용 가능하다.

 

 

코드상 차이 with TS

// js에서 class도 함수로 간주되는 가정 제외
// 함수형 순수 함수 가정 제외

//
// 함수형(arrow function)
//
const sword = () => {
    console.log('sworrrd')
}

const bow = () => {
    console.log('boooow')
}

const warrior = (weapon: Function) => {
    weapon();
    console.log('clear')
}

warrior(sword)

// 
// oop class
//
interface Mugi {
    hit() : void;
}
class Sword implements Mugi {
    constructor(){}
    hit(){
        console.log('sworrrd')
    }
}

class Bow implements Mugi {
    constructor(){}
    hit(){
        console.log('boooow')
    }
}

class Warrior {
    weapon: Mugi

    constructor(weaponType: Mugi){
        this.weapon = weaponType
    }

    hit(){
        this.weapon.hit()
        console.log('clear')
    }
}

const ob = new Warrior(new Sword())
ob.hit()

무기를 전달받아 warrior가 휘두르는 로직을 구현했다.

함수형은 함수를 파라미터로 받아 실행하고, 객체는 인스턴스화된 클래스를 받아 클래스속 메소드를 실행시킨다.

코드 길이는 함수형이 훨씬 짧지만, 전사가 필드를 걸어다닌다와 같은 상황이 주어지면 함수속에 함수가 반복되는 함수 지옥이 시작된다.

함수 지옥속 상태 추적은 불변성을 지켜도, 규모가 커질수록 유지하기 어렵다.

 

물론, 객체지향도 인스턴스화 시켜야한다는 점과 의존성 주입(DI)가 안되면 객체 지옥이 발생하게 되는데 이는 DI부분에서 살펴보겠다.

 

 

요점

-함수형과 객체지향은 상태관리 방식이 완전히 다르다

-함수형도 상태 관리를 위해 순수함수, 불변성 개념을 사용한다

 

 

 

*코드가 깨지면 아래 링크를 참조해주세요

https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/js-%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-vs-%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-ea9803002383