생성자로 객체를 생성하는 방법
생성자를 사용하면 이름이 같은 메서드와 프로퍼티를 가진 객체 여러 개를 효율적으로 생성할 수 있다.
[1] 생성자로 객체 생성하기
Java, C++ 등에서는 프로퍼티를 갖는 객체를 여러 개 생성하는 수단으로 클래스(class)를 제공. 클래스를 사용하면 프로퍼티가 똑같은 객체를 얼마든지 만들 수 있다.
하지만 자바스크립트에는 클래스가 없다.
대신 생성자라고 하는 함수로 객체를 생성할 수 있다.
function Card(suit, rank) {
this.suit = suit;
this.rank = rank;
}
생성자로 객체를 생성할 때 new 연산자를 사용한다.
var card = new Card("하트", "A");
이 코드를 실행하면,
- suit 프로퍼티에는 “하트”, rank 프로퍼티에는 “A”라는 값이 저장된 객체가 생성되고,
- 마지막으로 그 객체의 참조가 변수 card에 할당된다.
console.log(card); // → Card {suit: "하트", rank: "A"}
이때 Card 생성자로 생성한 객체를 Card 객체라고 한다.
console.log로 객체를 출력하면 앞에 생성자 이름이 표시된다.
생성자
- new 연산자로 객체를 생성할 것이라 기대하고 만든 함수
- 생성자 이름은 관례적으로 생성자임을 알리기 위해 파스칼 표기법을 따른다. (첫 글자를 대문자로 쓰는 방법)
- 생성자 안에서 this.프로퍼티 이름에 값을 대입하면 그 이름을 가진 프로퍼티에 값이 할당된 객체가 생성된다. 이때 this는 생성자가 생성하는 객체를 가리킨다.
앞의 예는 다음과 같이 객체 리터럴로 고쳐 쓸 수 있다.
var card = {};
card.suit = "하트";
card.rank = "A";
생성자와 new 연산자로 생성한 객체를 그 생성자의 인스턴스라고 한다. (인스턴스 = 실체)
※ 객체지향언어에서 인스턴스는 클래스로 생성한 실체. 클래스는 객체를 실체로 만들기 위한 설계도이고, 그 설계도로 생성한 실체가 바로 인스턴스. 자바스크립트에서는 클래스가 없기 때문에 자바스크립트에서 생성자로 생성한 객체는 엄밀히 말해 인스턴스는 아니다. 하지만 생성자가 클래스처름 객체를 생성하는 역할을 담당하고 있어 관례적으로 인스턴스라고 한다.
생성자의 역할
- 생성자는 객체를 생성하고 초기화하는 역할을 한다.
- 생성자를 사용하면 이름은 같지만 프로퍼티 값이 다른 객체(인스턴스) 여러 개를 간단히 생성할 수 있다.
var card1 = new Card("하트", "A");
var card2 = new Card("클럽", "K");
var card3 = new Card("스페이드", "2");
이처럼 생성자를 사용하면 이름은 같지만 프로퍼티 값이 다른 객체 여러 개를 효율적으로 생성할 수 있다.
- 생성자 : Card(suit, rank)
- 인스턴스 : {suit: “하트”, rank: “A”}, {suit:”클럽”, rank:”K”}, {suit:”스페이드”, rank:”2″}
생성자는 함수이므로 프로퍼티에 값을 대입할 수 있다.
다른 함수와 마찬가지로 다양한 처리를 할 수도 있다. 이를 활용하면 객체를 생성할 때 초기화 작업을 병행할 수 있다.
아래 함수 Particle은 좌표와 속도를 가진 좌표평면 위에 파티클을 표현하는 객체를 생성하는 생성자.
function Particle(x, y, vx, vy) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.velocity = Math.sqrt(vx * vx + vy * vy);
}
var p = new Particle(0, 0, 3, 3);
console.log(p); // → Particle {x:0, y:0, vx:3, vy:3, velocity:5}
// 이 코드는 '모던 자바스크립트 입문(徹底マス夕一JavaScriptの敎科書)'에서 인용한 것입니다.
// [ISBN #978-4797388640]. Copyright 2017 by 磯博
이 코드에서는 좌표값(x, y)과 속도벡터(vx, vy) 외에도 속도 velocity를 계산해서 프로퍼티에 추가한다.
[2] 메서드를 가진 객체를 생성하는 생성자
생성자에서 this.프로퍼티 이름에 함수의 참조를 대입하면, 메서드를 정의할 수 있다.
이때 메서드 함수 안에 있는 this는 생성될 인스턴스를 가리킨다.
function Circle(center, radius) {
this.center = center;
this.radius = radius;
this.area = function() {
return Math.PI * this.radius * this.radius;
}
}
var p = {x:0, y:0};
var c = new Circle(p, 2.0);
console.log("넓이 = " + c.area()); // → 넓이 = 12.566370614359172
// 이 코드는 '모던 자바스크립트 입문(徹底マス夕一JavaScriptの敎科書)'에서 인용한 것입니다.
// [ISBN #978-4797388640]. Copyright 2017 by 磯博
메서드 함수 앞에서 this를 사용하면 그 값이 인스턴스의 프로퍼티임을 명시할 수 있다.
< 참고문헌 >
🔹주 참고문헌 : 모던 자바스크립트 입문 – 이소 히로시 지음, 서재원 옮김
🔹MDN Web Docs
