클래스의 의미
자바스크립트에 클래스는 ES6 버전에서 도입이 된거라 그리 오래되지 않았으며
클래스 도입전에는 오브젝트를 바로 생성하여 사용하였다.
클래스는 데이터가 들어있지 않아 메모리에 등록이 되지 않고 오브젝트를 생성하기 위한
일종의 '틀'이다.
클래스를 '정의'해서 생성자를 통해 값만 전달 받으면 오브젝트를 생성할 수 있는 것이다
클래스 : 로봇을 만드는 틀
생성자 : 로봇의 재료
메소드 : 로봇의 기능
오브젝트 : 완성된 로봇
위 처럼 생각하면 굉~장히 쉽다 😉
class Person {
//constructor
constructor(name, age){
//fields
this.name = name;
this.age = age;
}
//methods
speak(){
console.log(`${this.name}: hello~`);
}
}
//Opject
const min = new Person('min', 20);
console.log(min.name);
console.log(min.age);
min.speak();위에 있는 코드 처럼 오브젝트를 만들 수 있는 Person이란 클래스가 있고 그 안에
생성자로 name과 age를 받으며 speak기능이 있는 메소드도 가지고 있다
그 클래스를 사용하여 object min을 만들게 되었다.
get , set (게터와 세터)
패트와 매트마냥 자주 들리는 게터와 세터를 알아보자.🙄🙄🙄
우리가 클래스를 생성하고 그 클래스로 오브젝트를 만들 수 있지만 우리가 설계 했을때의
원하는 값을 만약 사용자가 입력을 안하게 되면 어떻게될까.
사람의 나이를 -1로 설정해서 오브젝트를 만들겠다 라고 사용자가 이야기하면 우리는
get와 set으로 그 값이 들어가도 되는 정상 값인지에 대해 분별할 수 있다.
아래의 코드를 보자
class Person {
//constructor
constructor(name, age){
//fields
this.name = name;
this.age = age;
}
get age{
return this._age;
}
set age(value){
this._age = value < 0 ? 0 : value;
}
}
//Opject
const min = new Person('min', -1);
console.log(min.age);위 코드를 확인하면 fields에서 this.age = age; 는 메모리에 값을 넣을때에
먼저 get과 set을 거치고 set에서 value값을 받은 것에 대한 검사를 처리해 줄 수 있다.
또한 this.age; 에 언더바를 넣은 이유는 this.age에 값을 할당할( = age)때에 메모리에
등록이 되는것이 아니라 set을 불러온다 그리하여 언더바를 넣지 않으면 set에서 무한적으로
계속 돌기 때문에 콜스택 에러가 나오기 때문에 평상적으로 구분을 위해 언더바를 넣어준다.
Static
Static은 fields나 methods 값을 받아오지 않고 class에 고정적으로 박아두고 싶을때 사용한다.
그리고 이 Static으로 설정된 fields나 method를 오브젝트를 생성해 불러오고 싶을때는
클래스에 박혀있는 것이기 때문에 오브젝트가 아니라 클래스.필드or메소드를 사용 해야한다.
이것 또한 자바스크립트에 최근에 업데이트된 기능이다.
아래의 코드를 살펴 보자.
//Static
class Article{
static publisher = 'Dream Coding';
constructor(articleNumber){
this.articleNumber = articleNumber;
}
//static 메소드
static printPublisher(){
console.log(Article.publisher);
}
}
const art1 = new Article(1);
const art2 = new Article(2);
console.log(Article.publisher);
Article.printPublisher();console.log(클래스.필드);
클래스.메소드()
이렇게 사용하는 것이 중요 ❗❗
상속은 다음편에...
