✔ extends / super (12강)

extends / super

extends

: class를 상속한 class를 만들 때 사용함

super

: extends로 상속중인 부모 class의 constructor()를 의미

class Grand {
  constructor(lastName, name){
    this.lastName = lastName;
    this.name = name;
  }
}

var grand1 = new Grand('kim', 'kil')
console.log( grand1)

// Grand라는 class를 상속한 Parent
class Parent extends Grand{
  constructor(lastName, name, age){ // 파라미터 명시
    super(lastName, name); 
    this.age = age; // 새로운 속성 추가
  }
}

var parent1 = new Parent('Park', 'Kil', 30);
console.log(parent1);   

class간 함수 상속

1. constructor 안에서 쓰면 부모 class의 constructor
2. prototype 함수 안에서 쓰면 부모 class의 prototype

class Grand {
  constructor(lastName, name){
    this.lastName = lastName;
    this.name = name;
  }
  sayHi(){
    console.log('hello grand'); // Grand.prototype에 추가, super없이 상속 가능
  }
}

var grand1 = new Grand('kim', 'kil')
console.log( grand1)

class Parent extends Grand{
  constructor(lastName, name, age){
    super(lastName, name); 
    this.age = age;
  }
  sayHi(){
    console.log('hello parent')
    super.sayHi(); // constructor 바깥에서 super를 쓰면 부모 프로토타입을 의미함
    // 부모 프로토 타입의  sayHi 실행 (hello grand)
  }
}

var parent1 = new Parent('Park', 'Kil', 30);
console.log(parent1);   
console.log(parent1.sayHi()) // 가까운 프로토타입의 것 출력함 (hello parent)

✔ getter, setter

• 오브젝트 내의 함수들을 괄호없이 쓸 수 있게 만들어주는 키워드
• 데이터의 무결성을 보존하기 위해 쓰는 키워드
  : 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다룰 수 있음

함수로 object 데이터 다루기

함수로 object 데이터 꺼내기

• object 안의 데이터가 복잡할 수록 함수 만들어놓는게 데이터 꺼내기 쉬움
• 내부에 있는 name, age 변수를 건드리지 않아서 실수를 방지할 수 있어서 안전함
• 긴 object 안에서 몇가지 원하는 자료만 사용하고 싶을 때 함수를 만들어놓으면 매번 기능개발할 필요 없음

let person = {
  name : 'park',
  age : 30,
  nextAge(){ // 내년 나이 계산 함수
    return this.age + 1
  },
}

console.log(person.nextAge()) //31

함수로 object 데이터 수정

• setAge()라는 함수를 오브젝트 내에 추가 하고 파라미터를 this.age에 넣으면 해당 데이터를 자유롭게 변경 가능

  사람.age = 20 로 하지 않고
  사람.setAge(20) 으로 하는 이유
  : 내부에 있는 name, age 변수를 직접 건드리지 않아서 실수를 방지
  
  
  안전장치 예시)
  나이에 숫자를 집어넣어야하는데 이렇게 실수로 '40' 이라는 문자를 집어넣으면 문자로 입력 됨.
  이때 parseInt()를 사용해 문자를 숫자로 바꿔주는 안전장치 사용 가능

let person = {
  name : 'park',
  age : 30,
  setAge(age){                   
    this.age = parseInt(age);   // 문자를 정수로 변환 (데이터 수정전 미리 검사)
  },
}
person.setAge('20'); // 20

get / set 키워드

함수를 만들어쓰면 setAge(40) 처럼 소괄호까지 써야하고, 데이터를 넣기 복잡해짐
→ get/set 키워드를 함수 옆에 추가

set 붙은 함수들은 setter
get 붙은 함수들은 getter

• 함수를 만들 때 set 또는 get 키워드를 추가하면 등호로 데이터를 입력하거나 데이터를 소괄호 없이 가져올 수 있음
  → 보기 쉽고 직관적

let person2 = {
  name : 'park',
  age : 50,
  get nextAge(){
    return this.age + 1 // getter는 return이 반드시 있어야 함 / 파라미터 없어야 함
  },
  set setAge(age){                      
    this.age = parseInt(age);   // setter는 파라미터가 1개 있어야 함
  },
}

console.log(person2.nextAge);
person2.setAge = '40'; 

get / set 사용 규칙

1. getter는 return이 반드시 있어야 하며
   파라미터 없어야 함
2. setter는 파라미터가 1개 있어야 함

class에서 사용하는 get/set

class Person {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  get nextAge(){
    return this.age + 1
  }
  set setAge(age){
    this.age = age;
  }
}

let person3 = new Person('park', 100);
console.log(person3.nextAge) // get 사용시 () 생략 가능
console.log(person3.setAge=80);