* class vs object
-
calss : 연관있는 데이터를 한데 묶어놓는 컨테이너 (정의만 한것) ex)붕어빵 틀
class person{ name; // 속성(field) age; // 속성(field) speak();} // 행동(method) - 생략되는 경우도 있다 -
object : class를 이용해 실제로 데이터를 넣어 만드는것 ex) 팥 붕어빵, 크림 붕어빵, 피자 붕어빵 …
- class : template
- object : instance of a class
1.Class declarations(선언)
```Javascript
class Person{
// constructor -> 생성자
constructor(name, age){
// fields -> 속성
this.name = name;
this.age = age;
}
// methods
speak(){
console.log(`${this.name}: hello!`);
}
}
``` ** object 생성
```Javascript
const ellie = new Person('ellie', 20);
console.log(ellie.name); // ellie 출력
console.log(ellie.age); // 20 출력
ellie.speak(); // ellie: hello! 출력
```
2.Getter and setters
```Javascript
class User{
constructor(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
}
get age(){ // get 이용해 값을 리턴
return this._age; // 사용자가 age를 호출하면 this.age를 리턴 , 변수이름을 _를 붙혀 변형해서 지정해준다 => 무한로딩 방지
}
set age(value){ // set 이용해 값을 설정 => 값을 설정하기 때문에 value를 받아와야한다
if(value < 0>){
throw Error('age can not be negative');
}
this._age = value; // 새로운 value를 받으면 this.age 를 value로 설정한다,변수이름을 _를 붙혀 변형해서 지정해준다 => 무한로딩 방지
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);
```
3.Fields (public, private) : 최근에 생겨 아직 잘 사용하지 않는다
```Javascript
class Experiment { // 생성자를 쓰지않고 field를 정의할 수 있다
publicField = 2; // 외부에서 접근가능
#privateField = 0; // 클래스 내부에서만 접근 가능
}
const ecperiment = new Experiment();
console.log(experiment.publicField); // 2 출력
console.log(experiment.privateField); // undefined 출력
``` 4.Static properties and methods : 최근에 생겨 아직 잘 사용하지 않는다
```Javascript
class Articla{ // object와 상관없이 들어오는 데이터와 상관없이 공통적으로 class에서 쓸수 있는것 에 사용 => 메모리 사양을 줄여준다
static publisher = 'Dream Coding';
constructor(articleNumber){
this.articleNumber = articleNumber;
}
static printPublisher(){
console.log(Aricle.publisher);
}
}
```
5.상속(ingeritane) : 공통되어지는 items 을 일일히 작성하지 않아도 extends를 사용해 동일한 것들을 재사용 할 수 있다/ 다양성 : 상속된것을 변형해서 사용할 수 있다
```Javascript
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;
}
}
class Rectangle extends Shape{} // extends : 연장,연결 , Shape의 fields 와 methods 가 자동적으로 Ractangle에 포함된다
const rectangle = new Ractangle(20, 20, 'blue');
rectangle.draw(); // drawing blue color of 출력
```
6.Class checking: instanceOF => class를 이용해 새로 만들어진 object
-
instanceOF : 왼쪽에 있는 object가 오른쪽 class의 instance 인지 확인 하는것
console.log(rectangle instanceof Rectangle); // true 출력