클래스와 오브젝트
클래스는 연관있는 데이터를 한 곳에 묶어두는 컨테이너와 같은 역할로, 클래스는 필드와 메소드를 가진다. 필드만 있는 클래스를 데이터 클래스라고 한다. 예를 들어서 class car은 model과 type라는 속성(fields)과 drive()라는 행동(method)를 가진다고 볼 때, car을 정의하고 있다고 보면 된다. 클래스는 설계도와 같다. 우리는 정의된 클래스를 이용해서 실제로 존재하는(객체) 것을 만들 수 있다. car 클래스를 이용해서 myCar 객체를 만드는 것.
클래스는 '틀'로써 청사진, 템플릿이라고도 불린다. 클래스에는 데이터는 없고, 템플릿 정의하고 한번만 선언한다. 이렇게 클래스로 만들어진 것을 오브젝트라고 한다. 실제로 만들진 것이기 때문에 메모리가 할당된다.
자바스크립트는 ES6에 와서야 클래스가 도입된다. 그 전에는 함수를 사용해서 템플릿을 생성했다. 클래스는 새로 만들어진 것이 아닌 기존에 있는 프로토타입 베이스를 위에 클래스 형식으로도 만들 수 있게 문법적 편의에 불과하다.
// 1. Class declarations
class Person {
//constructor
constructor(name, age) {
// fields
this.name = name;
this.age = age;
}
//methods
speak() {
console.log(`${this.name}: hello!`);
}
}
const ellie = new Person("ellie", 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();생성자를 사용한 평범한 클래스 정의 방법
// 2. Getter and Setters
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age; // age는 아래의 _age 으로 사용
}
get age() {
// get 이후 this.age에서 get age()를 불러서 이름 변경
return this._age;
}
set age(value) {
// set 이후 =age;에서 set ()를 불러서 이름 변경
this._age = value < 0 ? 0 : value;
}
}
const user1 = new User("Steve", "job", -1);
console.log(user1.age);Getter와 Setter를 사용한 객체 생성 (필드값 처리를 간접적으로 변경하여 캡슐화 유지)
get와 set을 사용하는 순간 해당 이름이 있으면 데이터 입력을 get과 set으로 하는데 이름이 같으면 무한으로 반복하여 초과 에러가 발생한다.
// 3. Fields (public, private)
class Experiment {
publicField = 2;
#privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // undefined생성자를 사용하지 않고 필드를 정의할 수 있다.
그냥 정의하게 되면 public / #를 붙이게 되면 private로 정의한다.
최근에 추가되어 '사파리' 같은 브라우저에서 적용 안된다. 사용하기 위해서 Babel을 이용해야함.
// 4. Static properties and methods
class Article {
static publisher = "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); // 클래스로 사용해야함
console.log(Article.publisher); // coding!
Article.printPublisher(); // coding!Static 데이터를 고정해둔다. 따라서 static 필드/메소드를 사용하려면 객체에서 불러오는 것이 아닌 클래스로 불러와야 한다. 오브젝트와 상관없이 반복되는(공통되는) 데이터를 처리할 때 사용한다. 메모리의 이점이 생긴다.
// 5. Inheritance
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 this.width * this.height;
}
}
class Rectangle extends Shape {}
class Triangle extends Shape {
draw() {
super.draw();
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());상속과 다양성. 모든 도형은 가로, 세로, 넓이가 있다. 사각형과 삼각형 클래스를 만들기 위해 도형 클래스를 상속받으면 가로, 세로를 받아 넓이를 쉽게 처리 가능하다. 삼각형은 (가로*세로)/2 이기 때문에 재정의(오버라이딩)으로 해줄 수 있다. 부모의 원래 기능을 사용하기 위해서는 super 키워드를 사용한다.
// 6. Class checking: instanceOf
console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Shape); // True
console.log(triangle instanceof Object); // Trueinstanceof를 사용하면 해당 클래스를 이용한 객체인지 아닌지 확인(boolean)할 수 있다. 모든 오브젝트 클래스들은 'Object'를 상속해서 만들어진다. 따라서 Object에 있는 함수들을 사용할 수 있다. 예를들어 toString()를 이용하면 객체를 문자로 표현해주는 메소드이다.
