[JS] class

class

fields와 methods가 종합적으로 묶여있는것.

• template (틀)
• declare once
• no data in
• syntactical sugar over prototype-based

class person { // person이라는 class
	name; // property / field
  	age;
  	speak(); //function / method
}

class안에 데이터를 넣어서 만드는 것이 object
class를 이용해서 새로운 instance를 생성하면 object가 되는 것이다.
class는 메모리에 올라가지 않지만, 데이터를 넣어서 object를 만들면 메모리에 올라가게 된다.

1. class declaration

class person { //class라는 키워드를 이용해서 사람이라는 class를 만든다.
  //constructor / 생성자를 이용하여 object를 만들때 필요한 데이터를 전달한다.
  constructor(name, age) { 
    //filed / 전달받은 데이터를 field에 바로 할당해준다.
    this.name = name;
    this.age = age;
  }
  //method / speak이라는 method 
  speak() {
	console.log(`${this.name}: hello!`);
  }
}

const yj = new Person('yj', 27) //새로운 object를 만들때는 new라는 클래스 사용!
console.log(yj.name); // yj 
console.log(yj.age); // 27
yj.speak(); //  yj: hello!

2. getter and setter

class를 사용하는 사용자가 잘못 사용해도 조금 더 방어적으로 만들 수 있도록 해주는것이 getter와 setter이다.

class User {
  constructor(firstName,lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  }
  // get을 이용해서 값을 return한다.
  // age라는 getter를 정의하는 순간 this.age는 메모리에 있는 데이터를 호출하는게 아니라 getter를 호출하게 된다. 
  get age() {
  	return this._age;
  //return this.age; call stack이 다 찼다고 오류가 남.
  }
  // set을 이용해서 값을 설정할 수 있다. 값을 설정해야 하기 때문에 value를 받아와야한다.
  // setter를 정의하는 순간 =age(equal사인 값)을 할당할때, 바로 메모리의 값을 할당하는 것이 아니라 setter를 호출하게 된다.  
  set age(value) { 
    this._age = value;
  //this.age = value; call stack이 다 찼다고 오류가 남.
    // setter안에서 전달된 value를 this.age에 할당할때 메모리의 값을 불러오는게 아니라 setter의 값을 불러오게 된다. 즉 setter로 다시 돌아와서 또다시 setter를 호출하고 무한정 반복된다. 이것을 방지하기 위해서는 getter와 setter에 쓰여지는 변수의 이름을 조금 다른것으로 바꿔줘야 하는데 보편적으로 _를 사용한다.
  	// User라는 class안에는 총 3개의 field가 있다.(firstName, lastName, _age)
  }
}

const user1 = new User('steve', 'Jobs', -1);
console.log(user1.age);// -1 그런데 사람의 나이가 -1인건 말이 안된다.
// filed는 기호가 들어가있는 _age가 있지만 age를 쓸 수 있는 이유는 바로 내부적으로 get과 set을 이용했기 때문이다.

3. public & private field

생성자를 사용하지 않고 field를 정의 할 수 있다.
그냥 정의하게 되면 public field. 외부에서 접근 가능함.
#기호를 붙이면 private field. class 내부에서만 값이 보여지고 접근이 되고 변경이 가능함.
외부에서는 모두 불가능하다.

class experiment {
  publicField = 2;
  #privateField = 0;
}
const experiment = new experiment();
  console.log(experiment.publicField); // 2
  console.log(experiment.privateField); // undefiend

최근에 추가 되어진 기능이다. 아직 지원이 되지않는 브라우져가 많고 개발자들이 쓰진 않지만 알아둘것!

4. static

class 안에 있는 filed와 method들은 새로운 object를 만들때마다 그대로 복제되어서 값만 지정된 값으로 변경이되어서 만들어지는데, 간혹 이런 object에 상관없이 class가 가지고 있는 고유한 값과 이런 데이터에 상관없이 동일하게 반복되어 사용되는 method가 있을수 있다. 그런것들을 static이라는 키워드를 사용하여 붙이면 object와 상관없이 클라스 자체에 연결된다.

class Article {
  static publisher = 'blah blah';
  constructor(articleNumber) {
    this.articleNumber = articleNumer;
  }
  static printPublisher() {
    console.log(Article.publisher);
  }
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(article.publisher); // undefiend 
//static은 object마다 할당되는게 아니라 class자체 즉 Article이라는 class에 붙어있기 때문에 undefined가 나온다. 그래서 class이름을 이용해서 호출을 해야한다.
console.log(Article.publisher); // blah blah
Article.printPublisher(); // blah blah , 함수를 호출할 때도 마찬가지로 class이름을 이용해서 호출해야 한다.

5. inheritance(상속) & 다양성

네모,세모,동그라미를 만들때 각각 class를 만드는 것보다 공통점인 도형이라는 class를 만들어 재사용하는 것이 더 효율적인데 이것이 inheritance(상속)이다. 타이핑을 덜하기 때문에 개발자도 편하고 유지보수도 재사용을 하기 때문에 더 쉽다.

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

  draw() {
	console.log(`drawing ${this.color} color! `);
  }
  
  getArea() {
    return width*this.height;
  }
}

//extends 라는 키워드를 이용해서 Shape이라는 class를 재사용할 수 있다.
class Rectangle extends Shape {}
class Triangle extends Shape {}
  getArea() { // 이렇게 필효한 함수들만 재정의하는것이 overriding이다.
    return width*this.height / 2;
  } 
  draw() {
    super.draw(); 
    // 이렇게 super.함수를 하게 되면 override도 하면서 부모의 함수도 호출할 수 있다.
	console.log('세모');
  }

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); // drwaing blue color!
console.log(rectangle.getArea()); // 400

const triangle = new Triangle(20, 20, 'red'); 
triangle.draw(); // drawing red color!, 세모
console.log(triangle.getArea()); // 200
//삼각형의 넓이는 /2를 해줘야함. 사각형과 다르다. 이럴때 필요한 함수만 재정의해서 사용할 수 있다. 이를 overriding이라고 한다.

6. instanceof operator

instanceof는 왼쪽에 있는 instance가 오른쪽에 있는 class의 instance인지 아닌지 확인해주는 operator이다.

console.log(rectangle instance of Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Triangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true

우리가 자바스크립트에서 만든 모든 class들은Object를 상속한것이다.
Object에 cmd클릭을 하면 정의된 부분을 갈수 있다. 어떤 오브젝트던 공통적으로 존재하는 method를 사용할수 있는 것이다.

ex)

toString() { 
  return `Triangle: color: ${this.color}`;
}