[TIL]Javascript - 객체지향 class (ES5/ES6)

 객체지향 Class  

 

[생성자 함수]

• 객체를 생성하는 함수
• javascript 에서는 class가 생성자 함수역할을 대신함
• ES6에서 class 개념이 제대로 추가

 

기본 object 생성법과 class를 통한 생성법을 보면서 송편 빚기와 붕어빵 만들기가 생각났다.

출처 : 만개의 레시치 (좌)봉자바리, (우)쭌맘네

비슷한 모양을 만드는게 목표라 정하면,

object 송편 : 손으로 하나하나 일일이 빚어 만들기
class 붕어빵 : 하나의 틀에서 같은 모양의 붕어빵들을 찍어내기

라는 차이가 있는 것이다.

(송편 만드는 기계도 있다, 붕어빵도 일일이 만져줘야한다 등 비문학적 생각은 잠시 접어두기)

 

나는 붕어빵을 더 좋아하므로

class를 통한 붕어빵 틀을 만들어보기로했다.

 

[1]

먼저 object형식으로 붕어빵 하나를  만들어보자

객체 생성법

var potBung = {
   base : '밀가루';
   flavor : '팥';
}

 

 

[2]

이 같은 형식으로 다양한 맛의 '새로운 붕어빵 object'를 만들어 볼까?

var potBung = {
   base : '밀가루';
   flavor : '팥';
}

var chouxBung = {
   base : '쌀가루';
   flavor : '슈크림';
}

var pizzaBung = {
   base : '튀김가루';
   flavor : '피자';
}
.
.
.

 

여기서

• potBung라는 객체에서 flavor를 선택하면 '팥'이 나온다.
• chouxBung라는 객체에서 flavor를 선택하면 '슈크림'이 나간다.

이 같은 방식으로라면 데이터가 많아지면 많아지는 대로 재료를 일일이 적어줘야한다. (=하드코딩)

 

 

이렇게 비슷한 object를 많이 만들어야할 때, 

class문법을 사용하면 수고로움을 덜 수 있다.

 

 

class라는 멋진 붕어빵 틀을 만들면 '밀가루와 팥'을 넣든, '쌀가루와 슈크림'을 넣든 붕어빵 모양으로 나온다.

즉, class는 object를 뽑아쓰는 틀!

 

 

[3]

class로 붕어빵 틀 만들기

 

:: ES5

function FishBunFrame(){
  this.base = "밀가루";
  this.flavor = "팥";
}

• class 생성자 함수는 일반함수와의 구분을 위해 보통 대문자로 시작
• this가 존재함으로해서 function은 class역할을 해줄 수 있음
• 여기서 this = 기계로 부터 새로 생성되는 object들. 즉 생상자 함수 자신임. (= instance=인스턴스)

this.x = "밀가루";
// this.x = 새로 생성되는 object에 {x = '밀가루'} 를 추가해 줘

어떤 주문이 들어오든 같은 모양의 붕어빵을 뽑아내는 FishBunFrame가 만들어 졌다.

 

 

 

[새로운 객체 생성하기]

fishBunFrame를 통해 새로운 obect를 생성하고 싶을 때 주문법은 아래와 같다.

/* instance 생성 */
new FishBunFrame();

• new를 통해 this에 저장된 내용물을 객체에 적용한다.

 

다양한 변수에 새로운 객체를 할당 해보자.

var potBung = new FishBunFrame();
console.log(potBung);    // FishBunFrame {base: "밀가루", flavor: "팥"}

var chouxBung = new FishBunFrame();
console.log(chouxBung)   // FishBunFrame {base: "밀가루", flavor: "팥"}

 

new 붕어빵 (object)가 만들어 졌지만, 재료가 전부 같다.

 

 

여기서 new 붕어빵(object)에 각기 다른 재료 (value)를 넣고 싶다면?

function FishBunFrame(a, b){
  this.base = a;
  this.flavor = b;
}

• FishBunFrame함수에 parameter를 사용하여 값을 받는다.
• parameter가 a, b 값을 받으면 원하는 value를 넣어 생성할 수 있다.

 

var potBung = new FishBunFrame('밀가루', '팥')
console.log(potBung)      // fishBunFrame {base: "밀가루", flavor: "팥"}

var chouxBung = new FishBunFrame('쌀가루', '슈크림')
console.log(chouxBung)    // fishBunFrame {base: "쌀가루", flavor: "슈크림"}

 

 

:: ES6

ES6의 class를 사용해 진정한 '붕어빵기계 class'를 만들어보자.

/* ES5로 작성 */ 
/*
function fishBunFrame(a, b){
  this.base = a;
  this.flavor = b;
}
*/

/* ES6로 작성 */ 
class FishBunFrame{ // 클래스명 작성할 때,영어대문자 사용하는 관습이 있다고함
  constructor(a, b){
    this.base = a;
    this.flavor = b;
  }
}

• constructor메서드 : class 내에서 객체를 생생하고 초기화하는 메서드
  • 객체가 만들어지기 직전에 실행되는 함수 
  • 한 class당 하나의 constructor 사용가능. 2개 이상 사용시 SyntaxError유발

let potBung = new FishBunFrame('밀가루', '팥')
console.log(potBung)      // FishBunFrame {base: "밀가루", flavor: "팥"}

let chouxBung = new FishBunFrame('쌀가루', '슈크림')
console.log(chouxBung)    // FishBunFrame {base: "쌀가루", flavor: "슈크림"}

완성!

이제 FishBunFrame 클래스를 통해 비슷한 모양의 붕어빵을 지속적으로 찍어낼 수 있다.

 

 

❗️이 방법을 통하면 FishBunFrame()이 인스턴스 별로 따로 생성됨으로 자원을 낭비하게 된다.

❗️이 때 prototype 프로퍼티를 사용할 수 있다.

 

 

✅ 상속 기능 : 함수를 통해 자식을 만드는 과정을 상속관계라고 한다.

• 부모 : function, class 함수를 부모
• 자식 : new 객체를 자식

이 상속개념을 다른 식으로 구현하는게 바로 prototype문법.

 

 

 

💡tmi

왜 자꾸 붕어빵이 생각나나 했더니, 작년 스터디에서 class에 대해 배우면서 진짜 실무에서 "붕어빵틀"이라고 부른다고 배웠었다.

그 때 메모해 둔 것ㅋㅋ

 

붕어빵은 팥.붕.

 

 

 

📚참고 자료

유튜브 "코딩애플" - "객체지향 Class 문법 10분만에 이해시켜줌 (자바스크립트)"

https://youtu.be/dHrI-_xq1Vo