자바스크립트 객체선언, 생성자함수, class 문법

1. 객체선언

const cafe = {
    brand: "이디아",
    menu: "",
    setMenu: function(menu) {
        this.menu = menu;
    }
}

이건 "객체(Object)" 선언입니다.

• cafe라는 하나의 고정된 객체를 만든 거예요.
• brand, menu라는 속성(property) 과 setMenu라는 메서드(method) 가 들어 있어요.
• 이 cafe 객체는 그냥 한 번 만들어서 쓰는 고정된 값입니다.
• 만약 다른 카페(스타벅스, 커피빈 등)를 또 만들고 싶으면 하나하나 또 새로 객체를 만들어야 해요.

요약:
"이디아" 하나를 위해 딱 만들어진 '단일 객체'.

 

 

 

2. 생성자함수

function Cafe(menu) {
    this.menu = menu;
    
    this.setMenu = function(newMenu) {
        this.menu = newMenu;
    };

    this.showMenu = function() {
        console.log(`현재 메뉴는 ${this.menu}입니다.`);
    };
}

// 사용 예시
const cafe1 = new Cafe('아메리카노');
cafe1.showMenu();   // 현재 메뉴는 아메리카노입니다.

cafe1.setMenu('카페라떼');
cafe1.showMenu();   // 현재 메뉴는 카페라떼입니다.

 

이건 "생성자 함수(Constructor Function)" 입니다.

• cafe는 새로운 객체를 찍어내기 위한 틀(템플릿) 입니다.
• new 키워드를 사용하면 새로운 객체를 계속 만들 수 있어요.

한눈에 비교

첫 번째 코드 (객체 리터럴)두 번째 코드 (생성자 함수)

목적	하나의 고정된 객체 생성	여러 객체를 찍어내기 위한 설계도
사용법	바로 cafe를 사용	new cafe()로 객체를 생성
유연성	제한적 (새로 만들려면 직접 다시 작성)	자유롭게 여러 개 생성 가능
this 의미	해당 객체 자체 (cafe)	새로 생성되는 인스턴스 자신

 

여기서 잠깐! ✋

이 생성자함수에 메서드를 추가하는 방식은 생성자함수  동작은 하지만, 단점이 하나 있습니다.

cafe1, cafe2, cafe3 이런 객체를 만들 때마다
setMenu랑 showMenu 함수를 매번 새로 복사해서 넣기 때문에
메모리를 낭비해요.

그래서 "prototype" 을 이용해서 공통 함수를 만들어주는 게
'프로 개발자'들의 기본 패턴입니다.

 

더 좋은 방법 (prototype 사용)

function Cafe(menu) {
    this.menu = menu;
}

// 공통 메서드는 prototype에 추가!
Cafe.prototype.setMenu = function(newMenu) {
    this.menu = newMenu;
};

Cafe.prototype.showMenu = function() {
    console.log(`현재 메뉴는 ${this.menu}입니다.`);
};

// 사용 예시
const cafe1 = new Cafe('아메리카노');
const cafe2 = new Cafe('콜드브루');

cafe1.showMenu();   // 현재 메뉴는 아메리카노입니다.
cafe2.showMenu();   // 현재 메뉴는 콜드브루입니다.

cafe1.setMenu('카페모카');
cafe1.showMenu();   // 현재 메뉴는 카페모카입니다.

 

이 방법은
모든 Cafe 객체들이 setMenu, showMenu 함수를 메모리 한 군데만 공유해서 훨씬 효율적입니다.

정리

구분생성자 함수 안에 바로 정의prototype에 정의

메모리 사용량	객체마다 복사해서 많음	메서드 1개만 공유해서 적음
속도	상대적으로 느림	상대적으로 빠름
추천	간단한 경우	프로젝트 규모가 커질 때 필수

 

생성자 함수에서 this를 꼭 써야 하는 이유

1. 생성자 함수는 새로운 객체를 만들어내는 "공장"입니다.

• new 키워드를 쓰면 자동으로 새로운 객체가 생성됩니다.
• 그리고 **그 새 객체를 가리키는 것이 바로 this**입니다.

2. 그래서 생성자 함수 안에서는

• 멤버 변수(속성) 를 만들 때 ➔ this.변수명
• 멤버 함수(메서드) 를 만들 때 ➔ this.함수명 을 꼭 써야 "그 새 객체"에 값을 저장하거나 메서드를 연결할 수 있어요.

 

 

 

 

 

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`안녕하세요, 저는 ${this.name}이고, 나이는 ${this.age}살입니다.`);
  }

  haveBirthday() {
    this.age += 1;
    console.log(`${this.name}의 생일입니다! 이제 ${this.age}살이 되었어요.`);
  }
}

 

 

// 인스턴스 생성
const person1 = new Person('홍길동', 25);

// 메서드 호출
person1.greet();          // 출력: 안녕하세요, 저는 홍길동이고, 나이는 25살입니다.
person1.haveBirthday();   // 출력: 홍길동의 생일입니다! 이제 26살이 되었어요.
person1.greet();          // 출력: 안녕하세요, 저는 홍길동이고, 나이는 26살입니다.

 

차이점 요약

구분class 문법function 생성자 방식

선언 방식	class 키워드 사용	function 키워드 사용
메서드 정의	클래스 내부에 메서드 정의	프로토타입에 메서드 추가
내부 동작	[[IsClassConstructor]]: true 등 내부 차이	일반 함수로 동작
엄격 모드	항상 엄격 모드	별도 설정 필요
상속	extends로 간단하게 구현	프로토타입 체인 직접 연결 필요

 

• class는 더 명확하고 객체지향적인 문법을 제공하며, 내부적으로도 함수와는 구분되는 특성을 가집니다134.
• 생성자 함수 방식은 여전히 동작하지만, 최신 코드에서는 class 사용이 권장됩니다.

결론

function 키워드로도 클래스와 비슷한 구조를 만들 수 있지만, 엄밀히 말해 "클래스"는 아니며, 내부적으로 동작 방식에 차이가 있습니다. 최신 자바스크립트에서는 class 문법을 사용하는 것이 더 직관적이고 안전합니다134.