클래스 (Class)
자바스크립트의 클래스 문법은 ES6에서 추가된 것으로 좀 더 JAVA와 비슷하게 객체 지향을 표현하기 위해 추가된 것이다. ES5까지는 클래스가 없었기 때문에 프로토타입 체이닝을 통해서 다음과 같이 유사하게 구현해왔지만,
// 생성자
function Person({name, age}) {
this.name = name;
this.age = age;
}
Person.prototype.introduce = function() {
return `이름 : ${this.name} 나이 : ${this.age}`;
};
const person = new Person({name: 'kim', age: 26});
console.log(person.introduce()); // 이름 : kim 나이 : 26
ES6 부터는 다음과 같이 편하게 코드를 작성할 수 있게 된 것이다.
// 클래스
class Person {
// 이전에서 사용하던 생성자 함수는 클래스 안에 `constructor`라는 이름으로 정의
constructor({name, age}) { //생성자
this.name = name;
this.age = age;
}
//메소드가 자동으로 `Person.prototype`에 저장
introduce() {
return `이름 : ${this.name} 나이 : ${this.age}`;
}
}
const person = new Person({name: 'kim', age: 26});
console.log(person.introduce()); // 이름 : kim 나이 : 26
두 방식은 문법만 다룰 뿐, 자바스크립트 엔진 내에서는 같은 방식으로 동작한다.
클래스 선언
자바스크립트에서 클래스는 class 키워드를 통해 생성하게 되고 constructor 생성자 함수를 통해 객체를 생성하고 클래스 필드를 초기화할 수 있다.
class Person {
height = 180; // 인스턴스 변수
// constructor는 이름을 바꿀 수 없다.
constructor(name, age) {
// this는 클래스가 생성할 인스턴스를 가리킨다.
this.name = name;
this.age = age;
}
}
let person1 = new Person('john', 23);
console.log(person1.name); // john
console.log(person1.age); // 23
console.log(person1.height); // 180
클래스를 선언할 때 주의할 점으로는 다음과 같다.
- 필드의 선언과 초기화는 반드시 constructor 내부에서 실행
- constuctor 내부에 선언한 클래스 필드는 클래스가 생성한 인스턴스에 바인딩
클래스 필드는 생성한 객체의 프로포티이며, 객체를 통해 클래스 외부에서 언제나 참조할 수 있는 public 프로퍼티이다. 또한 위의 예제에서도 알 수 있듯이, 클래스 필드의 변수는 생성자 함수에서 초기화시 자동으로 생성이 된다. (자바에서 처럼 변수를 미리 선언하는 과정이 필요X)
클래스 메소드 정의
클래스의 메소드를 정의할 때는 객체 리터럴에서 사용하던 문법과 유사한 문법을 사용할 수 있다. 기본적으로 는 다음과 같이 선언한다.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
printInfo() {
return `이름 : ${this.name} 나이 : ${this.age}`;
}
}
let person1 = new Person('john', 23);
//메소드 사용
console.log(person1.printInfo()); //이름 : john 나이 : 23
객체 리터럴 문법과 같이 임의의 표현식을 대괄호로 둘러싸서 메소드의 이름으로 사용할 수 있다.
const methodName = 'printInfo';
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
// methodName = printInfo => printInfo()로 호출
[methodName]() {
return `이름 : ${this.name} 나이 : ${this.age}`;
}
}
let person1 = new Person('john', 23);
console.log(person1.printInfo()); //이름 : john 나이 : 23
그 외에도 메소드는 static 방식으로도 선언할 수 있는데 해당 방식에 대한 내용은 아래의 포스팅을 참고하기 바란다.
Getter & Setter
자바에서는 getter와 setter를 정의해줄 때, 일반 메소드 선언 방식에 메소드명을 변수명 앞에 get 또는 set을 붙인 형태로 정의한다. (ex. getName(), setName() ... )
자바스크립트에서는 get 또는 set 키워드를 통해 getter, setter 를 정의할 수 있다.
class Person {
constructor(name, age) {
this._name = name;
this._age = age;
}
get name(){
return this._name;
}
set name(name) {
this._name = name;
}
}
let person = new Person('john', 23);
// 자동으로 setter 함수를 호출
person.name = 'kim'
// getter 함수 호출
console.log(person.name);
위의 예제를 보면, 사용법이 독특한데 getter와 setter는 일반적인 메소드 호출 방식이 아닌 메소드 이름만 불러주는 형태로 함수를 호출한다.
이 때 메소드 이름에 접근한 뒤 값을 할당할 때에는 setter를 호출하고, 단순히 메소드 이름에만 접근할 경우 getter를 호출한다.
제너레이터 메소드
Generator 메소드를 정의하려면, 메소드 이름 앞에 * 기호를 붙여주면 된다.
class Gen {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
}
// 1, 2, 3이 차례대로 출력
for (let n of new Gen()) {
console.log(n);
}
'Programming > 자바스크립트' 카테고리의 다른 글
[자바스크립트] iterable & iterator (1) | 2023.11.03 |
---|---|
[자바스크립트] 클래스 상속 (0) | 2023.11.03 |
[자바스크립트] 정적 메소드 (0) | 2023.11.03 |
[자바스크립트] 정규표현식 예제 (0) | 2023.11.03 |
[자바스크립트] 유사 배열 객체 (0) | 2023.11.03 |