[JS] new 연산자와 생성자 함수

• 생성자의 의의는 재사용할 수 있는 객체 생성 코드를 구현하는 것이다.
• 모든 함수는 생성자 함수가 될 수 있다.

1. 생성자 함수 Constructor function

1. 함수 이름의 첫 글자는 대문자로 시작한다.
2. 반드시 new 연산자를 붙여서 실행한다.

new 연산자로 함수 실행 시 동작 알고리즘

1. 빈 객체를 만들어 this에 할당한다.
2. 함수 본문을 실행 후 this에 새로운 프로퍼티를 추가해 this를 수정한다.
3. this를 반환한다.

new User(…) 실행 예제

function User(name) {
	// this = {}; (빈 객체가 암시적으로 만들어짐)
	// 새로운 프로퍼티를 this에 추가함
	this.name = name;
	this.isAdmin = false;
	// return this; (this가 암시적으로 반환됨)
}

---

2. new function() {} 익명 생성자 함수 - 재사용X

재사용할 필요가 없는 복잡한 객체는 익명 생성자 함수를 사용하여 💊 코드를 캡슐화할 수 있음.

let user = new function() {
	this.name = 'John';
	this.isAdmin = false;
	// 사용자 객체를 만들기 위한 여러 코드
	// 지역 변수, 복잡한 로직, 구문 등의
	// 다양한 코드가 여기에 들어갑니다.
};

---

3. 생성자와 return문

생성자 함수엔 보통 return문이 없다.
반환해야 할 것들은 모두 this에 저장되고 this 는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다.

return문이 있을 경우 적용되는 규칙

• 객체를 return한다면 this 대신 객체가 반환된다.
• 원시형을 return한다면 return문은 무시된다.

💡 [JS] 원시값(원시자료형)이란?

• 객체가 아니면서 메서드도 가지지 않는 데이터이다.
• 종류(7) : string, number (en-US), bigint (en-US), boolean, undefined, symbol, null

객체 return 예제

function BigUser() {
	this.name = '원숭이';
	return { name: '고릴라' }; // this가 아닌 새로운 객체를 반환함
}
alert( new BigUser().name ); // 고릴라

원시형 return 예제

function  SmallUser() {
	this.name = '원숭이';
	return; // this를 반환함
}
alert ( new SmallUser().name); // 원숭이

---

4. 생성자 내 메서드

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있고 유연성이 확보된다.

function User(name) {
	this.name = name;
	
	this.sayHi = function() {
		alert( '제 이름은 ' + this.name + '입니다.' );
	};
}

let sy = new User('오선영');
sy.sayHi(); // 제 이름은 오선영입니다.

---

참고자료

• new 연산자와 생성자 함수
• 원시 값 - 용어 사전 | MDN