[JS] Javascript #5 Summary
Javascript #5 Summary
- 드림코딩 by 엘리: 자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 | 프론트엔드 개발자 입문편 (JavaScript ES6)
Caution
강의를 듣고 제가 기억하기 쉽게 기록하여 변형된 내용이 있을 수 있습니다.
오류가 있거나 해당 글에 문제가 있을 경우 피드백 부탁드립니다.
class (Added in ES6)
syntactical sugar over prototype-based inheritance
-
구성요소 (fields, methods)
-
fields 만 들어있는 경우를 data class 라고 부른다.
-
내부적으로 보여지는 변수, 외부적으로 보이는 변수를 나누는 것을 encapsulation (캡슐화) 이라고 한다.
-
상속과 다형성 가능 --> OOP
-
정의만 한 것이기 때문에 실제로 메모리에 올라가지 않음
class person {
name; // 속성 (field)
age; // 속성 (field)
speak(); // 행동 (method)
}
-
template (ex. 붕어빵 틀)
-
declare once
-
no data in
Object
-
Instnace of a class
-
created many times
-
data in
-
ex) 팥붕어빵, 크림붕어빵, 피자붕어빵 . . .
-
메모리에 올라간다.
class declarations
class Person {
// constructor (생성자)
constructor(name, age) {
// fields
this.name = name;
this.age = age;
}
// methods
speak() {
console.log(`${this.name}: hello!`);
}
}
const bruce = new Person('bruce', 20);
console.log(bruce.name);
console.log(bruce.age);
bruce.speak();
>>> bruce
>>> 20
>>> bruce: hello!
Getter and Setters
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age() {
return this.age;
}
set age(value) {
this.age = value;
}
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);
>>> RangeError: Maximum call stack size exceeded at User.set age [as age]
setter 가 recursion 이 무한으로 반복되는 현상때문에 위와같은 에러가 발생
해결하기 위해 아래와 같이 _age 와 같은 다른 이름의 변수를 추가로 사용
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age() {
return this._age;
}
set age(value) {
// if (value < 0) {
// throw Error('age can not be negative');
// }
this._age = value < 0 ? 0 : value;
}
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);
Public & Private
- 최근에 추가되어 최신 브라우저애서도 지원이 되지 않을 수 있음
class Experiment {
publicField = 2;
#privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // undefined
>>> 2
>>> undefined
Static
- object, input data 에 상관없이 class 에서 공통적으로 쓰이는 것에 사용하면 메모리 사용을 줄일 수 있다.
class Article {
static publisher = 'Dream 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); // undefined
console.log(Article.publisher); // Dream Coding
Article.printPublisher(); // Dream Coding
>>> undefined
>>> Dream Coding
>>> Dream Coding
Inheritance & Polymorphism
-
Inheritance: a way for one class to extend another class
-
Polymorphism (ex. Overriding)
class Shape {
constructor(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`drawing ${this.color} color!`);
}
getArea() {
return this.width * this.height;
}
}
class Rectangle extends Shape {}
class Triangle extends Shape {
draw() {
super.draw();
console.log('🔺');
}
getArea() { // Overriding
return (this.width * this.height) / 2;
}
toString() { // 기존의 toString 은 의미없는 [object Object] 라는 내용을 출력하므로 Overriding
return `[Triangle] color: ${this.color}`;
}
}
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());
>>> drawing blue color!
>>> 400
>>> drawing red color!
>>> 🔺
>>> 200
instanceof
- class checking: instanceof
console.log(rectangle instanceof 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
console.log(triangle.toString());
>>> true
>>> false
>>> true
>>> true
>>> true
>>> [Triangle] color: red
Leave a comment