클래스 기반 vs 함수형 기반 객체 지향 프로그래밍

JavaScript에서는 클래스 기반(Class-based) 방식과 함수형 기반(Functional) 방식 두 가지 스타일로 객체 지향 프로그래밍(OOP)을 구현할 수 있음

비교 항목	클래스 기반(Class-based)	함수형 기반(Functional)
핵심 개념	class와 constructor를 사용하여 객체 생성	function과 prototype을 사용하여 객체 생성
인스턴스 생성	new 키워드로 인스턴스를 생성	함수를 호출하여 객체를 생성
상속	extends 키워드를 사용하여 상속 구현	Object.create() 또는 클로저(Closure)를 활용하여 상속 구현
this 사용 여부	this를 사용하여 속성에 접근	this 사용 없이 상태(state)를 직접 관리
메모리 관리	클래스의 메서드는 prototype에 저장되어 메모리를 절약	함수형 방식은 매번 새 객체를 생성하므로 메모리 사용량 증가 가능
코드 가독성	객체 중심 사고에 적합하며, OOP 스타일의 코드를 쉽게 이해 가능	순수 함수와 클로저를 사용하여 코드가 더 깔끔하고 유지보수 용이
유지보수	대규모 프로젝트에 적합 (클래스 다이어그램 활용 가능)	함수 단위의 작은 모듈로 유지보수 용이

 

1. 클래스 기반(Class-based) JavaScript

📌 클래스(Class) 문법

ES6 이후부터 class 키워드를 사용하여 객체를 생성하는 방식이 추가됨

class Animal {
	constructor(name) {
        this.name = name;
    }

	speak() {
    	console.log(`${this.name}이(가) 소리를 냅니다.`);
    }
}

// 인스턴스 생성
const dog = new Animal("멍멍이");
dog.speak(); // "멍멍이이(가) 소리를 냅니다."

📌 클래스 상속

클래스 기반 상속은 extends 키워드를 사용하여 구현할 수 있음

class Dog extends Animal {
	constructor(name, breed) {
    	super(name); // 부모 클래스의 생성자 호출
        this.breed = breed;
    }
    
    speak() {
    	console.log(`${this.name} (${this.breed})이(가) 멍멍 짖습니다.`);
    }
}

const myDog = new Dog("바둑이", "진돗개");
myDog.speak(); // "바둑이 (진돗개)이(가) 멍멍 짖습니다."

📌 클래스 기반 방식은 OOP(Object-Oriented Programming)에 익숙한 개발자들에게 직관적이며, 대규모 애플리케이션에서 모듈화와 유지보수성이 뛰어남.

 

 

2. 함수형 기반(Functional) JavaSAcript

📌 생성자 함수(Constructor Function) 사용

클래스를 사용하지 않고, 기존의 함수와 prototype을 활용하여 객체를 생성 가능

function Animal(name) {
	this.name = name;
}

Animal.prototype.speak = function () {
	console.log(`${this.name}이(가) 소리를 냅니다.`);
};

// 인스턴스 생성
const cat = new Animal("야옹이");
cat.speak(); // "야옹이이(가) 소리를 냅니다."

📌 팩토리 함수(Factory Function) 활용

팩토리 함수는 클로저(Closure) 를 활용하여 객체를 반환하는 방식

const createAniaml = (name) => {
	return {
    	name,
        speak: () => console.log(`${name}이(가) 소리를 냅니다.`),
    };
};

const rabbit = createAnimal("토끼");
rabbit.speak(); // "토끼이(가) 소리를 냅니다."

📌 함수형 상속(클로저 활용)

const createDog = (name, breed) => {
  let animal = createAnimal(name);
  return {
    ...animal,
    breed,
    speak: () => console.log(`${name} (${breed})이(가) 멍멍 짖습니다.`),
  };
};

const myDog = createDog("바둑이", "진돗개");
myDog.speak(); // "바둑이 (진돗개)이(가) 멍멍 짖습니다."

📌 함수형 방식은 this를 사용하지 않으므로, 순수 함수(pure function) 스타일을 유지할 수 있음.
📌 리액트(React)와 같은 라이브러리에서도 함수형 컴포넌트가 점점 더 선호됨.

 

 

3. 메모리 관리 및 성능 차이

📌 클래스 기반 (프로토타입 활용)

클래스의 메서드는 prototype에 저장되므로 모든 인스턴스가 공유하여 메모리 사용이 최적화됨

class Test {
  method() {}
}

const t1 = new Test();
const t2 = new Test();

console.log(t1.method === t2.method); // true (같은 메서드를 공유)

📌 함수형 기반 (메서드가 개별 생성됨)

함수형 방식에서는 객체가 생성될 때마다 메서드도 새로 생성되어 메모리 사용량이 증가할 수 있음.

const createTest = () => ({
  method: () => {}
});

const t1 = createTest();
const t2 = createTest();

console.log(t1.method === t2.method); // false (각기 다른 메서드)

📌 함수형 방식은 this를 사용하지 않아 코드가 단순해지는 장점이 있지만, 메서드가 객체마다 개별 생성되어 성능이 떨어질 수도 있음.

 

 

4. 어떤 방식을 선택해야 할까?

✅ 클래스 기반 (Class-based) 방식이 적합한 경우

✔ 객체지향 프로그래밍(OOP)을 선호하는 경우
✔ 대규모 프로젝트에서 명확한 계층 구조와 상속이 필요한 경우
✔ 메모리를 최적화하고 성능을 고려해야 하는 경우

✅ 함수형 기반 (Functional) 방식이 적합한 경우

✔ React, Redux 등 함수형 패러다임을 사용하는 경우
✔ 클로저(Closure)를 활용하여 상태(state)를 관리해야 하는 경우
✔ this를 피하고 더 순수한 함수형 스타일을 유지하고 싶은 경우