Class 문법

// function User(first, last) {
//   this.firstName = first
//   this.lastName = last
// }

// User.prototype.getFullName = function () {
//   return `${this.firstName} ${this.lastName}`
// }

// 위의 prototype 방식을 ES6의 클래스 방식으로 옮겨 작성하기
class User {
  constructor(first, last) {
    this.firstName = first
	this.lastName = last 
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

// new라는 키워드와 함께 마치 함수처럼 호출을 해서 
// 인스턴스 결과를 통해(ju, lisa) 데이터를 활용할 수 있다
const ju = new User('Ju', 'Oh');
const lisa = new User('Lisa', 'Oh');


console.log(ju.getFullName()); // Ju Oh
console.log(lisa.getFullName()); // Lisa Oh

• 예시

class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
    this.fullName = `${first} ${last}`
  }
}

const lisa = new User('Lisa', 'Oh');

console.log(lisa); // ‣ User {firstName: 'Lisa', lastName:'Oh', fullName:'Lisa Oh'}

lisa.firstName = 'Ju';

console.log(lisa); // ‣ User {firstName: 'Ju', lastName:'Oh', fullName:'Lisa Oh'}

// constructor에 fullName은 firstName과 lastName의 조합으로 만들어져야 하는데,
// new 라는 키워드를 통해 생성자 함수로 class를 호출할 때 최초로만 만들어지고
// 그 이후에 firstName과 lastName이 바뀌더라도 변화가 없는 상태가 되어져버린다
// 이것을 해결하기 위해 아래와 같이 하나의 매서드로 만들어서 코드 변경

class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

const lisa = new User('Lisa', 'Oh');

console.log(lisa.getFullName()); // Lisa Oh

lisa.firstName = 'Ju';

console.log(lisa.getFullName()); // Ju Oh

// 위 방식의 문제는 getFullName을 계속 호출해 주어야 한다는 것
// 그래서 Getter(값을 얻어내는 용도의 매서드) 사용

• getter와 setter 사용

class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  get fullName() { // get, 메서드에 붙여서 사용 fullName이 getter
    return `${this.firstName} ${this.lastName}`
  }
  set fullName(value) { // fullName이라는 setter는 fullName이라는 속성에 값을 지정할 때 동작하는 메서드
    console.log(value);
    [this.firstName, this.lastName] = value.split(' ');
  }
}

const lisa = new User('Lisa', 'Oh');

console.log(lisa.fullName); // Lisa Oh

lisa.firstName = 'Ju';

console.log(lisa.fullName); // Ju Oh

lisa.fullName = 'Ju Park' // 데이터를 할당하게 되면 setter의 메서드 실행
console.log(lisa); // ‣ User {firstName: 'Ju', lastName: 'Park'}