TIL 2020-10-23 (객체지향 JavaScript)

nyongho·2020년 10월 23일
TIL
0

JavaScript

목록 보기
7/23
post-thumbnail

Level 2-2 객체지향 JavaScript

TIL List

  • 객체지향 JavaScript

객체지향 프로그래밍은 함수들의 집합 혹은 단순한 컴퓨터의 명령어들의 목록 이라는 기존의 프로그래밍에 대한 전통적인 관점에 반하여, 관계성있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. 객체지향 프로그래밍에서, 각 객체는 메시지를 받을 수도 있고, 데이터를 처리할 수도 있으며, 또다른 객체에게 메시지를 전달할 수도 있다. 각 객체는 별도의 역할이나 책임을 갖는 작은 독립적인 기계로 볼 수 있는 것이다.

한마디로 객체(Object)를 중심으로 소프트웨어를 디자인 하는 것으로 이 개념을 배워야 하는 이유는 현실 세계를 기반으로 프로그래밍 모델을 만들 때 유용하기 때문이다.

우선 객체지향 JavaScript 의 용어를 알아야 설명할 예를 이해할 수 있으므로 용어를 먼저 소개하겠다.

1) 객체지향 JavaScript 의 용어

  • Class
    객체의 특성을 정의
  • Object
    Class의 인스턴스
  • Property
    객체의 특성(예: 색깔)
  • Method
    객체의 능력(예: 걷기)
  • Constructor
    인스턴스화 되는 시점에서 호출되는 메서드

1. 클래스 (Class)

역시 용어만 봐서는 전혀 이해가 안된다.

지금부터 예시를 들면서 각 용어를 설명할테니 편하게 읽길 바란다.

지금부터 우리는 '자동차(Car)' 라는 주제를 가지고 그 종류를 나열할 것이다.

'자동차'의 '종류'는 3가지를 꼽자면 현대 소나타, 아우디 A5, 기아 스팅어 등이 있다.

여기서 '자동차' 라는 주제는 클래스 (Class) 가 되는 것이고 아래처럼 정의할 수 있다.

  • (지금부터 나는 ES5 와 ES6 두 버전의 방법을 모두 설명할 것이다. 그래야 이 개념을 배우는 이유를 더욱 깊이 이해할 수 있다.)
  • (참고로 ES5, ES6는 자바스크립트의 업데이트 버전을 의미한다. 따라서 ES5는 이전 기술, ES6 는 현재 사용 중인 최신 기술이라고 할 수 있다.)
// 이전 ES5 버전에서 클래스는 함수로 정의해야 했다.
function Car(brand, name, color) {
  // 인스턴스가 만들어질 때 실행되는 코드
}

// 현재 ES6 버전에서는 class 라는 키워드를 이용해서 정의할 수 있다.
class Car {
 constructor(brand,name,color)
  // 인스턴스가 만들어질 때 실행되는 코드
}

constructor 란 '생성자' 라는 의미를 가지고 있으며 인스턴스를 초기화(초기값을 정하는 것)할 때 실행하는 함수이다.

2. 객체 (Object)

여기서 '종류' 는 객체(Object)이고 이걸 클래스 의 인스턴스 라고 부른다.

즉, 객체 (현대 소나타, 아우디 A5) 들이 공통적으로 가질 수 있는 상태, 정보, 행동 등에 대해 정의해 놓은 것을 클래스(자동차)라 한다.

클래스의 인스턴스는 아래와 같이 new 키워드를 통해 만들어낼 수 있다.

let sonata = new Car ('Hyundai', 'Sonata', 'Gray')
let a5 = new Car ('Audi', 'A5', 'Black')
let stinger = new Car ('Kia', 'Stinger', 'Red')

사용법은 간단하다. 클래스의 앞에 new 를 넣어주면 된다.

3. 인스턴스 (Instance)

잠깐, 여기서 인스턴스의 의미를 간단하게 알아보고 넘어가자.

인스턴스란 이해하기 쉽게 일반적인 단어로 설명하자면, 계산 문제를 '입력과 출력이 명확히 기술된 것' 으로 수학적으로 정의할 때, 계산 문제의 입력이 될 수 있는 것은 무한히 많이 존재하고 그것들 하나하나를 해당 계산 문제의 인스턴스라고 부른다.

이해하기 쉽게 설명하겠다.

  • 현대 소나타, 아우디 A5, 기아 스팅어는 객체 (Object) 이다.

  • 현대 소나타는 Car 클래스의 인스턴스다.

  • 아우디 A5는 Car 클래스의 인스턴스다.

  • 기아 스팅어는 Car 클래스의 인스턴스다.

이제 각 인스턴스를 아래와 같이 각각의 속성(Property) 와 능력(Method) 에 따라 분류해보겠다.

4. 속성 (Property) 과 능력 (Method)

속성 (Property)

  • brand
  • name
  • color

능력 (Method)

  • refuel()
  • drive()

여기까지 우리는 '자동차' 라는 주제는 클래스(Class), 각각의 종류(객체)는 인스턴스(Instance), 그리고 각각의 인스턴스를 분류 할 수 있는 두 가지는 속성 (Property) 과 능력 (Method) 이 있다는 것을 알게 됐다.

2) 클래스 사용 방법

1. 클래스 : 속성의 정의 (Property)

속성만 이용해 만든 모습이다.

(아래에서 클래스는 Car, 클래스의 속성은 brand, name, color 이다.)

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

// ES6 버전
class Car {
 constructor (brand,name,color)
   this.brand = brand;
   this.name = name;
   this.color = color;
  
}

뜬끔없이 this 라는 놈이 나와서 당황할 수 있지만 괜찮다. 여기서 this 라는 놈은 우리가 new 키워드를 통해 인스턴스를 생성했을 때 해당 인스턴스를 값으로 여기는 놈이다.( Scope 의 범위가 존재하지만 당장 깊게 알 필요는 없으니 넘어가겠다.)

만약 sonata 라는 인스턴스를 생성하면 this === sonata 가 된다고 생각하면 된다.

2. 클래스 : 능력의 정의 (Method)

능력만 이용해 만든 모습이다.

(아래에서 클래스는 Car, 클래스의 속성은 brand, name, color, 클래스의 능력은 refuel(), drive() 이다.)

// ES5 버전
function Car (brand, name, color) {
   // 생략
}

Car.prototype.refuel = function () {
   // 연료 공급을 구현하는 코드
}
Car.prototype.drive = function () {
   // 운전을 구현하는 코드
}

// ES6 버전
class Car { 
  constructor (brand, name, color)
  
  refuel() {
   // 연료 공급을 구현하는 코드
  }
  
  drive() {
   // 운전을 구현하는 코드
  }
}

아니 갑자기 prototype 은 또 뭐야.. 라고 생각하시는 분이 분명 계실거다. (나 또한 그랬으니까)
하지만 걱정 안하셔도 된다. 우선 prototype 이란 무엇인지 간단하게 알고 넘어가자.

자바스크립트는 객체지향언어이지만 클래스 방식이 아닌 프로토타입 방식의 객체지향언어입니다. 즉 인스턴스를 만드는 방법이 클래스를 사용하지 않는 것만 다르며 다른 언어와 거의 동일합니다.객체지향언어에서 흔히 사용되는 클래스(Class)가 자바스크립트에서는 프로토타입(prototype)이며 생성자 함수가 사용됩니다.

간단하게 말해서 지금 우리가 배우는 JavaScript는 Java, Python, Ruby 등의 다른 언어와 같이 '객체지향언어' 라는 점은 같았지만 본래 클래스(Class) 라는 개념이 없었다 (쟤네는 있음). JavaScript 는 이를 대신해 프로토타입(Prototype) 이라는 것이 존재 했고 이것이 JavaScript가 프로토타입 기반 언어라고 불리게 된 이유다. 이후 ES6 로 업데이트 되고 나서 지금 우리가 배우고 있는 Class 문법이 추가된 것이다. 그렇다고 해서 다른 언어와 같이 클래스 (Class) 기반으로 바뀐 것은 아니다. JavaScript 는 여전히 프로토타입 기반 언어다.

한 줄 요약: ES5 까지는 클래스(Class) 문법이 없어서 프로토타입이란 걸로 대체했는데 ES6 부터 추가됨

3. 인스턴스에서의 사용

let sonata = new Car ('Hyundai', 'Sonata', 'Gray')
sonata.color; // 'Gray'
sonata.drive(); // sonata가 운전을 시작합니다.

let a5 = new Car ('Audi', 'A5', 'Black')
a5.brand; // 'Audi'
a5.refuel(); // A5에 연료를 공급합니다.

3) 실전 예제

1. ES5 형식

위에서 배웠던 내용을 토대로 이전 ES5의 프로토타입 방식으로 간단하게 만들어 보겠다.

function Car (brand,name,color) {
 this.brand = brand;
 this.name = name;
 this.color = color;
 }
 
 Car.prototype.drive = function() {
   console.log(this.name + '가 운전을 시작합니다.'
 }
 
 let sonata = new Car('Hyundai', 'Sonata', 'Gray')
 sonata.brand; // 'Hyundai'
 sonata.drive(); // 'Sonata가 운전을 시작합니다.'

2. ES6 형식

이번에는 ES6에서 추가 된 class 문법을 사용해 만들어 보겠다.

class Car {
  constructor(brand,name,color) {
   this.brand = brand;
   this.name = name;
   this.color = color;
 }

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

let sonata = new Car('Hyundai', 'Sonata', 'Gray')
sonata.brand; // 'Hyundai'
sonata.drive(); // 'Sonata가 운전을 시작합니다.'

4) Overall

사실 위 개념을 이해하기 위해서 가장 중요한 포인트는 내가 생각하기에 '프로토타입에 대한 개념' 이다.

위에서 Car.prototype.drive() 와 같이 prototype 이란걸 사용했지만 이게 정확히 어떤 역할과 동작을 하게 되는지에 대해서 일부로 짚고 넘어가지 않았다.

왜냐하면 이걸 설명하려면 따로 새로운 글을 하나 만들어야 할 정도의 설명이 필요하기 때문이다.

하지만 지금까지 잘 따라왔다면 이해하는데 크게 어렵지는 않을 것이라고 자신한다.

profile
nyongho
두 줄 소개
이전 포스트

TIL 2020-10-22 (Closure)

다음 포스트

TIL 2020-10-24 (매개변수)

0개의 댓글