[Javacscript] class에 대한 기본적인 이해

class를 종종 접하게 되다 보니 이제는 기본적인 정리가 필요할 것 같아서

이번에 이해를 한 바탕으로 정리를 해 보았다. 

 

Class

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 템플릿이다. 
클래스는 객체를 정의하기 위한 변수와 메서드(함수)로 구성된다.

함수 선언과 클래스 선언의 차이점은 함수 선언의 경우 호이스팅이 일어나지만, 
클래스 선언은 호이스팅이 일어나지 않기 때문에 클래스를 먼저 선언해 주어야 한다.

 

기본 문법 사용해보기.

class User {
    
    constructor(name){
        this.name = name;
    }

    myName(){
        console.log(this.name);
    }

    sayHello(){
        console.log("Hello");
    }
}

let user = new User('Jay');
user.myName(); // Jay
user.sayHello(); // Hello

먼저 class를 만들면 내부에 여러 메서드(함수)들을 정의 할수 있다.
생성자 메서드 constructor()으로 객체의 기본 상태를 설정해 줄 수 있다.

* 클래스의 메서드 사이에서는 쉼표를 넣지 않는다.

 

 

작동 순서

1. new User으로 새로운 객체를 생성하여 'jay' 전달.
2. 자동으로 constructor()이 실행되며 this.name에 'jay'가 할당 됨.
3. user.myName()을 실행하면 class User안에 myName()이 실행된다.

 

 

class는 함수의 한 종류이다.

console.log(typeof User) //function
console.log(typeof user) //object

위와 같이 class User은 함수이며 new user()은 object로 확인할 수 있다.

물론 class 단독으로 함수실행이 되지는 않는다.

console.log(User.prototype.myName)
/*
myName(){
    console.log(this.name);
}
*/

class안에서 정의한 메서드(함수)들은 User.prototype에 저장된다.

 

 

클래스 표현식

class는 3가지 방법으로 선언이 가능하다.

 

기본 class

class User {
    myName(){
        console.log("jay");
    }
};

 

익명 표현식 (Unnamed)

const User = class {
    myName(){
        console.log("jay");
    }
};

기명 표현식 (Named)
* 해당 표현식 사용시 myInfo는 이름은 클래스 내부에서만 사용할 수 있다.

const User = class myInfo{
    myName(){
        console.log("jay");
    }
};

 

클래스필드 (Class Field)

class안에 프로퍼티 추가가 가능하다.

class User {
    first = "Jay";
    second = "Jin";

    myName(){
        console.log(`First is ${this.first}, second is ${this.second}`);
    }
};

const user = new User();
console.log(user.first, user.second);
//Jay Jin
user.myName();
//First is Jay, second is Jin

class field문법을 사용하여 클래스 안에 프로퍼티를 추가할 수 있다.
class 안의 프로퍼티에 접근하려면 개별로 객체를 만들어 주어야 한다.

 

 

++추가적으로 getter setter과 extends와 super등 정리 할 예정이다.