개요

객체 지향 프로그래밍은 사람이 보고 이해하는 방법과 매우 흡사합니다. 코드를 추상화하여 직관적으로 생각할 수 있기 때문입니다.
하지만 다른 프로그래밍 언어(Java, C# 등)에 비해 자바스크립트에서 OOP를 구현하는 방법은 조금 독특합니다.
객체 지향 프로그래밍은 절차 지향 프로그래밍과 다르게 데이터와 기능을 한곳에 묶어서 처리합니다.
속성과 메서드가 하나의 "객체(인스턴스 객체)"라는 개념에 포함되며 클래스(Class) 라는 이름으로 부릅니다.
object랑 다른데 object랑 클래스의 차이가 뭐지 어떻게 정확하게 구분하지?
객체라는 단어의 뜻은 같지만 클래스에서 파생된 객체는 인스턴스 객체; 인스턴스라고 부르네요
그리고 class는 클로저 모듈 같은 역활을 하네요*

---

학습 목표

• 클로저 모듈 패턴에 대해 설명할 수 있다.
• 클래스와 인스턴스에 대해 설명할 수 있다.
• 클래스 문법을 이용할 수 있다.

---

클로저 모듈 패턴

• 메서드 호출
  • 객체.메서드() 와 같이 객체 내의 메서드 호출하는 방법을 의미합니다.
  • 메서드 호출 방식에는 화살표 함수를 쓰지 않습니다.
    • 화살표함수는 자신의 this 가 없습니다.
    • 대신 화살표 함수를 둘러싸는 렉시컬 범위의 this 가 사용됩니다.
  • 예시

const counter1 = {
  value: 0,
  increase: function() {
    this.value++; // 메서드 호출을 할 경우, this는 counter1을 가리킵니다.
  },
  decrease: function() {
    this.value--;
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase();
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.getValue(); // 2

• 클로저를 이용해 매번 새로운 객체 생성 (클로저 모듈 패턴)
  • 위의 counter1은 새로운 객체를 생성할 수 없습니다.
  • 따라서 여러개의 counter가 필요할때 재사용성 및 효율이 떨어집니다.
  • 이를 해결하기위해 클로저 모듈패턴을 이용 할 수 있습니다.
  • 예시

function makeCounter() {
  let value = 0;
  return {
    increase: function() {
      value++;
    },
    decrease: function() {
      value--;
    },
    getValue: function() {
      return value;
    }
  }
}

const counter1 = makeCounter();
counter1.increase();
counter1.getValue(); //1

const counter2 = makeCounter();
counter2.decrease();
counter2.decrease();
counter2.getValue() // -2

---

클래스와 인스턴스

• 객체 지향 프로그래밍의 기초가 되는 용어
• 클래스 : 청사진, 설계도의 역할
• 인스턴스 : 클래스를 바탕으로 한 객체

• 클래스 생성 방법 (ES6 이전과 이후로 구분됩니다.)

  • 인스턴스 생성할때 사용되는 생성자(constructor) 함수가 있습니다.

    // 클래스 생성 (ES6 이전)
    function Car(color) {...};
    
    // 클래스 생성 (ES6 이후)
    class Car {
      constructor(color) {...};
    }

• 인스턴스 생성 방법

  • 함수를 정의하는 것과 비슷하지만 new 키워드를 사용해서 만듭니다.

  • 생성자 함수가 실행되며 변수에 클래스의 설계를 가진 인스턴스가 할당됩니다.

    • 각 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 됩니다.
    • 각 인스턴스의 속성값은 분리되어 있습니다.

  • 예시

    // 클래스 생성 (ES6 이후)
    class Car {
      constructor(color) {...};
    }
    
    // 인스턴스 생성
    const avante = new Car('blue');
    const mini = new Car('cyan');
    const beetles = new Car('red');

• 속성과 메서드
  • 속성 : 브랜드, 차 이름, 색상, 최고 속력, 현재 연료 등
  • 메서드 : 객체에 딸린 함수; 속력 설정, 연료 주입, 운전 등
  • 위와 같이 객체지향 프로그래밍은 현실 세계 기반으로 프로그래밍 모델 만들 때 유용합니다.

• 클래스 속성의 정의 (this)

  • this : 인스턴스 객체를 의미합니다.

  • parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값입니다.

  • 예시

    // THIS 활용한 클래스 생성 (ES6)
    
    class Car {
      constructor(brand, name, color) {
        this.barnd = brand;
        this.name = name;
        this. color = color;
      }
    }

• 클래스 메서드 정의
  • ES6 이전과 이후로 구분 됩니다.

    • ES6 이전 : prototye 키워드를 사용해야 합니다.

    • ES6 이후 : 일반적인 함수 정의 방법을 사용합니다.

    • 예시

      // ES6 이전
      
      function Car(brand, name, color) {
        ...
        Car.prototype.refuel = function() {...}
        Car.prototype.drive = function() {...}
      }
      
      // ES6 이후
      class Car {
        constructor(brand, name, color) {...}
        refuel() {...}
        drive() {...}
      }
      

• 클래스 종합 활용 예시

// ES6 기준

class Car {
    constructor(brand, name, color) {
      this.brand = brand;
      this.name = name;
      this.color = color;
    }
    refuel() {
      console.log(`${this.name}에 연료를 공급합니다`)
    }
    drive() {
      console.log(`${this.name}가 운전을 시작합니다`)
    }
}

const avante = new Car('Hyundai', '아반떼', 'black');
const mini = new Car('BMW', '미니', 'blue');

console.log(avante.color); // 'black'
avante.drive(); // '아반떼가 운전을 시작합니다'

console.log(mini.brand); // 'blue'
mini.refuel(); // '미니의 연료를 주입합니다'

• 객체지향 관련 용어

  • constructor
    • 인스턴스가 초기화될 떄 실행되는 생성자 함수

  • this
    • new 키워드로 생성된 인스턴스에서 해당 인스턴스가 this의 값이 됩니다.
    • 함수가 실행될 때 해당 스코프마다 생성되는 고유한 실행 context (excution context)
  • prototype
    • original form, 원형 객체(모형)

    ---

• 이미 사용하던 클래스의 종류

  • 우리가 그동안 만들었든 배열은 전부 Array 클래스의 인스턴스입니다.

  • arr.length : Array 클래스 속성 중 하나

  • arr.push() : Array 클래스 메서드 중 하나

  • 배열만드는 방법 예시

    // 일반적인 방법
    const arr = ['취업', '성공', '가자'];
    
    // 인스턴스 생성
    const arr = new Array('취업', '성공', '가자];
    
    //// 위의 두가지 방법은 동일한 배열을 생성합니다.
    //// 우리가 그동안 배열을 만들었던 것이 Array 클래스를 사용하여 인스턴스를 만들었던 것임을 알 수 있습니다.

---

마치며

  제가 자바스크립트를 접하게 되면서 제일 궁금했던 분야 중의 하나였습니다. 수업일정을 보면서 오늘을 정말 기대 했었습니다.

  이전에 자바스크립트의 클로저 모듈을 배우면서 클래스와 차이가 무엇인지 궁금 했었습니다.

  오늘 학습 첫 부분에 클로저 모듈을 다시 살펴보면서 객체지향에 대해서 접근하는 것을 보고 위의 궁금했던 부분이 정확하게 해결되었고 용어에 대해서 정확히 공부할 수 있어서 너무 좋은시간이였습니다.

+  클로저 함수에 대해 학습하고 오늘 수업 전까지 개인공부를 하다가 예전에는 클로저 함수가 클래스를 대체해서 사용되고 있었고 자바스크립트에 클래스가 업데이트된 이후에는 이전에 클래스를 대체해 클로저 함수가 사용되던 것이 클래스로 사용되고 있다고 보았습니다. 클로저 함수는 this를 사용할 수 없기 때문에 문제가 생길 수 있다는 것을 봤던것 같습니다.

---