객체 : new 연산자와 생성자 함수

모던 JavaScript 튜토리얼 내용 일부를 정리 요약한 내용입니다. 더 자세한 설명은 원문 링크를 참고하시고, 원문 하단 과제를 꼭 풀어보세요.

유사한 객체를 여러 개 만들어야 할 때 new 연산자와 생성자 함수를 사용합니다. (복수 사용자, 메뉴 내 다양한 아이템을 객체로 표현할 경우) 생성자 함수는 함수 이름의 첫 글자를 대문자로 시작하고 반드시 new 연산자를 붙여 실행합니다.

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

let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false

new User(..) 를 사용하면 빈 객체를 만들어 this에 할당하고 함수 본문을 실행해 this에 새로운 프로퍼티를 추가해 this를 수정합니다. 그리고 this를 반환합니다.

function User(name) {
    // this = {} - 빈 객체 암시적 생성

    // 새로운 프로퍼티 this에 추가
    this.name = name;
    this.isAdmin = false;

    // return this; - 암시적 반환
}

이렇게 new User(...) 의 ... 안에 넣는 요소에 따라 사용자 객체를 만들 수 있습니다. 객체 리터럴 문법으로 일일이 객체를 만드는 방법보다 훨씬 간단하고 읽기 쉽게 객체를 생성합니다. 생성자의 의의는 이렇게 재사용할 수 있는 객체 생성 코드를 구현하는 것입니다. 위 규칙만 지킨다면 모든 함수는 다 생성자 함수가 될 수 있습니다.

재사용할 필요가 없는 복잡한 객체를 만든다면, 아래처럼 익명 생성자 함수로 감싸주는 방법도 있습니다. 익명 함수이므로 어디에도 저장되지 않고 처음 만들 때부터 단 한 번만 호출합니다.

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

new.target 프로퍼티를 사용하면 함수가 new 와 함께 호출되었는지 알 수 있습니다. 일반적으로 new.target 은 undefined를 반환하고, new 를 붙여 호출하면 new.target 함수 자체를 반환합니다.

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

User(); // undefined

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

new 없이 호출해도 new를 붙여 호출한 것처럼 하려면 아래처럼 수정할 수 있습니다.

function User(name) {
    if (!new.target) {
        return new User(name);
    }
    this.name = name;
}

이렇게 하면 new 를 붙여 함수를 호출하든 아니든 코드가 동일하게 동작하므로 좀 더 유연하게 코드를 작성할 수 있습니다. 다만 new 가 붙으면 새로운 객체를 생성한다는 명시성이 있으므로 꼭 필요한 경우 new 를 생략하는 것이 좋습니다.

인수가 없는 생성자 함수는 괄호를 생략해 호출할 수 있지만 권장하지 않습니다.

let user = new User;

let user = new User();

생성자 함수를 사용하면 매개변수를 사용해 메서드도 더해줄 수 있습니다. 아래 예시에서 new User(name) 은 프로퍼티 name 과 메서드 sayHi 를 가진 객체를 만듭니다.

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

let bora = new User("이보라");
bora.sayHi(); // 제 이름은 이보라입니다.