Javascript | 객체 지향 프로그래밍

Jae ·2021년 8월 22일

Javascript

목록 보기

14/14

✅ Achievement Goals

클래스와 인스턴스라는 용어를 이해할 수 있다.

new 키워드의 사용법을 이해할 수 있다.

class 키워드의 사용법을 이해할 수 있다.

현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인할 수 있다.

객체 지향 프로그래밍 특징을 이해할 수 있다.

캡슐화(encapsulation)

상속(inheritance)

추상화(abstraction)

다형성

JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다.

Prototype이 무엇인지 이해할 수 있다

객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다.

상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다.

클래스 상속의 원리를 이해할 수 있다.

Prototype chain을 이해하고 설명할 수 있다. (__proto__)

객체지향 프로그래밍
1) 객체지향, 왜 좋을까?
2) OOP 특성 이해하기
객체지향 프로그래밍 (패러다임) 유행?
패러다임 -> 그 시대에 (좋다고 인정되어) 유행하는 사고방식
프로그래밍 패러다임 -> 그 시대에 (좋다고 인정된) 개발하는 방식

객체지향, 왜 좋을까?
절차지향, 왜 안 좋을까?
자바스크립트 객체지향적으로 쓰기
1) ES6 클래스 문법 사용하기
2) 프로토타입으로 클래스 구현하기
extends super
클래스를 통해 인스턴스 객체를 만들면 인스턴스 객체는 prototype의 내용을 참조하고 있다.

캡슐화를 시키면 은닉화 할 수 있다.

OOP 특성 - 2. 추상화 : 버튼을 만드는 과정. 내부 구현은 복잡, 실제 노출 부분은 단순

인터페이스 : 추상화 된 버튼

class 사람

객체 지향 프로그래밍

자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향의 멀티-패러다임 언어다.

현실 세계에서 우리는 무언가를 인식할 때 그것의 특성 또는 성질을 통해 그것을 인식하고 다른 것들과 구별한다. 실체는 특성이나 성질로 나타내어지는 속성(property)을 가지고 있고, 그것으로 하여금 실체가 실체로써 인식될 수 있다.

자바스크립트는 클래스 없이 별도의 객체 생성 방법이 존재한다.

객체 리터럴
Object() 생성자 함수
생성자 함수

// 객체 리터럴
let obj1 = {};
obj1.name = 'kim';

// Object() 생성자 함수
let obj2 = new Object();
obj2.name = 'kim';

// 생성자 함수
function A() {}
let obj3 = new A();
obj3.name = 'kim';

자바스크립트에서는 함수 객체로 많은 것을 할 수 있는데 클래스, 생성자, 메소드도 모두 함수로 구현이 가능하다.

생성자 함수와 인스턴스 생성

자바스크립트는 생성자 함수와 new 연산자를 통해 인스턴스를 생성할 수 있다. 생성자 함수는 클래스 + 생성자 역할을 수행한다.

// 생성자 함수(Constructor)
function Person(name) {
  // 속성(property)
  this.name = name;

  // 메소드
  this.setName = function (name) {
    this.name = name;
  };

  // 메소드
  this.getName = function () {
    return this.name;
  };
}

// 인스턴스의 생성
let myName = new Person('kim');
console.log(me.getName()); // kim

// 메소드 호출
myName.setName('Kim');
console.log(myName.getName()); // kim

객체 지향 프로그래밍(OOP, Object-oriented programming) 은 실제로 존재하고 인지할 수 있는 객체(Object)를 소프트웨어의 세계의 관점에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추상화(abstraction)를 통해 모델링 하는 프로그래밍 방법론이다.

객체지향 프로그래밍은 절차 지향 프로그래밍과는 달리, 서로 관계성이 있는 데이터와 기능을 한 곳에 묶어서 처리한다.

속성과 메소드가 하나의 "객체"라는 개념에 포함되며, 이는 자바스크립트 내장 타입인 object(이하, object literal)와는 다르게, 클래스(Class)라는 이름으로 부른다.

class 를 이용하면 사물과 물체들을 유연하고 유지보수가 용이하고, 확장성 측면에서도 유리한 프로그래밍이 가능하기에 대규모 소프트웨어 개발에서도 널리 사용되고 있다.

Class & Instance

class 는 서로 연관된 데이터들을 한 곳에 담아놓은 상자 같은 역할을 수행하고, insatance 는 상자에 들어갈 데이터들을 의미한다.

만약에 어떤 웹 서비스를 만들 때, 입력되는 데이터가 별로 없다면 그냥 일반적인 object 의 형태로 입력해도 큰 문제가 없을 것이다. 하지만 데이터의 양이 100 개 이상만 돼도 데이터를 일일이 입력해야 되고, 시간도 많이 걸리고 비효율적이다.

이런 상황에서 데이터를 효율적으로 처리하기 위해
class 와 instance 를 이용한다.

이해하기 쉽게 롤이라는 게임의 정보를 제공하는 OP.GG나 fow 같은 웹사이트를 예시로 들어보자. 이 두 웹사이트는 챔피언들의 데이터를 정리해서 보여주는 서비스를 제공하는데, 이 데이터를 제공하기 위해서는 먼저 각각의 챔피언 정보를 담아야 한다.

롤에는 여러 챔피언이 존재하는데, 챔피언들은 총 네 개의 기본 스킬과 두 개의 소환사 주문 스킬을 갖고 있다. 만약 챔피언의 이름과 기본 스킬 정보만을 object 로 나타내자면 이런 형태로 나타낼 수 있다.

// 챔피언 이름
let garen = {
  // 기본 스킬
  q : 'Strike',
  w : 'Courage',
  e : 'Judgement',
  r : 'Demacian Justice'
}

let darius = {
  q : 'Decimate',
  w : 'Crippling Strike',
  e : 'Apprehend',
  r : 'Noxian Guillotine'
}

지금 입력한 데이터는 두 명의 챔피언 밖에 안되지만 전체 챔피언 수는 156 명이나 되고 다 입력하려면 시간이 엄청 소요된다. 하지만 class 문법을 이용하면 아래처럼 전체 데이터를 간단하게 나타낼 수 있다.

Class & Instance의 활용

클래스 문법을 사용할 때 두 가지 방식이 있는데, 보통 최신 문법인 ES6 문법을 사용한다. 여기서 class는 object를 뽑아내는 기계라고 간단하게 생각하면 된다.

ES5 문법

클래스는 함수로 정의할 수 있다.

function Champion(){ // <- class
  this.q : 'Strike',
  this.w : 'Courage',
  this.e : 'Judgement',
  this.r : 'Demacian Justice'
}

ES6 문법

ES6에서는 class 라는 키워드를 이용해서 정의할 수도 있다. 최근에는 이 문법을 주로 사용한다.

class 명을 작명할 때는 보통 일반명사로 쓰고 첫 글자를 대문자로 작성한다.
class Champion(){                    
  constructor(){   
    this.q : 'Strike',
    this.w : 'Courage',
    this.e : 'Judgement',
    this.r : 'Demacian Justice'
  }
}

this는 뭘까?

여기서 this 를 사용하는 것은 새로 object를 생성하는 것과 같다. '이 object에 {q:'Strike'} 추가해줘.' 라고 명령하는 것이다.

위 코드에서 this는 class Champion()의 역할을 대신 수행한다. class Champion()이라는 기계로부터 생성되는 object 보통 이것을 instance라고 부른다.

let garen = new Champion('Strike', 'Courage', 'Judgement', 'Demacian Justice'); 
let darius = new Champion('Decimate', 'Crippling Strike', 'Apprehend', 'Noxian Guillotine');

// 이렇게 챔피언의 이름을 변수명으로 설정하고, class 함수를 할당한 후 
// parameter(인자)에 스킬명을 적어주면 아래의 object 형태처럼 생성된다. 
// 이렇게 입력하면 아래의 여섯 줄이나 되는 데이터를 한 줄로 줄일 수 있다.
// 위에 보이는 class Champion() 함수를 실행하라는 것과 같다.

--- 챔피언 데이터 ---
                         
let garen = {
  q : 'Strike',
  w : 'Courage',
  e : 'Judgement',
  r : 'Demacian Justice'
}

let darius = {
  q : 'Decimate',
  w : 'Crippling Strike',
  e : 'Apprehend',
  r : 'Noxian Guillotine'
}

class Person {
  name; // 속성 (field)
  age;
  speak(); // 행동 (method)
}

class 안에서도 내부적으로 보여지는 변수와 밖에서 보일 수 있는 변수들을 나누어놓는 것을 캡슐화(encapsulation)라고 한다. 그리고 class를 이용해서 상속과 다양성이 일어날 수 있는데, 이런 모든 것들이 가능한 것이 바로 객체지향 언어이다.

클래스와 인스턴스에 대해서 비유를 해보자면, 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 여기서 비유된 청사진은 class, 청사진을 바탕으로 한 객체는 instance라고 부른다.

클래스 함수 vs 일반적 함수

class function : 대문자 명사

// class
function DesignTeam(role) { 
  // instance
  let jae = new DesignTeam('frontend')
  let laura = new DesignTeam('design')
  let tim = new DesignTeam('marketing')
}

normal function : 소문자 동사

function work() {}

객체를 만들 때는 일반적인 함수를 정의하듯 만든다. 새로운 instance를 생성하기 위해서는 new keyword를 쓴다. 이때 class를 그냥 함수로 정의하면, 다른 일반적인 함수와 구분하기가 다소 어려울 수 있다. 그래서 보통의 class는 대문자, 일반명사로 만든다. 반대로 일반적인 함수를 만들 때는 소문자로 시작하는 적절한 동사의 형태를 입력하는 것이 권장된다.

클래스 함수 사용

클래스를 만드는 새로운 문법인 class 키워드가 ES6(ECMAScript 6)에 도입이 되었다. 아래 ES6에서 쓰여진 함수는 객체지향 프로그래밍에서 Constructor(생성자) 함수라고 부른다. 여기서 생성자 함수는 return값을 만들지 않는다.

ES5

ES5 클래스는 함수로 정의할 수 있다.
function Car(brand, name, color) {
  // 인스턴스가 만들어질 때 실행되는 코드
}

ES6

ES6에서는 class라는 키워드를 이용해서 정의할 수 있다. *(ES6 방법을 주로 사용한다.)
class를 만들고 object를 생성할 때 필요한 데이터를 전달인자로 지정한다. 전달

class Car {
  constructor(brand, name ,color) {
    // 인스턴스가 만들어질 때 실행되는 코드
  }
}

클래스 속성

생성된 instance에 속성을 부여하기 위해서 this라는 키워드를 사용한다. 여기서 this는 instance 객체를 의미한다. parameter로 지정된 brand, name, color는 instance 생성시 지정하는 값이고, 위의 예시처럼 this에 할당하는 것은 만들어진 instance에 해당 인자 brand, name, color를 부여하겠다는 의미다.