[JAVASCRIPT-모던자바스크립트] 메서드와 this 3 / new 연산자와 생성자 함수

this가 없는 화살표 함수

화살표 함수는 일반 함수와는 달리 '고유한'  this를 가지지 않습니다. 화살표 함수에서 this를 참조하면 화살표 함수가 아닌 '평범한'외부 함수에서 this 값을 가져옵니다.

아래 예시에서 함수 arrow()의 this는 외부 함수 user.sayHi()의 this가 됩니다.

let user = {
    firstName : '보라',
    sayHi() {
    	let arrow = () => alert(this.firstName);
    	arrow();
    }
};

user.sayHi(); // 보라

별개의 this가 만들어지는 것은 원하지 않으면서 외부 컨택스트에 있는 this를 이용하고 싶은 경우에는 화살표 함수가 유용한다.

---

new 연산자와 생성자 함수

객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있다. 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기고는 한다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇다.

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

생성자 함수

생성자 함수 (constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따른다.

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를 반환한다.

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를 붙여서 실행해야 한다는 점도 잊지 말아야 한다.