4.5 'new' 연산자와 생성자 함수

📢 "new" 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. 

생성자 함수(constructor function)

재사용할 수 있는 객체 생성 코드를 구현한다.

📢 생성자 함수

◾️ 함수 이름의 첫 글자는 대문자로 시작한다.  

◾️ 반드시 'new' 연산자를 붙여 실행한다. 

 

◾️ new User() 함수의 실행 알고리즘

   1. 빈 객체를 만들어 this에 할당한다.

   2. 함수 본문을 실행한다.  this에 새로운 프로퍼티를 추가해 this를 수정한다.

   3. this를 반환한다. 

function User (name) {
  // 1. this = {};

  // 2. 새로운 프로퍼티를 this에 추가
  this.name = name;
  this.isAdmin = false;
  
  // 3. return this; 
}

let user = new User('suzu');

console.log(user.name); // suzu

◾️ 모든 함수는 생성자 함수가 될 수 있다. 

 

 

new function () {}

◾️ 재사용할 필요가 없는 복잡한 객체를 만들어야 할 때.

◾️ 코드를 익명 생성자 함수로 감싸준다. 

◾️ 익명 함수이기 때문에 어디에도 저장되지 않는다. 

◾️ 처음 만들 때부터 단 한번만 호출할 목적으로 만들었기 때문에 재사용이 불가하다. 

◾️ 익명 생성자 함수를 이용하면 재사용은 막으면서 코드를 캡슐화 할 수 있다. 

let user = new function() {
  this.name = 'suzu';
  this.isAdmin = false;
  
  // 복잡한 로직
}

 

new.target과 생성자 함수

* 자주 쓰이는 문법은 아님

 

◾️ new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 알 수 있다. 

◾️ 일반적인 방법으로 호출(in regular mode) : undefined

◾️ new와 함께 호출(in constructor mode) : new.target 함수 자체를 반환

function User() {
  console.log(new.target);
}

User(); // undefined
new User(); // function User () {...}

 

◾️ 일반적인 방법으로 함수를 호출해도 new를 붙여 호출한 것과 같이 동작하게 하는 법

◾️ 유연하게 코드를 작성할 수 있지만 정말 필요한 경우에만 사용하는 것이 좋다. 

function User(name){
  if (!new.target){ // new 없이 호출해도
    return new User(name); // new를 붙여서 반환
  }
  
  this.name = name;
}

let suzu = User('suzu');
console.log(suzu.name); // suzu

 

생성자와 return문

◾️ 생성자 함수엔 보통 return문이 없다. 

◾️ 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 명시적으로 써 줄 필요가 없다. 

◾️ return문이 있을 경우

    ◾️ 객체를 return  →  this 대신 객체를 반환

function User() {
  this.name = "suzu";
  
  return { name: 'ruru' }; // this가 아닌 객체를 반환
}

console.log(new User().name); // ruru

    ◾️ 원시형을 return  →  return문이 무시된다. 

function User() {
  this.name = "suzu";
  
  return; // this를 반환한다. 
}

console.log(new User().name); // suzu

 

 

괄호 생략하기

◾️ 인수가 없는 생성자 함수는 괄호를 생략해 호출할 수 있다. 

◾️ 그래도 괄호를 표시하는 것이 더 낫다. 

let user = new User();
let user = new User;

 

생성자 내 메서드

◾️ 생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다. 

◾️ new User(name)은 프로퍼티 name과 메서드 sayHi를 가진 객체를 만들어 준다. 

function User(name) {
  this.name = name;
  
  this.sayHi = function() {
    console.log('My name is: ' + this.name);
  };
}

let suzu = new User('suzu');
suzu.sayHi(); // My name is suzu

 

 

📝 요약

◽️ 생성자함수(생성자) : 일반 함수이지만 일반 함수와 구분하기 위해 함수 이름 첫 글자를 대문자로 쓴다. 
◽️ 반드시 new연산자와 함께 호출해야한다. 
◽️ new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환된다. 
◽️ 유사한 객체를 여러 개 만들 때 생성자 함수가 유용하다.  
◽️ 자바스크립트에선 다양한 생성자 함수를 제공한다. (Date, Set ...)

 

아직 배울 게 많습니다!    ... 네.. 

 

---

📝 오늘 새롭게 배운 내용 📝

 

✅ 생성자 함수는 유사한 객체를 여러 개 만들 때 유용하다!!!

client에서 보내온 user의 정보들을 저장할 때 사용했었다. 

const user = new User(req.body);

 

✅ 생성자 함수안에는 보이지 않지만 열일하는 this가 존재한다. 

✅ 아직 배울게 많다...

 

 

 

📌 [JAVASCRIPT_INFO 'new'연산자와 생성자 함수]

'new' 연산자와 생성자 함수

 

📌 [MDN new Operator]

new operator