VIDEO
동영상 수강 전 본문 내용 스캔.
동영상 수강 후 본문 내용 스캔.
목차
00:39 class 개념
02:55 class vs. object 차이점
04:20 class 등장
06:38 class 선언 + 07:23 object 생성
08:17 getter・setter
14:00 Public・Private
15:00 Static
16:54 extends (= 상속・다양성)
21:19 instanceOf
23:14 mdn javascript reference
24:20 지난 시간 퀴즈 정답 (4칙 연산 + 나머지)
00:39
class 개념
[일반 class] = (field + method)로 구성.
class person {
name; // 속성 (field)
age;
speak(); // 행동 (method)
}
[데이터 class] - (fileld)만으로 구성.
class Person {
name; // 속성 (field)
age;
}
PS. 객체 지향 언어는 캡슐화(encapsulation)・상속・다양성 등이 가능.
02:55
class vs. object
[class] (예) 붕어빵 굽는 틀. / 메모리 차지 X
- template
- declare once
- no data in
[object] (예) 팥붕어빵, 크림붕어빵, 피자붕어빵. / 메모리 차지 O
- instance of a class
- created many times
- data in
06:38
1. Class 선언 + Object 생성
class Person {
// constructor
constructor(name,age ) {
// fiels
this.name = name ;
this.age = age ;
}
// method
speak() {
console.log(`${this.name}: hello!`);
}
}
const ellie = new Person('ellie', 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();
결과보기
08:17
2. getter・setter
[잘못된 코드]
// 2. Gutter & Setter
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age() {
return this.age ;
}
set age(value) {
// 예1 - 값을 그대로 출력
// this.age = value;
// 예2 - 경고 메세지 띄우기
// if (value < 0) {
// throw Error('age can not be negative');
// }
// 예3 - 값을 새로 설정
this.age = value < 0 ? 0 : value;
}
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);
결과보기
[올바른 코드]
// 2. Gutter & Setter
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age() {
return this._age ;
}
set age(value) {
// 예1 - 값을 그대로 출력
// this._age = value;
// 예2 - 경고 메세지 띄우기
// if (value < 0) {
// throw Error('age can not be negative');
// }
// 예3 - 값을 새로 설정
this._age = value < 0 ? 0 : value;
}
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);
결과보기
14:00
3. Fields (public, private)
// 3. Fields (public, private)
// Too soon !
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Class_fields
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields
class Experiment {
publicField = 2;
#privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);
결과보기
PS. IE 및 Safari는 지원 X. (Babel 이용해서 변환 필요.)
15:00
4. Static properties and methods
각 객체에 공통으로 사용되는 속성을 class에서 constuctor 없이 바로 정의할 때 사용.
// 4. Static properties and methods
// Too soon !!
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);
Article.printPublisher();
결과보기
16:54
5. 상속・다양성
각 객체에 공통되는 속성과 메서드 유형을 정의 후, 상속하고 별도로 추가 정의해 사용.
// 5. Inheritance
// a way for one class to extend another class.
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 {
//super.draw();
draw() {
console.log('삼각형');
}
getArea() {
return (this.width * this.height) / 2;
}
toString() { // 아래 6. instanceof 강의 중에 나옴.
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());
결과보기
21:19
6. instanceof 연산자
// 6. 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()); // 5. 상속・다양성 예에서 재정의 없을 시, [{object Object] 찍힘.
결과보기
PS.
23:14
mdn javascript reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Value properties
Error objects
Indexed Collections
Keyed collections
Control abstraction (Promise)
Structured data (JSON)
PS. (this, binding, closure)는 다음 편에..
24:20
PS. 지난 시간 퀴즈 정답
// Fun quiz time
// function calculate(command, a, b)
// command: add, substract, divide, multiply, remainder
function calculate(command, a, b) {
switch(command) {
case 'add':
return a + b;
case 'substract':
return a - b;
case 'divide':
return a / b;
case 'multiply':
return a * b;
case 'remainder':
return a % b;
default:
throw Error('unknown command');
}
}
console.log(calculate('add', 3, 4));
console.log(calculate('substract', 3, 4));
console.log(calculate('divide', 3, 4));
console.log(calculate('multiply', 3, 4));
console.log(calculate('remainder', 3, 4));
결과보기
※ 정해진 데이터 처리할 땐, if문보다는 switch문 이용 권장.
주소 복사
랜덤 이동
최신댓글