[JavaScript #14] Basic of JavaScript - 객체지향 class

객체지향 프로그래밍

• 객체지향이란 OOP(Object-oriented Programming)라 부르는 프로그래밍의 패러다임으로 변수나 반복문, 함수와 같은 기존 프로그래밍 패러다임을 대체하는 것이 아닌, 프로그래밍 언어로 만들어진 로직을 조금 더 부품답게 만드는(=모듈화) 기법이다. (출처: 생활코딩 링크텍스트)
• 이를 위해 자바스크립트에서는 프로그램을 객체들로 구성하고, 객체들 간에 상호 작용 하도록 만들어 준다.
• 객체는 특정 로직을 갖고 있는 행동(method)와 변경 가능한 상태(멤버 변수)를 갖는다.
• 원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 공장처럼 찍어낼 수 있는 것!
• 비슷한 모양의 객체를 계속 만들 때 사용하는 것이 Class라는 설계도다.

객체지향 사용 예시

• 게임정보제공 서비스를 만든다고 가정해보자. 게임에 등장하는 캐릭터 정보를 보여준다고 했을 때, 우선 캐릭터에 대한 정보를 JavaScript의 Object 자료형으로 정리할 수 있다.

 var nunu = {
   q: 'consume',
   w: 'snowball'
 }
 
 var garen = {
   q: 'strike'
   w: 'courage'
 }
 // 이렇게 비슷한 구조의 object를 많이 만들어야 할 때 사용하는 것이 Class!

Class(ES6)

• JavaScript에서 class는 객체를 뽑는 기계라고 할 수 있다.
• class가 생기기 전 JavaScript에서는 함수형을 사용했고, 이후 ES6 문법에 class가 추가되었다.

 function machine(skill, power) {
 	this.q = skill;
    this.w = power;
 }
 
const nunu = new machine('consume', 'snowball')
console.log(nunu)
/*
machine {
  q: 'consume',
  w: 'snowball',
  __proto__: { constructor: ƒ machine() }
}
*/

• 객체 내부에서, 해당 객체의 프로퍼티에 접근하려면 this 키워드를 쓴다.
  -this는 instance라고 부르며, 위의 식으로 생성되는 Object, 즉 새로 생성된 오브젝트를 의미한다.
• this가 생기면 class형이라고 볼 수 있고, clasa 유형과 동일하다.

생성자(Constructor)

• function과 class는 문법이 비슷한데, 가장 큰 차이가 constructor라는 생성자 함수의 유무다.
• class로 객체를 생성하는 과정을 '인스턴스화'라고 부르고, class를 통해 생성된 객체를 인스턴스(instance)라고 한다.
  const nunu = new Hero('consume', 'snowball')
• class는 새로운 인스턴스를 생성할 때마다 constructor() 메서드를 호출한다.

 class Hero() {
   constructor(skill, power) {
   this.q = skill;
   this.w = power;
   }
 }

• Hero는 class 이름으로 항상 대문자로 시작하고, CamelCase 표기법을 따른다.
• Hero class의 instance를 생성할 때마다 constructor() 메서드가 호출된다.
• constructor() 메서드는 skill, power 2개의 argument(인자)를 받는다.
• constructor() 메서드에 this 키워드를 사용한다. class의 실행범위(context)에서 this는 해당 instance를 의미한다.
• constructor() 에서 인자로 넘어오는 skill과 power를 사용해 Hero instance의 skill, power 프로퍼티에 값을 할당한다.
  => 이와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부릅니다. 멤버 변수는 this 키워드로 접근한다.

인스턴스(Instance)

• 인스턴스(Instance)는 class를 통해 새롭게 생성된 객체이다.
• 인스턴스는 class의 property 이름과 method를 갖는 객체로, 인스턴스마다 모두 다른 프로퍼티 값을 갖고 있다.

const nunu = new Hero('consume', 'snowball')

• 인스턴스는 class 이름에 new를 붙여서 생성한다.
• new 키워드는 constructor() 메서드를 호출하고 새로운 인스턴스를 return 해준다.
• 클래스 이름 우측에 괄호()를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨준다.
• Hero 클래스에 새로운 instance를 생성하려면 같은 방식으로 new 키워드를 이용해 생성!

const garen = new Hero('strike', 'courage')

메서드(Methods)

• 메서드는 함수다. 객체가 프로퍼티 값으로 갖고 있는 것을 메서드라고 부른다.
• class는 프로퍼티마다 세미콜론(;)으로 구분한다.

Assignment

• MyMath 라는 class를 생성해주세요.
• constructor 에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
• 총 4개의 메서드를 구현해주세요.
  getNumber : 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 → ex) [1, 2]
  add : 두 개의 숫자를 더하는 메서드
  substract : 두 개의 숫자를 빼는 메서드
  multiply : 두 개의 숫자를 곱하는 메서드

class MyMath {
  constructor(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
  }
  getNumber() {
    return [this.num1, this.num2];
  }
  add() {
    return this.num1 + this.num2;
  }
  substract() {
    return this.num1 - this.num2;
  }
  multiply() {
    return this.num1 * this.num2;
  }
}