JavaScript | new operator , constructor function

new 연산자

new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성

 

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car('Eagle', 'Talon TSi', 1993);

console.log(car1.make);
// Expected output: "Eagle"

 

 

사용자 정의 객체 생성에는 두 단계가 필요

1. 함수를 작성하여 객체 타입 정의

2. new 연산자로 객체의 인스턴스 생성

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new

new operator - JavaScript | MDN

 

 

 

생성자 함수 (constructor function)

일반 함수에 기술적인 차이는 없다. 다만 생성자 함수는 2가지특성이 있다

1. 함수 이름의 첫글자는 대문자

2. 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를 붙여 실행한다면 어떤 함수라도 위에 언급된 알고리즘이 실행

이름의 첫글자가 대문자인 함수는 new 를 붙여 실행해야한다.

 

 

재사용할 필요가 없는 복잡한 객체를 만든다고 가정

많은 양의 코드가 필요할 때 코드를 익명 생성자 함수로 감싸주는 방식을 사용

let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 여기에 들어갑니다.
};

위의 생성자 함수는 익명이기 때문에 어디에도 저장되지 않는다.

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

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

 

 

생성자 내 메서드

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

this에 프로퍼티를 더해주고, 메서드 또한 더해줄 수 있다.

function User(name) {
  this.name = name;

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

let bora = new User("이보라");

bora.sayHi(); // 제 이름은 이보라입니다.

/*
bora = {
   name: "이보라",
   sayHi: function() { ... }
}
*/

 

class 문법 사용시 생성자 함수를 사용하는 것과 마찬가지로 복잡한 객체를 만들 수 있다.

 

**요약

 - 생성자 함수는 일반함수이다. 다만 일반 함수와 구분하기 위해 함수이름 첫 글자를 대문자로 쓴다.

 - 생성자 함수는 반드시 new 연산자와 함께 호출. new 와 함께 호출하면 내부에서 this가 암시적으로 만들어지고 마지막엔 this가 반환

 - 생성자 함수는 유사한 객체를 여러 개 만들 때 유용