1
// 객체를 손쉽게 만들수 있는 템플릿
2
// 1. 생성자 함수 (오래된 고전적인 방법)
3
// 2. 클래스 ✨
4
class Fruit {
5
  // 모든 클래스는 기본 생성자(constructor)가 존재해야 함
6
  // 생성자: new 키워드로 객체를 생성할때 호출되는 함수
7
  constructor(name, emoji) {
8
    this.name = name
9
    this.emoji = emoji
10
  }
11

12
  display = () => {
13
    console.log(`${this.name}: ${this.emoji}`)
14
  }
15
}
16

17
const apple = new Fruit('apple', '🍎') // apple은 Fruit 클래스의 인스턴스이다.
18
const orange = new Fruit('orange', '🍊') // orange은 Fruit 클래스의 인스턴스이다.
19

20
console.log(apple) // Fruit { display: [Function: display], name: 'apple', emoji: '🍎' }
21
console.log(orange) // Fruit { display: [Function: display], name: 'orange', emoji: '🍊' }
22
console.log(apple.name)
23
console.log(apple.emoji)
24
apple.display()
25

26
// obj는 객체이고, 그 어떤 클래스의 인스턴스도 아니다.
27
const obj = { name: 'ellie' }

1
// static 정적 프로퍼티, 메서드
2
class Fruit {
3
  static MAX_FRUITS = 4
4
  // 생성자: new 키워드로 객체를 생성할때 호출되는 함수
5
  constructor(name, emoji) {
6
    this.name = name
7
    this.emoji = emoji
8
  }
9

10
  // 클래스 레벨의 메서드
11
  static makeRandomFruit() {
12
    // 클래스 레벨의 메서드에서는 this를 참조할 수 없음
13
    return new Fruit('banana', '🍌')
14
  }
15

16
  // 인스턴스 레벨의 메서드
17
  display = () => {
18
    console.log(`${this.name}: ${this.emoji}`)
19
  }
20
}
21

22
const banana = Fruit.makeRandomFruit()
23
console.log(banana) // Fruit { display: [Function: display], name: 'banana', emoji: '🍌' }
24
console.log(Fruit.MAX_FRUITS) // 4
25

26
// apple은 Fruit 클래스의 인스턴스이다.
27
const apple = new Fruit('apple', '🍎')
28
// orange은 Fruit 클래스의 인스턴스이다.
29
const orange = new Fruit('orange', '🍊')
30

31
console.log(apple) // Fruit { display: [Function: display], name: 'apple', emoji: '🍎' }
32
console.log(orange) // Fruit { display: [Function: display], name: 'orange', emoji: '🍊' }
33
console.log(apple.name)
34
console.log(apple.emoji)
35
apple.display()
36

37
Math.pow() // math 클래스 API
38
Number.isFinite(1) // number 클래스 API

1
// 접근제어자 - 캡슐화
2
// private(#), public(기본), protected
3
class Fruit {
4
  // # : 내부에서는 사용 가능, 외부에서는 사용 불가
5
  #name
6
  #emoji
7
  #type = '과일'
8
  constructor(name, emoji) {
9
    this.#name = name
10
    this.#emoji = emoji
11
  }
12
  #display = () => {
13
    console.log(`${this.#name}: ${this.#emoji}`)
14
  }
15
}
16

17
const apple = new Fruit('apple', '🍎')
18
// apple.#name = '오렌지'; // #field는 외부에서 접근이 불가능함
19
console.log(apple) // Fruit {}

1
// 접근자 프로퍼티 (Accessor Property)
2
class Student {
3
  constructor(firstName, lastName) {
4
    this.firstName = firstName
5
    this.lastName = lastName
6
  }
7

8
  /*** Getter의 역할
9
   * 1) 데이터를 가공해서 새로운 데이터를 반환할떄
10
   * 2) private한 값을 반환할 떄
11
   */
12
  // fullName에 접근(호출)할 떄
13
  get fullName() {
14
    return `${this.lastName} ${this.firstName}`
15
  }
16

17
  /*** Setter의 역할
18
   * 프로퍼티를 priavte로 만들면 직접 접근이 불가능하다.
19
   * 이럴 떄, Setter로 값을 변경한다.
20
   * Setter는 많이 사용되지 않는다.
21
   */
22
  // fullName에 할당할 떄
23
  set fullName(value) {
24
    console.log('set', value)
25
  }
26
}
27

28
const student = new Student('수지', '김')
29
student.firstName = '안나'
30
console.log(student.firstName) // 안나
31
console.log(student.fullName) // 김 안나
32
student.fullName = '김철수' // set 김철수

1
class Animal {
2
  constructor(color) {
3
    this.color = color
4
  }
5
  eat() {
6
    console.log('먹자!')
7
  }
8
  sleep() {
9
    console.log('잔다')
10
  }
11
}
12

13
class Tiger extends Animal {}
14
const tiger = new Tiger('노랑이')
15
console.log(tiger) // Tiger { color: '노랑이' }
16
tiger.sleep() // 잔다
17
tiger.eat() // 먹자!
18

19
class Dog extends Animal {
20
  constructor(color, ownerName) {
21
    super(color)
22
    this.ownerName = ownerName
23
  }
24
  play() {
25
    console.log('놀자아~!')
26
  }
27

28
  // 오버라이딩 overriding
29
  eat() {
30
    super.eat() // 부모의 기능을 그대로 유지하면서 추가적인 기능을 하고 싶을 떄
31
    console.log('강아지가 먹는다!')
32
  }
33
}
34

35
const dog = new Dog('빨강이', '엘리')
36
console.log(dog) // Dog { color: '빨강이', ownerName: '엘리' }
37
dog.sleep() // 잔다
38
dog.eat() // 먹자! 강아지가 먹는다!
39
dog.play() // 놀자아~!