PHpullh
심층 가이드/JavaScript/객체지향

JAVASCRIPT · 심층 가이드

JavaScript 객체지향 완전 정리

class 문법 아래의 프로토타입 동작을 전제로 캡슐화, 합성, 불변 객체, 값 비교, DTO 매핑까지 JavaScript 객체 설계를 20개 예제로 정리합니다.

주제 20개 · 예제 코드 포함 · 최종 수정 2026-08-30 · 작성 pullh 편집팀

JavaScript의 class는 프로토타입 위에 씌운 문법입니다. 메서드는 인스턴스마다 복사되지 않고 프로토타입 객체에 한 벌만 존재하며, extends는 그 프로토타입 체인을 이어 붙일 뿐입니다. Java나 C#을 먼저 배운 사람에게 어긋나는 부분은 여기서 나옵니다. 컴파일 시점에 강제되는 인터페이스가 없고, 타입이 아니라 '그 메서드가 있는가'로 동작이 결정됩니다. 그래서 이 언어에서 객체지향을 잘 쓴다는 건 상속 계층을 정교하게 짜는 것보다 경계를 명확히 나누는 쪽에 가깝습니다.

기본 클래스 또는 구조체와 생성자와 초기화로 형태를 잡은 뒤 캡슐화에서 # 접두사 private 필드를 확인하면, 관례적으로 _name을 쓰던 시절과 무엇이 달라졌는지 분명해집니다. 상속 또는 확장 바로 뒤에 합성으로 기능 묶기가 놓인 배치도 의도적입니다. 둘을 비교해 보면 상속이 필요한 경우가 생각보다 드물다는 게 드러납니다. 후반의 불변 데이터 객체, 값 객체 비교, 변경 불가능 업데이트는 하나의 흐름으로, 상태를 바꾸는 대신 새로 만드는 방식을 다룹니다.

클래스 메서드를 콜백으로 넘기는 순간 this가 끊깁니다. arr.forEach(this.handle)은 this가 undefined가 되어 터지므로, 생성자에서 bind하거나 클래스 필드에 화살표 함수로 정의해야 합니다. 불변성 쪽에서는 Object.freeze가 얕게만 동작한다는 점을 놓치기 쉽습니다. 중첩 객체나 배열의 내부는 그대로 변경 가능하므로, 스프레드로 복사할 때도 같은 이유로 한 단계 아래는 참조가 공유됩니다. 값 객체를 비교할 때 ===가 참조를 비교한다는 사실도 함께 기억해야 합니다.

01기본 클래스 또는 구조체

JavaScript에서 기본 클래스 또는 구조체 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 기본 클래스 또는 구조체
class User {
  constructor(name, level) { this.name = name; this.level = level; }
  summary() { return `${this.name}:${this.level}`; }
}
console.log(new User("Ada", 1).summary());
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

02생성자와 초기화

JavaScript에서 생성자와 초기화 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 생성자와 초기화
class Connection {
  constructor(mode) { this.mode = mode; }
  static local() { return new Connection("local"); }
}
console.log(Connection.local());
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

03인스턴스 메서드

JavaScript에서 인스턴스 메서드 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 인스턴스 메서드
class Logger { log(message) { console.log(message); } }
class Service { constructor(logger) { this.logger = logger; } run() { this.logger.log("start"); } }
new Service(new Logger()).run();
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

04정적 메서드

JavaScript에서 정적 메서드 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 정적 메서드
const profile = Object.freeze({ name: "Ada", tags: ["js"] });
console.log(profile);
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

05상속 또는 확장

JavaScript에서 상속 또는 확장 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 상속 또는 확장
class User {
  constructor(name, level) { this.name = name; this.level = level; }
  summary() { return `${this.name}:${this.level}`; }
}
console.log(new User("Ada", 5).summary());
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

06인터페이스 또는 trait

JavaScript에서 인터페이스 또는 trait 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 인터페이스 또는 trait
class Connection {
  constructor(mode) { this.mode = mode; }
  static local() { return new Connection("local"); }
}
console.log(Connection.local());
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

07캡슐화

JavaScript에서 캡슐화 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 캡슐화
class Logger { log(message) { console.log(message); } }
class Service { constructor(logger) { this.logger = logger; } run() { this.logger.log("start"); } }
new Service(new Logger()).run();
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

08합성으로 기능 묶기

JavaScript에서 합성으로 기능 묶기 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 합성으로 기능 묶기
const profile = Object.freeze({ name: "Ada", tags: ["js"] });
console.log(profile);
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

09팩터리 메서드

JavaScript에서 팩터리 메서드 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 팩터리 메서드
class User {
  constructor(name, level) { this.name = name; this.level = level; }
  summary() { return `${this.name}:${this.level}`; }
}
console.log(new User("Ada", 9).summary());
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

10열거형 상태 표현

JavaScript에서 열거형 상태 표현 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 열거형 상태 표현
class Connection {
  constructor(mode) { this.mode = mode; }
  static local() { return new Connection("local"); }
}
console.log(Connection.local());
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

11불변 데이터 객체

JavaScript에서 불변 데이터 객체 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 불변 데이터 객체
class Logger { log(message) { console.log(message); } }
class Service { constructor(logger) { this.logger = logger; } run() { this.logger.log("start"); } }
new Service(new Logger()).run();
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

12빌더 패턴

JavaScript에서 빌더 패턴 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 빌더 패턴
const profile = Object.freeze({ name: "Ada", tags: ["js"] });
console.log(profile);
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

13다형성

JavaScript에서 다형성 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 다형성
class User {
  constructor(name, level) { this.name = name; this.level = level; }
  summary() { return `${this.name}:${this.level}`; }
}
console.log(new User("Ada", 13).summary());
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

14의존성 주입

JavaScript에서 의존성 주입 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 의존성 주입
class Connection {
  constructor(mode) { this.mode = mode; }
  static local() { return new Connection("local"); }
}
console.log(Connection.local());
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

15값 객체 비교

JavaScript에서 값 객체 비교 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 값 객체 비교
class Logger { log(message) { console.log(message); } }
class Service { constructor(logger) { this.logger = logger; } run() { this.logger.log("start"); } }
new Service(new Logger()).run();
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

16저장소 객체

JavaScript에서 저장소 객체 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 저장소 객체
const profile = Object.freeze({ name: "Ada", tags: ["js"] });
console.log(profile);
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

17서비스 객체

JavaScript에서 서비스 객체 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 서비스 객체
class User {
  constructor(name, level) { this.name = name; this.level = level; }
  summary() { return `${this.name}:${this.level}`; }
}
console.log(new User("Ada", 17).summary());
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

18DTO 매핑

JavaScript에서 DTO 매핑 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// DTO 매핑
class Connection {
  constructor(mode) { this.mode = mode; }
  static local() { return new Connection("local"); }
}
console.log(Connection.local());
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

19변경 불가능 업데이트

JavaScript에서 변경 불가능 업데이트 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 변경 불가능 업데이트
class Logger { log(message) { console.log(message); } }
class Service { constructor(logger) { this.logger = logger; } run() { this.logger.log("start"); } }
new Service(new Logger()).run();
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

20확장 스타일 동작

JavaScript에서 확장 스타일 동작 개념을 코드로 빠르게 확인하는 객체지향 예제입니다.

JavaScript code

// 확장 스타일 동작
const profile = Object.freeze({ name: "Ada", tags: ["js"] });
console.log(profile);
알아두면 좋은 점

객체 예제는 데이터와 동작이 어떻게 묶이는지에 집중하면 이해가 빨라집니다.

자주 하는 실수

객체 하나에 너무 많은 책임을 넣으면 구조가 빠르게 무거워집니다.

정리하며

  • 내부 상태는 _ 관례 대신 # private 필드로 감춰 외부 접근을 실제로 차단합니다
  • 상속은 진짜 하위 타입일 때만 쓰고 기능 재사용은 합성으로 해결합니다
  • 메서드를 콜백으로 넘길 때는 bind나 클래스 필드 화살표 함수로 this를 고정합니다
  • Object.freeze와 스프레드 복사는 얕게 동작하므로 중첩 구조는 단계별로 처리합니다

더 깊이 들어가고 싶다면 JavaScript 학습 라이브러리에서 다른 주제 가이드를 이어서 보거나, 언어 비교에서 같은 개념이 다른 언어에서 어떻게 표현되는지 확인해 보세요.