- 목차
1. 클래스
1_1) 클래스(Class)란?
- ES6에 도입된 문법이다.
- 객체를 생성하기 위한 템플릿이다.
- 클래스는 내부적으로 생성자 함수를 기반으로 동작한다.
- 동일한 종류의 객체를 여러 개 생성 해야 하는 경우에 클래스 문법을 통해 객체를 재 생성 할 수 있다.
1_2) 클래스 문법
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
this.country = 'Korea';
}
}
let person1 = new Person('김철수', 25);
console.log(person1.name); // 김철수
console.log(person1.age); // 25
console.log(person1.country); // Korea-
클래스를 통해 생성된 객체를 인스턴스(instance)라고 부른다.
-
new키워드와 소괄호()를 이용해 클래스를 호출할 수 있다. -
클래스 이름은 항상 대문자로 시작한다.
-
생성자 (
constructor)는 기초 정보를 세팅하는 곳이다 클래스를 호출할 때, 가장 먼저 자동으로 호출된다.this는 자기 자신의 객체를 의미한다.
-
클래스 몸체에 정의한 메서드는 프로토 타입 메서드가 된다.
-
생성자 함수와 클래스의 차이점
- 클래스 생성자를
new와 함께 호출하지 않으면 에러가 발생한다. - 클래스에 정의된 메서드는 열거 불가능하다.
- 호이스팅이 발생하지 않는 것처럼 동작한다.
- 클래스 생성자를
1_3) getter와 setter
-
속성에 접근하거나 값을 설정할 때 함수처럼 동작하지만, 속성처럼 사용도 할 수 있는 메서드이다.
-
getter
- 객체의 속성 값을 반환하는 메서드이다.
get을 이용해 선언 한다.
-
setter
- 객체의 속성 값을 설정, 변경하는 메서드이다
set을 이용해 선언 한다
-
getter와 setter는 왜 사용해야 할까?
- 객체 내부 속성에 직접 접근하지 않아 객체의 정보 은닉을 가능하게 해준다.
- 보안을 강화할 수 있고, 안전성과 유지보수성을 높일 수 있다.
class Temperature {
constructor(celsius = 0) {
this._celsius = celsius;
}
get celsius() {
return this._celsius;
}
set celsius(temp) {
this._celsius = temp;
}
get fahrenheit() {
return (this._celsius * 9/5) + 32;
}
set fahrenheit(temp) {
this._celsius = (temp - 32) * 5/9;
}
}
const temp = new Temperature(25);
console.log(`섭씨: ${temp.celsius}°C`); // 섭씨: 25°C
console.log(`화씨: ${temp.fahrenheit}°F`); // 화씨: 77°F1_4) static이란?
💡클래스의 인스턴스가 아닌 클래스 자체에 속하는 method와 property를 정의할 때 사용된다.
- 클래스 안에 위치하고 앞에
static이라는 키워드를 붙인다. new생성자로 인스턴스 객체를 생성하지 않아도 해당 method와 property를 사용할 수 있다.- static method와 static property는 유틸리티 함수나 상수 값을 정의할 때 유용하다.
정적 메서드 (static method)
- 정적 메서드는 특정 클래스의 인스턴스가 아닌 클래스 전체에 필요한 기능을 만들 때 사용한다.
- 단,
this키워드를 이용해 상위 오프젝트에 접근할 수 없다.
class A{
static a(){
코드
}
}class Calculator {
static max(a, b) {
return a > b ? a : b;
}
static min(a, b) {
return a < b ? a : b;
}
}
console.log(Calculator.max(1, 2)); // 2정적 프로퍼티 (static property)
- 데이터를 클래스 수준에 저장하고 싶을 때 사용한다
- method가 아닌 속성들을 static property라고 칭한다
class User {
static count = 0;
static maxUsers = 10;
}
console.log(User.count); // 0
console.log(User.maxUsers); // 102. 상속
2_1) 상속(inheritance)이란?
💡기존의 클래스를 재사용해 새로운 클래스를 만드는 방법이다.
- 코드의 재사용성을 높이고 유지보수성을 향상할 수 있다.
2_2) 클래스의 상속 구현
// 사람
class Person {
constructor(name, age, location) {
this.name = name;
this.age = age;
this.location = location;
this.speak = function() {
return `안녕하세요, 저는 ${this.name}입니다.`;
};
}
}
// 배우 (사람을 상속)
class Actor extends Person {
constructor(name, age, location) {
super(name, age, location);
this.act = function() {
return `${this.name}가 연기를 합니다.`;
};
}
}
const person = new Person("김철수", 30, "서울");
const actor = new Actor("차은우", 25, "부산");
console.log(person.speak()); // 안녕하세요, 저는 김철수입니다.
console.log(actor.speak()); // 안녕하세요, 저는 차은우입니다.
console.log(actor.act()); // 차은우가 연기를 합니다.extends- 상속 받을 클래스를 명시한다.
extends 클래스명의 형태로 어디에서 상속을 받아올 지 지정한다.
constructor- prototype에 constructor를 추가한다.
- 필수 요소는 아니지만 생략했을 경우 상위 클래스의 constructor를 사용한다.
super- 상위 클래스의 prototype을 호출할 때 사용한다.
- 예시로 보면 상위 클래스인
Person의 속성인name,age,location을 호출해 접근한다. super()를 사용했을 때에는 상위 클래스의 constructor를 호출한다.- 무조건
this키워드보다 먼저 사용해야 한다 아닐 시 오류 발생
FE