생성자 함수와 ES6 Classes클래스 / 객체의 로직이 동일하게 반복될 때

🚨 동일한 로직을 반복해서 사용해야 한다면?

ㄴ 리터럴방식과 생성자함수

*리터럴 방식 Literal : 객체 데이터{ }, 문자 데이터' ', 배열 데이터[ ] 등 객체 지향 언어에서 데이터를 표현하는 방식에 사용된다.

예로 string이라는 전역 객체(자바스크립트 전체영역에서 사용가능한 객체)는 문자열(문자의 나열)의 생성자이다. 생성자는 new String()으로 사용될 수 있음을 의미한다. 그러나 string은 리터럴 방식의 따옴표 안('데이터')에 표현하기도 한다. 

 

 

📍 복붙하는 것이 쉬워보이니까 그냥 복붙하면 되지

하지만 개발자는 메모리 누수를 잘 관리해서 효율적인 코드를 짜야 한다.

 

👩‍💻 아래와 같이 siot이라는 변수에 getFullName메소드를 실행한다고 해보자. 

const siot = {
  firstName : 'siot',
  lastName : 'kim',
  getFullName : function () {
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(siot.getFullName()) // siot kim

 

이번에는 추가로 amy라는 변수를 만들어 똑같이 getFullName을 실행하고 싶다. siot변수와 마찬가지로 동일한 로직을 amy변수에 복붙하면 된다. 그러나 siot과 amy는 동일한 구조의 로직을 가지므로 이는 매우 비효율적이다.

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

 

 

📍 생성자 함수를 사용해서 참조하면 어떨까?

생성자 함수는 일반 함수와 구분이 되지 않기 때문에 관행적으로 파스칼 표기법 PascalCase을 사용한다.

*PascalCase : 첫번째 문자를 대문자로 표기하는 방법

 

👩‍💻 new연산자와 함께 user라는 이름의 생성자함수를 호출했다.

생성자함수에 의해 생성된 객체 데이터siot은 생성자함수의 인스턴스instance라 한다.

const siot = new User('siot', 'kim')

 

 

👩‍💻 생성자 함수의 prototype을 이용해 class를 만들어 보자.

user함수는 first와 last를 매개변수로 가지고 있고 firstName과 lastName속성으로 정의했다.

이 부분은 매개변수에 들어오는 데이터에 따라 값이 매번 달라지므로 아래와 같이 사용할 수 있다.

getFullName은 변경될 일이 없으므로 다음과 같이 사용한다.

이 user함수의 숨겨진 prototype속성에 getFullName이라는 멤버를 추가해 결과적으로 원하는 기능의 함수를 할당해 반환한다.

siot.getName()과 같이 새로운 변수에도 getName()메서드를 붙여 동일한 로직을 실행할 수 있다. 즉, 앞서 만들어진 로직을 참조한다고 한다.

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

const siot = new User('siot', 'kim')

console.log(siot.getName())

 

 

📍 javascript의 class기능으로 더욱 간편하게

javascript는 prototype기반의 프로그래밍 언어라고도 한다. prototype을 사용해 생성자 함수로 인스턴스를 만들어내는 것을 javascript의 class라고 한다. 하지만 지금까지 위에서 언급한 방법보다 더 간단하게 class를 사용할 수 있다.

 

class를 사용할 때는 constructor라는 내부함수를 사용한다. 이 내부함수 constructor에 매개변수를 받는다.

prototype이라는 속성을 사용하지도 않아도 getFullName은 자동으로 정의된다.

최종 코드

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

const siot = new User('siot', 'kim')

console.log(siot.getFulName())	// siot kim

 

 

 

---

💡 클래스의 상속(확장) 개념

특정 클래스를 새로운 클래스에 상속시켜 그대로 사용하거나 내용을 추가할 수 있다.

확장된 클래스를 super키워드로 불러온다.

class Vehicle {
  constructor (name, wheel) {
    this.name = name
    this.wheel = wheel
  }
}

class Bicycle extends Vehicle {
  constructor (name, wheel) {
    super(name, wheel)
  }
}
const myBicycle = new Bicycle('자전거', 2)
console.log(myBicycle) 

class Car extends Vehicle {
  constructor (name, wheel, license) {
    super(name, wheel)
    this.license = license
  }
}
const myCar = new Car ('내차', 4, true)
console.log(myCar)