Javascript& React study

[JAVASCRIPT-모던자바스크립트] new 연산자와 생성자 함수2

이빙고 2021. 10. 23. 05:47
728x90
반응형
SMALL
new function() {...}
재사용할 필요가 없는 복잡한 객체를 만들어야 한다고 했을때 많은 양의 코드가 필요할 것이다. 이럴때에는 익명 생성자 함수로 감싸주는 방식을 사용할 수 있다.
let user = new function() {
    this.name = "John";
    this.isAdmin = false;
    // 사용자 객체를 만들기 위한 여러 코드
    // 지역 변수, 복잡한 로직, 구문등
    // 다양한 코드가 들어가게 된다.
}
  • 생성자 함수의 경우 익명함수이기 때문에 어디에서도 저장이 되지 않는다. 
  • 처음 만들 때 단 한번만 호출될 목적으로 만들었기 때문에 재사용이 불가능하다.
  • 익명 생성자 함수를 이용하게 되면 재사용을 막으면서 코드를 캡슐화할 수 있다.

생성자와 return문

생성자 함수에는 보통 return문이 없다. 반환해야 할 것들은 this에 저장이 되며 this는 자동으로 반환이 되기 때문에 반환문을 명시적으로 쓸 수 없다.

만약 return문이 있을 경우 아래와 같은 규칙이 적용된다.

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

return 뒤에 객체가 오게 된다면 생성자 함수의 경우 해당 객체를 반환해주며 이 외의 경우 this를 반환한다.

function BigUser() {
    this.name = "원숭이";
    
    return {name : "고릴라"}; // this가 아닌 새로운 객체를 반환
}

alert( new BigUser().name); // 고릴라.

아무것도 하지 않은 return문을 살펴보면 원시형을 반환하는 경우와 마찬가지로 두 번째 규칙이 적용된다.

function SmallUser() {
    this.name = "원숭이";
    
    return; // this를 반환함
}

alert( new SmallUser().name ); // 원숭이

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( "제 이름은" + this.name + "입니다.");
    };
}

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

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

/* 

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

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

728x90
반응형
LIST