22. new 연산자와 생성자

Chipmunk_jeong·2021년 2월 28일
0

TIL

목록 보기
22/62
post-thumbnail

객체의 리터럴은 {...}이다.
하지만 비슷한 객체의 틀을가진 여러가지 객체를 만들고 싶을 때가 있다.
게임 캐릭터, 다양한 연필 등등
이럴 경우 new 연산자와 생성자 함수를 사용하면 유사한 객체를 쉽게 생성할 수 있다.

생성자 함수

생성자(constructor)와 일반 함수는 차이가 없다.
생성자는 두가지의 조건을 따른다.

  • 첫글자는 대문자로 시작한다.
  • new연산자를 사용한다.
function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("quakka");

console.log(user.name); // 'quakka'
console.log(user.isAdmin); // false

위의 코드를 본다면 new의 키워드와 User라는 생성자 함수를 이용하여 객체를 만들었다.

  1. 빈 객체를 만들어 this가 빈 유저를 가르킨다.
  2. 해당 함수를 실행하여 this의 프로퍼티들을 생성한다.
  3. this(객체)를 반환한다.

위의 세가지가 위의 new User(...)의 알고리즘이다.

function User(name) {
  // this = {} -> 빈 객체가 만들어짐
 
  // 새로운 프로퍼티 추가
  this.name = name;
  this.isAdmin = false;
 
  // return this -> 객체가 반환이 됨
}

위와 같이 생성자 함수를 정의 한다면 언제든 User객체를 쉽게 만들수 있게 된다. 리터럴 문법으로 하나하나 값을 주는 것 보다 훨씬 간단하게 만들 수 있게 된것이다.
생성자는 재사용할 수 있는 객체 생성 코드를 구현한 것
다만... 생성자함수는 우리끼리 명시적으로 첫글자를 대문자로 하고 new키워드를 사용한다고 하지만 모든 함수는 생성자 함수가 될 수 있다. 함수 앞에 new 연산자를 작성하면 위와같은 알고리즘이 진행이 된다.

재사용할 필요가 없는 객체를 만들때에는 익명 함수를 사영하면 된다.

let user = new function() {
  this.name = 'guest';
  this.isAdmin = false;
  ...
  ...
};

이렇게 익명 함수를 사용하게 되면 함수가 어디에도 저장되지 않기 때문에 한번만 사용할 수 있다는 점과 리터럴과 다르게 코드를 캡슐화 할 수 있다.

생성자와 return문

생성자 함수에는 명시적인 return문이 보통 없다.
반환되는 것은 this에 저장되고, 자동으로 this는 반환되기 때문이다.
만약에 직접 return문을 사용할 경우에는 아래와 같은 상황이 발생한다.

  • 객체를 return한다면, this대신 객체가 반환된다.
  • 원시형 타입을 return한다면, 이것은 무시되고 this를 반환한다.
매개변수가 없는 생성자 함수는 괄호를 생략할 수 있다.
let user = new User;
profile
Web Developer

0개의 댓글