함수 VS 객체 리터럴 VS 정적 클래스 VS 클래스 인스턴스를 export

[toothlessdev]

안녕하세요!
자바스크립트에서 객체를 선언하는 방법에는 여러가지가 있는데요
여러분들은 혹시 어떤 기준으로 나누어 사용하는지 궁금합니다

예를들어, 단순히 count 라는 필드가 존재하고, increase, decrease 메서드가 존재하는 객체를 만드는 경우에

1. 함수의 클로져를 활용하는 방법

export function Counter() {
    let count = 0;

    return {
        increase: function() {
            count += 1;
        },
        decrease: function() {
            count -= 1;
        }
    };
}

2. 객체 리터럴을 사용하는 방법

export const Counter = {
    count: 0,
    increase() {
        this.count++;
    },
    decrease() {
        this.count--;
    },
};

3. 정적 클래스를 사용하는 방법

export class Counter {
    static count = 0;

    public static increase() {
        this.count++;
    }
    public static decrease() {
        this.count--;
    }
}

4. 클래스 인스턴스를 export 하는 방법

class Counter {
    private count = 0;

    public increase() {
        this.count++;
    }
    public decrease() {
        this.count--;
    }
}

export const counter = new Counter();

---

개인적으로 비교해 보았을 때에는

1. 생성자의 유무, OOP 측면

• 일반적인 클래스의 경우, 생성자로 부터 다른 클래스나 메서드 등의 의존성을 주입받을 수 있다는 점에서 유지보수성과 테스트가 용이하다고 느꼈습니다 (다만, 직접적으로 프론트엔드에서 typedi 나 tsyringe 와 같은 라이브러리를 사용할 만한 사례는 저는 아직 찾지 못하였습니다)
• 테스트 시에 해당 클래스 생성자로부터 주입받는 외부의존성의 모킹이 쉽기 때문에 이렇게 느꼈습니다
• (프론트엔드에서는 적용을 많이 못해봤지만,,) 여러 오픈소스 라이브러리에서 추상클래스나 interface 를 extends, implements 하는 식으로 전략 패턴을 사용하여 서로 다른 플랫폼(?) 혹은 외부 라이브러리에서 지원할 수 있도록 지원 하는 코드를 접해봤습니다!

2. 프로퍼티 추가/삭제의 측면

• 객체리터럴의 경우 타입을 유연하게 정의한다고 가정하였을때, 쉽게 객체 생성 이후에도 여러 프로퍼티들을 유연하게 추가/삭제 할 수 있다는 차이점을 느꼈습니다
• 다만 가끔은 너무 유연한 타입으로 인해 해당 객체에 어떤 프로퍼티들이 존재하는지 추적이 어렵다는 단점이 있었습니다

3. 클로져의 측면

• 자바스크립트에서 함수의 클로져를 사용하면 런타임에서도 완전한 캡슐화가 가능한 반면에, 단순한 타입스크립트에서 private / protected 접근지정자를 사용하는 경우에는 컴파일 타임에만 확인을 한다는 차이점을 느꼈습니다
• 다만 클로져를 활용하는 경우 디버깅이 어려웠다는 단점이 있었습니다

다른 개발자 분들은 자신만의 기준이 있는지 궁금하여 여쭤봅니다!

[milooy]

오... 제 케이스를 돌아보면
객체 리터럴은 보통 설정값 등 불변 데이터에서 많이 사용하고(e.g. ESLint 설정 파일, Theme config 등)
클래스는 리액트 라이프사이클에서 벗어난 인스턴스 만들 때 많이 사용했어요(e.g. 인증정보, 웹소켓 등).
(싱글톤으로 사용할때는 클래스 인스턴스 export로)

다른 분들 케이스도 궁금하네요