개인공부/TIL(Today I Learned)

TIL 35일차_new연산자와 생성자 함수

soon327 2021. 2. 22. 00:29


개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다. (라고한다.)
예를들어 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하는 경우가 그렇다.

이런 경우 유용한 것이 바로 new연산자와 생성자 함수이다.

About 생성자 함수

생성자 함수와 일반함수에 기술적인 차이는 없다. 다만 생성자 함수는 다음 두 관례를 따른다.

  1. 함수 이름은 일반명사로 짓는다.
  2. 함수 이름의 첫 글자는 대문자로 시작한다.
  3. 반드시 new연산자를 붙여 실행한다.
function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;
  this.sayHi = function() {
    alert( "My name is: " + this.name );
  };

  // return this;  (this가 암시적으로 반환됨)
}

let user = new User("Jack")는 아래 코드와 동일하게 동작한다.

let user = {
  name: "Jack",
  isAdmin: false
};

이처럼 생성자의 의의는 재사용할 수 있는 객체 생성 코드를 구현하는 것에 있다.

function Car(make, model, year) {
  this.brand = make;
  this.model = model;
  this.year = year;
}
// this{
//    'brand': make
//    'model': mode;
//    'year': year
// }
// 라는 객체를 생성하는 함수

const car1 = new Car('Eagle', 'Talon TSi', 1993);
//그냥 new없이 할당하면 Car함수는 this (여기서는 undefined)를 리턴하므로 
//undefined가 할당된다.

console.log(car1.brand);
// expected output: "Eagle"

요약

  • 생성자 함수는 일반함수이다.
    다만, 일반 함수와 구분하기 위해 함수이름 첫글자를 대문자로 쓴다.

  • 생성자 함수는 반드시 new연산자와 함께 호출해야 한다.
    new와 함께 호출하면, 내부에서 this가 암시적으로 만들어지고, 마지막에 this가 반환된다.

  • new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다. (객체와 인스턴스에 대해서는 더 공부해보기)

참고: JavaScript.Info

'개인공부 > TIL(Today I Learned)' 카테고리의 다른 글

TIL 37일차_CLASS  (0) 2021.02.24
TIL 36일차_Github  (0) 2021.02.23
TIL 34일차_화살표함수  (0) 2021.02.21
TIL 33일차_CSS애니메이션  (0) 2021.02.20
TIL 32일차_데이터속성  (0) 2021.02.19