강좌 : 유튜브 드림코딩 by 엘리
4. Class
📄 Object-oriendted programming
- 만약 class나 object가 없다면 정의한 변수들이 여기저기 떠다녀 규모있는 프로젝트를 만들기 힘들다
Class
- 조금더 연관있는 데이터를 한데 묶어놓는 컨테이너 같은 아이
- class 안에는
field(속성)와method(행동)값이 들어가고 field값만 들어있는 경우data class라고 부른다 - class 자체에는 데이터가 들어있지 않고 틀만 정의
- template
- declare once
- no data in
// 예시
class person{
name; // 속성(field)
age; // 속성(field)
speak(); // 행동(method)
}Object
- 새로운 object를 만들때는
new라는 키워드를 이용 - class를 이용해서 실제로 데이터를 넣어서 만든 것
- instance of a class
- created many times
- data in
✍️Class declarations
this: 생성된 object
// 예시
class Person {
constructor(name, age) { // constructor(생성자)
// fields
this.name = name;
this.age = age;
}
speak() { // method
console.log(`${this.name}: hello!`);
}
}
const hxxjxx = new Person('hxxjxx', 20); // object
console.log(hxxjxx.name); // hxxjxx
console.log(hxxjxx.age); // 20
hxxjxx.speak(); // hxxjxx: hello!✍️Getter and setters
- 사용자가 class를 잘못사용해도 방어적인 자세로 만들수 있도록 해준다
get키워드를 이용해서 값을return한다set키워드를 이용해서 값을 설정 그래서value를 받아와야한다- getter를 정의하면 메모리에 올라가있는
데이터를 읽어오는 것이 아니라 getter을 호출 - setter를 정의하면 값을 할당할때
메모리의 값을 업데이트하는 것이 아니라 setter를 호출하게되고 이것이 반복되서call stack이 발생한다 - 이를 방지하기 위해 getter와 setter안에서 쓰여지는 변수이름을
기호(_)등 을 이용해서 만들어준다
// 예시
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age() {
return this._age;
}
set age(value) {
// if (value < 0) { // 이와같이 사용할수도 있지만 아래와 같이 사용하는게 좋다
// throw Error('age can not be negative');
// }
this._age = value < 0 ? 0 : value; // age값이 -1이기 때문에 0을 반환
}
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age); // 0✍️Fields
public field
- filed를 그냥 정의
- 외부에서 접근이 가능하다
private field
- filed앞에
해시태그(#)를 붙여 정의 - class 내부에서만 값이 보여지고 변경가능 외부에서는 접근불가
// 예시
class Experiment {
publicField = 2;
#privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // undefined✍️Static properties and methods
static키워드를 사용하면 object와 상관없이class 자체에 연결- 함수를 호출할때 class 이름을 이용해서 호출
- 들어오는 데이터에 상관없이 공통적으로 class에서 쓸때 사용
// 예시
class Article {
static publisher = 'Dream Coding';
constructor(articleNumber) {
this.articleNumber = articleNumber;
}
static printPublisher() {
console.log(Article.publisher);
}
}
const article1 = new Article(1);
const article2 = new Article(2);
console.log(article1.articleNumber); // 1
console.log(Article.publisher); // Dream coding
// console.log(article1.publisher); // undefined
Article.printPublisher(); // Dream coding✍️Inheritance
- 공통되어지는 부분을 일일히 작성하지 않아도
extends키워드를 이용해서 재사용 - 유지보수가 용이
- 필요한 함수만
재정의(overriding)해서 사용가능 super을 사용하면 부모함수와 overriding을 같이 사용할 수 있다
// 예시
class Shape {
constructor(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`drawing ${this.color} color!`);
}
getArea() {
return this.width * this.height;
}
}
class Rectangle extends Shape {} // 새로운 Rectangle class에 shape을 연장
class Triangle extends Shape { // shape을 연장
draw() { // overriding
super.draw(); // 부모함수 호출
console.log('🔺');
}
getArea() { // overriding
return (this.width * this.height) / 2;
}
}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); // drawing blue color!
console.log(rectangle.getArea()); // 400
const triangle = new Triangle(20, 20, 'red');
triangle.draw(); // drawing blue color! // 🔺
console.log(triangle.getArea()); // 200✍️Class checking
instanceOf
- class를 이용해서 만들어진 새로운 instance
- 왼쪽에 있는 object가 오른쪽에 있는 class의 instance인지 아닌지 체크
console.log(rectangle instanceof Rectangle); // t
console.log(triangle instanceof Rectangle); // f
console.log(triangle instanceof Triangle); // t
console.log(triangle instanceof Shape); // t
console.log(triangle instanceof Object); // t
코린이