[JS/Node] 객체 지향 JavaScript

객체 지향 프로그래밍

데이터와 기능을 한 곳에 묶어서 처리

객체

클래스
속성과 메소드가 하나의 "객체"에 포함됨

OOP(Object-oriented programming)

(사람이 세계를 보고 이해하는 방법과 매우 흡사함)
코드를 추상화하여 직관적으로 생각할 수 있기 때문에, 이미 오래 전부터 프로그래밍 방법론으로 매우 빠르게 적용되었습니다.

---

클래스를 이용한 모듈화

Achievement Goals

• 클래스와 인스턴스라는 용어를 이해할 수 있다.
  • new 키워드의 사용법을 이해할 수 있다.
  • class 키워드의 사용법을 이해할 수 있다.
  • 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인할 수 있다.
• 객체 지향 프로그래밍 특징을 이해할 수 있다.
  • 캡슐화
  • 상속
  • 추상화
  • 다형성
• JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다.
  • Prototype이 무엇인지 이해할 수 있다
• 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다.
  • 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다.
  • 클래스 상속의 원리를 이해할 수 있다.
  • Prototype chain을 이해하고 설명할 수 있다. __proto__

Before you Learn

• [JS/Node] 배열, 객체 - Chapter - 객체
• 객체, 키, 값 용어에 대한 이해
  • 속성(property)이라는 용어는 '키-값 쌍'을 의미합니다.
• 객체에 속성 추가/수정/삭제 방법
• 클로저 함수

메소드 호출

객체 내에 메소드를 호출하는 방법

Singleton 패턴

메소드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않습니다.

closure module 패턴

메소드 호출 실습하기

OOP

하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체(인스턴스)를 만드는 프로그래밍 패턴

클래스

객체를 생성하기 위한 아이디어 또는 청사진

클래스 작성 규칙

일반명사,대문자로 시작

일반 함수 선언시, 함수명을 동사로 시작하는 것이 이 둘을 구분하기에 좋다.

함수 실행 방법

new 연산자

인스턴스(인스턴스 객체)

청사진을 바탕으로 한 객체

특징

각각의 인스턴스는 클래스의 고유한 속성과 메소드를 갖게 됩니다.

new 키워드

새로운 인스턴스 객체를 만드는 방법

new 키워드 사용 시 this의 의미***

'인스턴스 객체'(자기 자신)

지금 단계에선 조금 어설프게 알아도 괜찮다.

Reference Code

// Class : 청사진을 만드는 함수
function House(kind) {}

// Instance : 인스턴스 생성(함수 실행 방법)
// '아파트', '빌라', '단독주택' 인스턴스 생성
// 즉시, 생성자 함수 실행 => 변수에 인스턴스 할당
let apartment = new House('apartment');
let villa = new House('villa');
let house = new House('house');

Class 문법

ES5

// Class 생성
function Apartment (brand, floor, color) {
  /* 인스턴스가 만들어질 때 실행되는 코드 */
}

ES6

// Class 생성
class Apartment {
  // 생성자 함수
  constructor(brand, floor, color){ 
  /* 인스턴스가 만들어질 때 실행되는 코드 */
  }
}

생성자 함수

인스턴스가 만들어질 때(초기화될 때) 실행되는 코드
인스턴스의 세부사항(속성)을 정의

방법

함수에 인자를 넣듯, 생성자 함수에 인자로속성을 넣어준다.

특징

리턴값을 갖지 않음

생성자가 하는 일

해당 인스턴스 객체의 속성을 할당한다

(심화 학습) Javascript constructor

인스턴스를 호출했을 때, 가장 먼저 실행되는 것이 constructor다.

---

속성과 메소드

클래스에 속성과 메소드를 정의하고, 인스턴스에서 사용함

속성

정보

메소드

객체에 딸린 함수

속성 정의

ES5

// Class 생성
function Apartment (brand, floor, color) {
  /* 인스턴스가 만들어질 때 실행되는 코드 */
  this.brand = brand;
  this.floor = floor;
  this.color = color;
}

ES6

// Class 생성
class Apartment {
  
  // 속성 정의
  // 생성자 함수
  constructor(brand, floor, color){ 
  /* 인스턴스가 만들어질 때 실행되는 코드 */
  this.brand = brand;
  this.floor = floor;
  this.color = color;
  }
}

this

만들어지는 인스턴스 객체를 가리킴

메소드 정의

ES5 - prototype 키워드

// Class 생성
function Apartment (brand, floor, color) {
  /* 인스턴스가 만들어질 때 실행되는 코드 */
  this.brand = brand;
  this.floor = floor;
  this.color = color;
}

// Method 정의
Apartment.prototype.clean = function() {
  // '아파트 청소'를 구현하는 코드
}

Apartment.prototype.maintain = function() {
  // '하자 보수'를 구현하는 코드
}

ES6 - constructor, this

// Class 생성
class Apartment {
  // 속성 정의
  // 생성자 함수
  constructor(brand, floor, color){ 
  /* 인스턴스가 만들어질 때 실행되는 코드 */
  this.brand = brand;
  this.floor = floor;
  this.color = color;
  }
  
  // Method 정의
  
  clean() {
    // '아파트 청소'를 구현하는 코드
  }
  
  maintain() {
    // '하자 보수'를 구현하는 코드  
  }
}

prototype

class를 만들 때 쓰는 원형 객체

constructor

인스턴스가 초기화될 때 실행하는 생성자 함수
인스턴스의 세부사항(속성)을 정의

방법

함수에 인자를 넣듯, 생성자 함수에 인자로속성을 넣어준다.

this

함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context(execution context)
new 키워드로 인스턴스를 생성했을 땐, 해당 인스턴스가 this의 값이 됨

정의한 속성과 메소드를 인스턴스에서 사용

// 속성과 메소드를 '인스턴스'에서 사용
  let prugio = new Apartment('prugio', 30, 'blue');

  let raemian = new Apartment('raemian', 33, 'green')

  let hyundai = new Apartment('hyndai', 22, 'indianred');

---

객체지향프로그램의 주요 개념

캡슐화

데이터와 기능(속성과 메소드)을 한 객체에 묶는 것

은닉화

필요성

보안 관련된 거라기 보단,
다른 코드가 내 코드에 영향을 미치지 않게 만들어 놓은 것.
A 객체가 B객체에 영향을 미치려면, 메소드를 호출시켜야 하는 것이지,
속성이나 메소드를 직접 공유하면 안 된다.

상속

다형성

내부 데이터 or 구현에 대해 외부로 노출시키지 않게 만드는 것

인스턴스 B 메소드를 사용한다고 해서,
인스턴스 A 속성이 변하지 않는다는
확신을 갖고 개발을 할 수 있다

느슨한 결합

코드만 보고도 인스턴스 객체의 기능을 상상할 수 있게 작성하는 것
(코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아님)

추상화

인터페이스의 단순화
내부 구현은 아주 복잡한데 실제로 노출되는 부분은 단순하게 만든다.

인터페이스: 클래스 정의 시, 메소드와 속성만 정의한 것

상속

부모 클래스의 특징을 자식 클래스가 물려받는 것

다형성

같은 이름을 가진 메소드라도 조금씩 다르게 작동하는 것
하나의 클래스에서 구현에 따라 인스턴스의 속성과 메소드가 다르다.

Must know concepts

• 추상화와 캡슐화는 어떻게 다른가요?
• 인터페이스(Interface)란 무엇일까요?
• JavaScript에서 class 키워드를 사용하면, 메소드의 은닉이 가능한가요?

암기

// ES5
function Car(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
}

Car.prototype.drive = function(){
    console.log(this.name + '가 운전을 시작합니다');
}

let avante = new Car('hyndai', 'avante', 'white');
avante.color; // 'white'
avante.drive(); // 'avante가 운전을 시작합니다'
// ES6
class Car {
    constructor(brand, name, color) {
        this.brand = brand;
        this.name = name;
        this.color = color;
    }

    drive(){
        console.log(this.name + '가 운전을 시작합니다')
    }
}

let avante = new Car('hyundai', 'avante', 'white');
avante.color;
avante.drive();

// Car: class
// this 객체: 이 예제에서는 avante === this

// constructor: 생성자 함수

// Car.protoype(prototype 객체): 여기에 속성이나 메소드를 정의함

// avante: 인스턴스

---