[자바스크립트 / Vanilla JS] new 연산자와 생성자 함수

생성자 함수란?

 

생성자 함수를 한 문장의 팩트로 표현하자면 "객체를 생성하는 역할을 하는 함수"이다.

더 설명할 말이 없다

생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다. 

 

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

만약 return 문이 있다면 아래와 같은 간단한 규칙이 적용된다.

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

return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고, 이 외의 경우는 this가 반환된다

 

생성자 함수의 특징

생성자 함수의 특징은 다음과 같이 나열 할 수 있다.

1. 일반 함수와 구분 하기위해서 함수 이름의 첫 글자는 대문자로 시작한다.
2. 반드시 'new' 연산자를 붙혀서 함수를 실행한다
3. 생성자 함수 는 new 키워드를 사용하지 않으면 일반적인 함수와 동일하게 동작하여 새로운 객체를 반환하지 않는다.

---

예시

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("지우");

alert(user.name); // 지우
alert(user.isAdmin); // false

new User(...)를 써서 함수를 실행하면 아래와 같은 순서로 동작한다.

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

예시를 이용해 new User(...)가 실행되면 무슨 일이 일어나는지 살펴 보도록 하겠다.

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

이제 let user = new User("지우")는 아래 코드를 입력한 것과 동일하게 동작합니다.

let user = {
  name: "지우",
  isAdmin: false
};

new User("지우")이외에도 new User("지웅"), new User("지운") 등을 이용하면 손쉽게 사용자 객체를 만들 수 있다.

객체 리터럴 문법으로 일일이 객체를 만드는 방법보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있다.

생성자의 핵심은 "재사용할 수 있는 객체 생성 코드를 구현"하는 것이다.

 

** 모든 함수는 생성자 함수가 될 수 있고, new를 붙여 실행한다면 어떤 함수라도 위에 언급된 순서가 실행된다.

이름의 '첫 글자가 대문자’인 함수는 new를 붙여 실행해야 한다는 점도 잊지 않아야 한다.

 

---

생성자 함수 생성,추가,수정,삭제 참고 URL : https://dasima.xyz/javascript-constructor-function-object/

자바스크립트 생성자 함수로 객체 생성, 출력, 추가, 삭제 - dasima

 

출처 : https://ko.javascript.info/constructor-new

https://velog.io/@cyongchoi/%EC%83%9D%EC%84%B1%EC%9E%90-%ED%95%A8%EC%88%98-constructor-function