JavaScript TIL 14

2021년 7월 19일에 작성된 문서 2번 입니다.
javascript 배운 내용을 정리했습니다.

객체 지향 프로그래밍

절차적 언어

• 초기의 프로그래밍 언어들 (C, 포트란 등)
• 절차적인 언어는 순차적인 명령들의 조합이다.

객체 지향적 언어

• "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성
• 현대의 프로그래밍 언어들 (JAVA, C++, C# 등)
• JavaScript: 객체 지향으로 작성이 가능하다

OOP

• 프로그램 설계 철학
• 모든 것은 "객체"로 그룹화
  • 한번 만들면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지
• 4가지의 주요 개념을 통해 재사용성을 얻을 수 있다.

클래스와 인스턴스

• 클래스는 일종의 원형. (객체 생성용 청사진)
  • 세부 사항(속성)이 들어가지 않은 청사진
  • 세부 사항만 넣는다면, 객체가 되는 것
• 인스턴스는 클래스의 사례.
  • 클래스를 통해 만들어진 객체
• 클래스는 객체를 만들기 위한 생성자를 포함한다.

  아래의 예시 사진을 참고하자

OOP

Encapsulation (캡슐화)

• 데이터와 기능을 한 단위로 묶는 것
  • 데이터(속성)와 기능(메소드)을 하나의 객체 안에 넣어서 묶는 것
• 은닉(hiding) : 구현은 숨기고, 동작은 노출시키는 것
  • 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것
  • 디테일한 구현이나 데이터는 숨기고, 객체 외부에서 필요한 동작(메소드)만 노출
• 느슨한 결합(loose coupling)에 유리 : 언제든 구현 수정 가능
  • 느슨한 결합 : 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합

캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높입니다.

Abstraction (추상화)

• 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다
  • 많은 기능이 노출되지 않아 예기치 못한 변화가 일어나지 않도록 만들 수 있다.
• 추상화 VS 캡슐화
  • 캡슐화: 코드나 데이터의 은닉에 포커스
  • 추상화: 클래스를 사용자가 불필요한 메소드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스.
• 클래스 정의 시, 메소드와 속성만 정의한 것을 인터페이스라고 부른다.
  • 추상화로 인터페이스가 단순해진다.

    불필요한 코드를 줄여 재사용성을 높입니다.

Inheritance (상속)

• 부모 클래스의 특징을 자식 클래스가 물려받는 것
• 기본 클래스(base class)의 특징을 파생 클래스(derive class)가 상속받는다

  코드가 복잡하지 않게 만들고, 단순화된 사용으로 인해 변화에 대한 영향을 최소화합니다

Polymorphism (다형성)

• 객체 역시 똑같은 메소드라 하더라도, 다른 방식으로 구현될 수 있다.

  동일한 메소드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해집니다.

아래의 그림을 통해 한 눈에 보자.

클래스와 프로토 타입

Action Items

OOP 패턴으로 구현한 Human 예시

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

// 실습해보세요
Human.prototype.constructor === Human; // 결과 => true
Human.prototype === kimcoding.__proto__; // 결과 => true
Human.prototype.sleep === kimcoding.sleep; // 결과 => true

다음 그림은 반드시 기억하세요.

Human 클래스, 인스턴스, 프로토타입의 관계

• 배열 역시 원리가 동일하다.
  • 배열을 Array 클래스의 인스턴스로 생각
  • 프로토타입에 다양한 메소드가 존재.

Array(배열) 클래스와 인스턴스, 그리고 프로토타입의 관계

프로토타입 체인

객체 지향 프로그래밍의 특성 중 "상속"을 JavaScript에서 구현할 때에는 프로토타입 체인을 사용합니다.

let kimcoding = new Human('김코딩', 30);

// 속성
kimcoding.age;
kimcoding.gender;
// 메소드
kimcoding.eat();
kimcoding.sleep();

// 학생(Student)과 사람(Human)이라는 클래스가 각각 존재한다고 가정
// 클래스 Human의 메소드와 속성을 객체로 구현

• 클래스 Student는 Human의 기본적인 메소드를 상속받을 수 있다.

// 클래스 Student의 속성과 메소드 예시
let parkhacker = new Student('박해커', 22);

// 속성
parkhacker.grade;
// 메소드
parkhacker.learn();

• 부모 클래스(여기서는 Human) : 속성과 메소드를 물려주는 클래스
• 자식 클래스(여기서는 Student) : 속성과 메소드를 물려받는 클래스
• 그리고 이 과정을 상속이라고 한다.
• 자바스크립트에서는 extends 와 super 키워드를 이용해서 상속을 구현할 수 있다.

Written with StackEdit.