javascript basics #5 생성자, 연산자 new

javascript basics #5 생성자, 연산자 new

https://javascript.info/ 를 참조하여 작성된 글입니다.

비슷한 오브젝트들을 많이 만들 필요가 있을 때, 생성자 함수인 "new" 연산자를 사용할 수 있다.

생성자 함수

기술적으로는 일반 함수이지만, 두가지정도 제약사항이 있다.

1. 대문자로 시작하며
2. "new" 연산자에 의해 실행되어야 한다.

function Person(name) {
  this.name = name;
  this.isGenius = false;
}

let person = new Person("Jake");

alert(user.name);
alert(user.isGenius);

위 함수가 new 키워드와 함께 실행될 때, 다음과 같은 과정을 거친다.

1. 새로운 빈 오브젝트가 만들어지고 this에 할당된다.
2. 함수의 바디가 실행되고, this에 새로운 프로퍼티를 추가한다.
3. this의 값이 반환된다.

코드로 표현하자면 다음과 같은 일이 일어난다.

function Person(name) {
  // this = {}; (암묵적으로)
  
  this.name = name;
  this.isGenius = false;
  
  // return this; (암묵적으로)
}

그래서 let person = new Person("Jake")는 다음 코드의 결과와 같다.

let person = {
  name: "Jake",
  isGenius: false
}

만일 다른 Person을 추가하고 싶다면 new Person("Other's Name") 과 같이 추가할 수 있다. 이러한 방법은 매번 리터럴을 사용하는 것보다는 훨씬 쓰기도 쉽고 읽기도 쉽다.

한가지 알아둬야 할 것은 어떤 함수든 new 키워드와 함께 쓰일 수 있으니 "맨 앞글자가 대문자"와 같은 컨벤션을 확실하게 해두는 편이 좋다는 것이다.

생성자 함수 즉시 할당하여 활용하기

하나의 오브젝트를 만들기 위해서 많은 줄의 코드가 필요할 때, 다음과 같이 생성자 함수 내부에 묶을 수 있다.

let user = new function() {
  this.name = "Jake";
  this.isGenius = false;
}

위의 생성자는 어디에도 저장되지 않기 때문에 다시 호출될 수 없다. 그래서 이 방법은 하나의 오브젝트를 다시 사용하지 않을 때 캡슐화하는 것을 목표로 한다.

생성 모드 테스트: new.target

이 문법은 거의 쓰이지 않으니 그냥 넘어가도 무관하다.

함수 내부에서, new 키워드로 호출되었는지 아닌지를 확인하기 위해 new.target 프로퍼티를 활용할 수 있다.

일반적인 함수는 new.target의 결과가 비어있지만, new로 호출한 경우에는 함수 자체가 나온다.

이를테면 위와 같다.

new.target은 아래와 같이 활용할 수 있다.

라이브러리 같은 곳에서 코드를 더욱 유연하게 만들기 위해 사용하기도 한다. 라이브러리 사용자가 실수로 new 키워드를 빼먹더라도 오브젝트가 잘 생성될 것이다.

생성자에서의 'return'

일반적으로 생성자는 return 키워드를 잘 사용하지 않는다. this에 할 일들을 하고 this가 반환된다.

만일, return 키워드가 사용된다면 규칙은 다음과 같다.

• 오브젝트가 return 된다면, this 대신에 오브젝트가 반환된다.
• 그냥 primitive가 return 된다면, 무시된다.

위와 같은 두가지 생성자 함수가 있을 때,

결과는 아래와 같다.

오브젝트를 반환하던 생성자 함수는 new 연산자를 사용해도 기존에 작성해둔 오브젝트가 반환되고, primitive를 반환하던 생성자 함수는 new 연산자를 사용하니, this를 잘 반환했다.

new 키워드 생성자 함수의 괄호 생략

생성자 함수에서 괄호를 생략하면, 아규먼트로 아무것도 입력하지 않은 것과 동일한 결과가 나온다.

생성자 함수에서의 메소드

생성자 함수에서 this 키워드는 프로퍼티 뿐만 아니라 메소드에도 사용할 수 있다.

일례로 아래의 소스코드는 name 프로퍼티와 whoAmI 메소드를 모두 갖고 있는 오브젝트를 만든다.

function Person(name) {
  this.name = name;
  
  this.whoAmI = function() {
    console.log(`my name is ${this.name}`);
  }
}

위와 같이 호출이 가능하다. 이것보다 더욱 업그레이드된 class라는 문법이 있는데, 나중에 다뤄보도록 할 것이다.

요약

• 생성자 함수는 일반적인 함수들이다. 하지만 첫 시작하는 문자가 대문자로 이뤄져야 한다는 컨벤션이 있다.
• 생성자 함수는 항상 new라는 키워드와 함께 호출되어야 한다. new 키워드는 비어있던 this에 프로퍼티와 메서드를 넣고 반환하겠다는 의미를 내포한다.