생성자 함수란? 🧐

정의 📋

• 이름 그대로 객체(인스턴스)를 생성하는 함수

특징 🙌

• 일반 함수와 동일한 방법으로 생성자 함수를 정의
• new 연산자와 함께 호출해야만 생성자 함수로 동작
• new 연산자 없이 호출하게 될 경우, 일반 함수로 동작
• new 연산자와 함께 생성자 함수를 호출하면 자바스크립트 엔진은 암묵적으로 인스턴스를 생성하고 인스턴스를 초기화한 뒤, 암묵적으로 인스턴스를 반환함
• 명시적으로 this가 아닌, 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손 → 생성자 함수 내부에서 return문은 반드시 생략

문법 🔏

function Person(name, age) {
	this.name = name;
	this.age = age;

	this.sayHello = () => {
		return `Hello, ${this.name}`;
	};
}

const surim = new Person('surim', 100);
console.log(surim);
// Person { name: 'surim', age: 100, sayHello: [λ] }
console.log(surim.sayHello());
// Hello, surim

클래스란? 🧐

정의 📋

• 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕
• 새로운 객체 생성 메커니즘

특징 🙌

• 클래스는 함수이다.
• 클래스와 생성자 함수 모두 프로토타입 기반의 인스턴스를 생성함 (동일하게 동작하지는 않음)
• 클래스는 생성자 함수보다 엄격하다.
• 생성자 함수에서는 제공하지 않는 기능이 제공됨

문법 🔏

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

	sayHello() {
		return `Hello, ${this.name}`;
	}
}

const surim = new Person('surim', 100);
console.log(surim);
// Person { name: 'surim', age: 100, sayHello: [λ] }
console.log(surim.sayHello());
// Hello, surim

생성자 함수 vs 클래스 ⚖️

생성자 함수

• new 연산자 없이 호출하면 일반 함수로서 호출되기 때문에 별도 처리 필요
• 생성자 함수는 extends, super 키워드 미제공
• 함수 선언문으로 정의된 생성자 함수는 함수 자체가 호이스팅이 됨
• 함수 표현식으로 정의된 생성자 함수는 변수 호이스팅이 발생
• 암묵적으로 strict mode가 지정되지 않음

클래스

• new연산자 없이 호출하면 에러 발생
• 상속을 지원하는 extends, super 키워드 제공
• 호이스팅이 발생하지 않는 것처럼 동작
• 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode 해제 불가
• 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료함

생성자 함수 && 클래스 ⚖️

• 프로토타입 기반의 객체지향을 구현
• 컨벤션으로 파스칼 케이스를 사용 (사용하지 않아도 에러가 발생하지는 않음)
• 인스턴스를 생성할 수 있는 함수

---

위의 내용은 생성자 함수와 클래스를 공부하며 개인적으로 정리한 내용입니다.

출처 📝

• 도서 - 모던 JavaScript Deep Dive