[JS]04-Class(클래스 만들기, 게터와 세터, static 등)

class

-template

-declare once

-no data in

연관있는 데이터들을 한데 묶어놓은 컨테이너같은 역활

붕어빵틀같음

청사진이라고 불리고 템플릿이라고도 불림

 

class Person{
    //속성 fields
    name;
    age;

    //행동 method
    speak();
}

Object

-instance of a class

-created many times

-data in

붕어빵같음

---

 

1. Class declarations

 

첫번째: 클래스를 만들어준다.(템플릿 같은 역할. 데이터x)

 

class Person{

    //constructor:생성자를 이용해서 나중에 오브젝트를 만들때 필요한 데이터를 전달함
    constructor(name, age){ 

        //fields: 전달된 데이터를 바로 할당해줌
        this.name = name;
        this.age = age;
    }

    //method
    speak(){
        console.log(`${this.name}: hello!`)
    }
}

 

 

두번째: 오브젝트를 만들어주면 끝. (클래스를 보며 데이터를 만들어냄)

const Tom = new Person('Tom', 20);
console.log(Tom.name);
console.log(Tom.age);
Tom.speak();

---

 

2. Getter and satters

-사용자가 나이를 -1같은 말도 안되는 설정을 했을때 우리가 방어적인 자세로 말이 되도록 해주는것

-get을 이용해서 값을 return해주고, set을 이용해서 값을 설정해줌(set은 값을 설정하기 때문에 value 값을 받아와야함.)

class User{
    constructor(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age; //이 값이 아래의 get과 set에 영향을줌.
    }

    get age(){
        return this._age; //age라고 적으면 위에 this.age가 할당되서 무한반복 
                          //그래서 _를 붙여주는 등 이름을 살짝 바꿔줘야함.
    }

    set age(value){ //(-1같은 값을 0으로 초기화시켜줌!)
        this._age = value < 0 ? 0 ; value; //value값에 위에 this.age=age의 =age 값이 
                                        //들어가면서 무한 반복.. 얘도 마찬가지로 이름 살짝 바꿔줘야함
    }
    
}

 

상황)사용자가 실수로 나이를 -1이라고 설정한 상태

const user1 = new User('Steve', 'job', -1);

 

---

 

 

 

3. Fields (public, private)

public: 일반적인 형태. 외부에서 접근이 가능함

#privateField : #붙이면 프라이빗 필드가 됨. 클라스 내부에서만 값이 보여지고 접근이 되고 값이 변경이 가능하지만 클래스 외부에서는 읽을수도, 변경할수도 없다.

 

class Experiment{
    publicField = 2;
    #privateField =0;
}
const experiment =new Experiment();
console.log(experiment.publicField); //2출력
console.log(experiment.privateField); // undefined (프라이빗필드라 밖에서는 값이 안보임)

 

---

 

4. Static properties and methods

-static 이라는 키워드를 붙이면 오브젝트에 상관없이 클래스 자체에 연결되어있다.

-오브젝트에 상관없이, 들어오는 데이터에 상관없이 공통적으로 클래스에서 쓸수있는 거라면 Static과 Static method를 이용해서 작성하는것이 메모리의 사용을 조금더 줄여줄수 있다.

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.publisher); //undefined로 뜸 즉 오브젝트자체에 할당된게 아니라는 소리.
console.log(Article.publisher); //이렇게 클래스로 바꿔주어야함 

Article.printPublisher(); // 클래스로 불러와야 출력되는걸 알수있다.

 

---

5. Inheritance (상속)

-a way for one class to extend another class.

 

class Shape{
    constructor(width, height, color){
        this.width = width;
        this.height = height;
        this.color = color;
    }

    draw(){
        console.log('drawing ${this.color} color of');
    }

    getArea(){
        return width * this.height;
    }
}

 

extends라는 키워드를 이용해서 Shape을 연장한다.

필요한 함수만 재정의해서 쓸수있음 이것을 오버라이딩이라고 함.

class Rectangle extends Shape {}
class Triangle extends Shape {
    draw(){
        super.draw(); //super을 붙여주면 부모의 메소드도 호출해줌
        console.log('🔺');
    }

    getArea(){
        return (this.width * this.height)/2;
    }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea());

const triangle = new Triangle(20,20,'red');
triangle.draw();
console.log(triangle.getArea());

 

---

 

6. instanceOf (class checking!)

 

console.log(rectangle instanceof Rectangle);

instanceOf를 이용해서 rectangle이라는 오브젝트가 Rectangle 이라는 클래스로 만들어진 아이인지 아닌지 확인하는것

(true 와 flase를 리턴함.)

 

---

이 글은 유튜브 드림코딩 by 엘리님의 JS 입문강의를 보면서 정리한것 입니다.