[Intermediate] 클래스 - 생성자 함수

1. 클래스

1) 생성자 함수

아래와 같이 단순히 객체 데이터와 메소드를 사용하게 되면, 매번 메모리에 할당하게 되며 비효율적으로 코드를 작성하게 된다.

const orosy = {
  firstName: 'Orosy',
  lastName: 'Kim',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(orosy.getFullName()) // 값: Orosy Kim

const amy = {
  firstName: 'Amy',
  lastName: 'Clarke',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(amy.getFullName()) // 값: Amy Clarke

const neo = {
  firstName: 'Neo',
  lastName: 'Smith',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(neo.getFullName()) // 값: Neo Smith

이러한 비효율적인 코딩을 해결할 수 있는 방법이 바로 생성자 함수!

'리터럴 방식'이 아닌 다소 복잡한 방식이다.

생성자 함수의 사용 예제

function User(first, last) {
  this.firstName = first,
  this.lastName = last
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}
// getFullName 메소드는 로직이 동일하기 때문에 통일화하여 메모리 효율적 관리 가능!
// user라는 함수에 숨어있는 prototype 속성에 getFullName을 할당하면 된다

const orosy = new User('Orosy','Kim')
// User가 생성자 함수이며, 무엇이 생성되느냐? 바로 객체 데이터
const amy = new User('Amy', 'Clarke')
const neo = new User('Neo', 'Smith')
// 인스턴스: new라는 키워드를 통해 생성자 함수로 실행한 결과를 반환하여 할당된 변수
// 여기서 '인스턴스'들은 orosy, amy, neo!

console.log(orosy) // 값: user {firstName: "Orosy", lastName: "Kim"}
console.log(orosy.getFullName()) // 값: Orosy Kim
console.log(amy.getFullName()) // 값: Amy Clarke
console.log(neo.getFullName()) // 값: Neo Smith
// 위의 메소드들은 user.prototype.getFullName이란 한 번 만들어진 함수를 '참조'하는 것

리터럴 방식?

변수에 할당 연산자(=)를 통해 중괄호를 열고 닫는 것처럼 특정한 기호를 이용하여 손쉽게 데이터를 만드는 방식

'', "", {}, [] 등이 모두 리터럴 방식!

const orosy = {}

추가적으로 생성자 함수는 일반 함수와 비교하기 위하여 개발자들끼리 암묵적으로 첫 문자를 대문자로 사용하도록 PascalCase를 사용한다!