JavaScript(JS) - 생성자

조성주·2023년 3월 1일
1

JavaScript

목록 보기
10/21
post-thumbnail

✅ 생성자

  • 유사한 객체를 다중으로 만들 때 사용되는 함수이다. (타 언어에서의 class 개념과 유사)
  • 객체를 생성하는 함수이다.
  • 일반적으로 생성자 함수의 첫 글자는 대문자로 시작한다.
  • 생성자 함수로 객체 생성 시 new 연산자를 통해 객체를 생성한다.
  • this 키워드를 이용한다.
변수타입 변수명 = new 생성자 함수()

생성자 함수 예제

1. 생성자 함수와 new 연산자를 통해 빠른 객체 생성

function FishBread(flavor, price) {
   this.flavor = flavor;
   this.price = price;
   this.base = "flour";
 }

 let bread_1 = new FishBread("cream", 1200);

 console.log(bread_1);
 console.log(bread_1.flavor);

2. new.target

  • new target 속성(property)을 사용하여 new와 함께 호출했는지 확인 가능하다.
function User(name) {
	console.log(new.target);
    this.name = name;
}

let result_1 = User("john");
console.log(result_1); // output : undefined, undefined

let result_2 = new User("john");
console.log(result_2) // output : [Function: User], User { name : 'john' }

위에 코드에서 result_1은 new 연산자를 통해 만들지 않았다. 따라서 new.target으로 확인했을 때 User함수로 result_1을 생성했지만 new 연산자를 사용하지 않았기 때문에 undefined가 출력이 되고 두번째 로그도 result_1은 undefined가 된다.

result_2는 new 연산자로 User라는 함수를 통해 객체를 생성하였기 때문에 첫번째 log에 [Function : User] 로 출력이 되고 두번째 log에는 result_2에 객체가 출력이 되는 것을 확인할 수 있다.

이처럼 new.target은 new 연산자를 사용하여 객체를 생성했을 때 어떤 함수를 사용했는지 즉, 타겟이 누군지를 출력하는 것이다.

new 생성자를 사용하지 않았지만 재귀함수를 사용하여 new 연산자로 다시 만들게 하는 방법은 아래와 같다.

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

 let result_1 = User("john");
 console.log(result_1);
 let result_2 = new User("john");
 console.log(result_2);

3. 생성자 사용 이유

1) 번거로움 해결

  • 어떠한 구조를 정해서 사용하는 것이기 때문에 편리하다.

2) 생성자 하나로 여러 객체 생성 가능

  • 메모리를 효율적으로 사용 가능하다.
var info1 = {name : "홍길원", age : 30}
var info2 = {name : "홍길원", age : 30}
var info3 = {name : "홍길원", age : 30}

위에 코드는 객체를 생성하는 코드이다. 객체를 3개를 생성한다고 했을 때 객체의 property가 name과 age가 반복적으로 사용을 하고 있다. 이렇게 할 경우 지금은 3개만 사용해서 상관없지만 더 많은 객체를 생성한다고 가정하면 굉장히 번거롭다 따라서, 생성자 함수를 사용하여 편리하게 사용할 수 있다.

function Info(name, age){
	this.name = name;
    this.age = age;
}

var info1 = new Info("홍길원", 30);
var info2 = new Info("홍길투", 20);
var info3 = new Info("홍길삼", 10);

이렇게 생성자 함수를 사용하여 중복된 코드를 사용하지 않고 생성할 수 있고, 번거롭게 하나하나 입력하여 객체를 생성하지 않아도 된다.

profile
프론트엔드 개발자가 되기 위한 기록

0개의 댓글