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

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

---

객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있다. 

그런데 개발을 하다보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다.

복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇다.

 

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

 

 

생성자 함수(constructor function)

---

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

다만 생성자 함수는 아래 두 관례를 따른다.

 

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

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

let user = new User("Jake")

alert(user.name);  //Jake
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("Jake")는 아래 코드를 입력한 것과 동일하게 동작한다.

 

let user = {
	name: "Jake",
    isAmin: fasle
};

 

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

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

 

생성자의 의의는 바로 여기에 있다. 

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

 

잠깐! 모든 함수는 생성자 함수가 될 수 있다는 점을 잊자 말자.

new를 붙여 실행한다면 어떤 함수라도 위에 언급된 알고리즘이 실행된다.

이름 "첫글자가 대문자"인 함수는 new를 붙여 실행해야한다는 점도 공동의 약속이니 잊지말자. (이부분은 좀더 명확히 알아보기) 

 

new function() {...}

재사용할 필요가 없는 복잡한 객체를 만들어야 한다고 해보자.
많은 양의 코드가 필요할 것이다. 이럴땐 아래와 같이 코드를 익명 생성자 함수로 감싸주는 방식을 사용할 수 있다.
아래의 생성자 함수는 익명함수이기 때문에 어디에도 저장되지 않는다.
처음 만들 때부터 단 한번만 호출할 목적으로 만들어졌기 때문에 재사용이 불가능하다.
이렇게 익명 생성자 함수를 이용하면 재사용은 막으면서 코드를 캡슐화 할 수 있다.

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

 

new.target과 생성자 함수

---

**이 절에서 소개할 문법은 자주 쓰이지는 않는다. 자바스크립트의 모든 문법을 학습하고 싶지 않다면 넘어가도 좋다**

 

new.target 프로퍼티를 파용하면 함수가 new와 함께 호출되었는지 아닌지를 확인 할 수 있다.

 

일반적인 방법으로 함수를 호출했다면 new.target은 undefined를 반환한다.

반면 new와 함께 호출한 경우엔 new.target은 함수 자체를 반환해준다.

 

function User() {
	alert(new.target);
}

// "new"없이 호출함
User();  //undefined

// "new"를 붙여 호출함
new User();  // function User { ... }

 

함수 본문에서 new.target을 사용하면 해당 함수가

new와 함께 호출되었는지 ("in constructor mode") 아닌지("inregular mode")를 확인 할 수 있다.

 

이를 활용해 일반적인 방법으로 함수를 호출해도 new를 붙여 호출한 것과 같이 동작하도록 만들어보자.

 

function User(name) {
  if (!new.target) { // new 없이 호출해도
    return new User(name); // new를 붙여줍니다.
  }

  this.name = name;
}

let john = User("John"); // 'new User'를 쓴 것처럼 바꿔줍니다.
alert(john.name); // John

라이브러리를 분석하다보면 위와 같은 방식이 쓰인 걸 발견할 떄가 있을 것이다.

이런 방식을 사용하면 new를 붙여 함수를 호출하든 아니든 코드가 동일하게 동작하기에 좀 더 유연하게 작성할 수 있다.

 

그런데 new를 생략하면 코드가 정확히 무슨 일을 하는지 알기 어렵다.

new가 붙어있으면 새로운 객체를 만든다는 걸 누구나 알 수 있는 반면에 말이다.

이 방법은 정말 필요한 경우에만 사용하고 남발하지 않는다.

 

 

생성자와 return 문

---

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

반환해야할 것들은 모두 this에 저장되고, this는 자동으로 반환하기 때문에 

반환문을 명시적으로 써 줄 필요가 없다.

 

그런데 만약 return문이 있다면 어떤 일이 벌어질까?

아래와 같은 간단한 규칙이 적용된다.

 

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

return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고,

이 외의 경우는 this가 반환된다.

 

아래 예시에서는 첫번째 규칙이 적용되어 return은 this를 무시하고 객체를 반환한다.

 

function BigUser() {
	this.name = "John";
    return {name: "Godzilla"};    // this가 아닌 새로운 객체를 반환함
}

alert( new BigUser().name);   // Godzilla

 

아무것도 return 하지 않는 예시를 살펴보자. 

원시형을 반환하는 경우와 마찬가지로 두번째 규칙이 적용된다.

 

function SmallUser() {

  this.name = "John";

  return; // <-- this를 반환함
}

alert( new SmallUser().name );  // John

return 문이 있는 생성자 함수는 거의 없다.

여기선 튜토리얼의 완성도를 위해 특이 케이스를 소개했다.

 

괄호 생략하기

let user = new User; // <-- 괄호가 없음
// 아래 코드는 위 코드와 똑같이 동작합니다.
let user = new User();

인수가 없는 생성자 함수는 괄호를 생략해 호출할 수 있다.
명세서엔 괄호를 생략하도 된다고 정의되어 있으나, '좋은 스타일'은 아니다.

 

 

생성자 내 메서드

---

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

엄청난 유연성이 확보된다.

 

지금까진 this에 프로퍼티를 더해주는 예시만 봤는데, 메서드를 더해주는 것도 가능하다.

 

아래 예시에서 new User(name)은 프로퍼티 name과 메서드 sayHi를 가진 객체를 만들어 준다.

 

function User(name) {
	this.name = name;
  
	this.sayHi = function() {
    	alert("My name is: " + this.name);
    };
}

let john = new User("John");
john.sayHi();   //My name is: John

/* 
john = {
	name: "John",
    sayHi: function() {...}
}
*/

 

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

class에 대해선 추후 학습하도록 하자. 

 

 

계산기 만들기

중요도: 5

아래와 같은 세 개의 메서드를 가진 생성자 함수, Calculator를 만들어보세요.

• read() – prompt 함수를 이용해 사용자로부터 값 두 개를 받고, 이를 객체 프로퍼티에 저장합니다.
• sum() – 프로퍼티에 저장된 값 두 개를 더한 후 반환합니다.
• mul() – 프로퍼티에 저장된 값 두 개를 곱한 후 반환합니다.

예시:

let calculator = new Calculator(); calculator.read(); alert( "Sum=" + calculator.sum() ); alert( "Mul=" + calculator.mul() );

데모 실행하기

테스트 코드가 담긴 샌드박스를 열어 정답을 작성해보세요.

 

 

//해답

function Calculator() {

  this.read = function() {
    this.a = +prompt('a?', 0);
    this.b = +prompt('b?', 0);
  };

  this.sum = function() {
    return this.a + this.b;
  };

  this.mul = function() {
    return this.a * this.b;
  };
}

let calculator = new Calculator();
calculator.read();

alert( "Sum=" + calculator.sum() );
alert( "Mul=" + calculator.mul() );

 

 

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