클래스

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

• 중괄호를 사용하는 객체데이터를 하나씩 만들 때 마다, 객체데이터가 메모리에 저장이 됩니다. 그렇게 저장된 객체데이터의 내부에 있는 함수도 데이터이기 때문에 객체 데이터의 갯수만큼 함수도 메모리에 할당됩니다.
• 이렇게 위와같은 내용을 Name만 바꿔서 여러사람을 만든다면, 메모리를 관리하는 효율이 떨어집니다.
• 이 때 사용할 수 있는 것이 JavaScript의 클래스 개념입니다.
• JavaScript의 클래스는 엄밀히 따져보면 프로그래밍 언어에서 부르는 클래스로 보기에는 조금 차이점이 있습니다.

생성자 함수

function user(first, last) {
 this.firstName = first;
 this.lastName = last;
}

const heropy = new user('Heropy', 'Park');
console.log(heropy);

결과 : user라는 이름의 객체데이터가 출력됩니다.

• 보통의 함수 호출부에 new 라는 키워드를 붙여 줍니다.
• 이 때, user라는 함수를 생성자 함수 라고 부릅니다.
• 이 때, 생성되는 것이 객체 데이터가 생성되는 것입니다.

리터럴 방식

위의 긴 코드를 {} 기호를 통해서 한번에 만들어 냅니다.

const heropy = {}

이처럼 특정한 기호만 가지고 데이터를 만들어내는 것을 리터럴 방식 이라고 말합니다.

"A", []도 리터럴방식입니다.

인스턴스

function user(first, last) {
 this.firstName = first;
 this.lastName = last;
}

const heropy = new user('Heropy', 'Park');
const amy = new user('Amy', 'Clarke');
const neo = new user('Neo', 'Smith');

console.log(heropy);
console.log(amy);
console.log(neo);

• 생성자 함수를 실행한 결과를 반환해서, 할당된 그 변수(heropy, amy, neo)를 생성자 함수의 인스턴스 라고 부릅니다.

prototype

프로토타입이라는 개념을 도입해보겠습니다.

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

const heropy = new user('Heropy', 'Park');
const amy = new user('Amy', 'Clarke');
const neo = new user('Neo', 'Smith');

console.log(heropy.getFullName());
console.log(amy);
console.log(neo);

heropy.getFullName() 을 실행하면 Heropy Park 라고 제대로 결과가 출력됩니다.

firstName과 lastName이 매번 다른 내용이 들어오기때문에 매번 새로 생성해서, 객체자체는 통일되서 관리하기 어렵지만, getFullName 같은 경우에는 로직이 완벽하게 똑같기 때문에 이런것들을 통일화해서 메모리를 조금 더 효율적으로 관리를 해줄 수가 있습니다.

• user라는 함수에 숨어져있는 prototype이라는 속성 부분에다가 getFullName을 할당해주면, 몇 개의 객체를 만들던지 간에 함수는 한번만 만들어지게 됩니다.
  
  heropy.getFullName(), amy.getFullName(), neo.getFullName()으로 실행하는 각각의 getFullName() 메소드들은 모두 한번만 만들어져있는 함수를 참조하고 있는 것입니다.(각각 객체는 달라도..)

JavaScript는 우리도 알게 모르게 prototype 이라는 개념을 사용하고 있습니다. 그래서 JavaScript를 prototype 기반의 프로그래밍 언어라고도 부릅니다.

prototype을 사용해서 new 라는 키워드와 함께 생성자 함수로 인스턴스를 만들어내는 이러한 개념들을 우리는 JavaScript의 class라고 부릅니다.

• 실제로 class 라는 키워드를 사용하는 개념들을 다른 문법으로도 만들 수 있습니다.

prototype안의 메소드 사용해보기

• 배열 데이터안에도 __proto__ 라는 객체가 들어있습니다.
  __proto__안에는 많은 함수들이 있는 것을 확인할 수 있습니다.

const a = [1, 2, 3];
a.includes(4); // false

• prototype안에 있는 수많은 메소드들 중 includes를 사용해보면 동작한다는 것을 알 수 있습니다.

생성자함수의 이름

function user(first, last) {
 this.firstName = first;
 this.lastName = last;
}

• 생성자 함수가 일반 함수와 구분이 잘 되지 않습니다.
• 그래서 개발자들이 암묵적으로 함수 이름을 카멜케이스가 아니고 파스칼케이스로 작성합니다.

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

• 함수이름이 파스칼케이스로 작성되어 있다면, 그 함수가 new 라는 키워드와 함께 생성자로서 사용이 되는 개념이라고 함수 이름만 봐도 이해할 수 있게 됩니다.