개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다. (라고한다.)
예를들어 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하는 경우가 그렇다.
이런 경우 유용한 것이 바로 new연산자와 생성자 함수이다.
About 생성자 함수
생성자 함수와 일반함수에 기술적인 차이는 없다. 다만 생성자 함수는 다음 두 관례를 따른다.
- 함수 이름은 일반명사로 짓는다.
- 함수 이름의 첫 글자는 대문자로 시작한다.
- 반드시
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 |