정리/Question

JavaScript 에서의 객체지향

kimddakki 2022. 6. 14. 18:42

 - 독립된 객체를 조립해서 사용하는 방식은 레고와 같이 재사용이 가능한 객체들을 많이 만들어 놓는 것이

   중요하다는 것을 알게 되고 객체의 재사용을 높이기 위해 OOP에는 아래와 같은 여러 개념들이 추가되게

   됩니다.

 

외부에서 알 필요가 없는 것들은 숨겨 놓자  => 캡슐화

 - 작은 문제를 해결하는 독립된 객체를 사용하게 되면서 객체의 모든 데이터에 접근을 해야하는 필요가 없다는

   것을 깨닫게 되었습니다.

 - 내부의 데이터는 내부에서 알아서 조작할 수 있도록 하고 외부에서는 필요한 내용만 만들어 두는 것이 프로그램의

   안정성과 사용성 측면에서 낫다는 것을 알게 됩니다.

 

 - 그래서 꼭 외부로 노출해야 되는 값과 내부에서만 사용하는 값을 구분하는 기능을 추가하도록 합니다.

 - 이를 데이터를 보호해주는 캡슐과 같은 것으로 보고 내부 데이터에 바로 접근하지 못하게 하고 필요한 메소드만

   열어두는 특성을 캡슐화라고 합니다.

 - 객체 지향 프로그래밍에서는 이런 캡슐화를 통해 객체의 안정성을 높이고 필요한 메소드만 열어둠으로써 

   객체의 재사용성을 높일 수 있도록 하였습니다.

// class
class Character {
  name = "teo.yu"
  #hp = 300
  #mp = 500

  attck() 
  useSkill() 
  moveTo(toX, toY) 
}

// object
var character = new Character();
character.name = "테오" // public한 필드는 외부에서 수정이 가능한 잠재적 위험이 있다!

// private을 이용하면 mp를 외부에서 함부로(?) 수정할 수 없게 됩니다!
character.mp = 3000 
// Error TS18013: Property '#mp' is not accessible outside class 'Human' because it has a private identifier.

 

객체의 일부분만 재사용은 어떻게 하지? => 상속

 - 객체가 중심이 되어 그것을 재사용하는 것은 좋은데 객체는 여러개의 변수와 여러 개의 함수가 섞여있어, 

   일부는 재사용을 하고 일부는 달라져야 되는 경우가 생긴다는 것을 알게 됩니다.

 - 그래서 객체의 일부분만 재사용을 하는 방법이 필요하다고 느껴지게 됩니다.

 

Ex)

1. 저글링 Class를 만들기

// class
class Zergling {
  name = "저글링"
  hp = 35

  die() {...}
  attck() {...}
  moveTo(toX, toY) {...}
}

2. 히드라 Class 만들기

 - 히드라 클래스를 만들려고 하니 저글링 클래스와 동일한 로직이 너무 많습니다.

    => hp 0 : 죽음, 땅으로 이동하는 알고리즘

 - 하지만 모션도 다르고 공격 방식도 다르고 hp도 다르다. 

 - 그래서 객체에서 공통된 부분만 따로 만들어서 그 코드를 같이 상속받아 활용하고 나머지 달라지는 것들만 각자

   코드를 작성하는 방식을 만들게 되면 어떨까 하는 생각을 가지게 됩니다.

 

상속을 받을 수 있는 객체 이름을 따로 지어주기 => 추상화!

 - 그렇다면 객체에 어떻게 공통된 부분의 코드를 만들고 이름을 붙여주어야 할까요?

class Unit {
  name = ""
  hp = 0

  die() {...}
  attck() {...}
  moveTo(toX, toY) {...}
}

class Zergling extends Unit {
  name = "저글링"
  hp = 35

  attck() {...}
}

class Hydralisk extends Unit {
  name = "히드라리스크"
  hp = 70

  attck() {...}
}

 - 저글링도 히드라리스크도 함께 포함되고 있는 속성을 가지고 있는 이름 Unit을 정의합니다.

 - 우리가 사과, 바나나를 한데 모아 과일 이라고 부르듯이 공통적인 부분을 모아서 상위의 개념으로 새롭게 이름을

   붙이는 것을 추상화라고 합니다. 이렇게 상속과 추상화를 통해 객체의 일부분을 재사용하는 방법을 찾게 되었습니다.

 

우리는 다 같이 움직이지만 각제의 방식으로 움직입니다! => 다형성!

 - 상속과 추상화를 통해 객체를 만들면 어떤 점이 좋아질까?

 

 - 스타크래프트에서 유닛들을 드래그 후 어디로 이동하는 내용을 구현한다고 생각해보자!

 - 저글링과 히드라는 각각 걸어서 이동하고 뮤탈리스크와 오버로드는 공중으로 이동할 것입니다.

   각자 이동하는 속도나 방법도 제각각이죠. 

 - 하지만 우리는 이 모든 것들을 하나의 이동이 가능한 유닛으로 취급하여 같은 타입으로 취급할 수 있게 됩니다.

let zergling1 = new Zergling()
let zergling2 = new Zergling()
let hydralisk1 = new Hydralisk()
let hydralisk2 = new Hydralisk()
let mutalisk = new Mutalisk()
let overload = new Overload()

let units = [zergling1, zergling2, hydralisk1, hydralisk2, mutalisk, overload]

// 모두 같은 이름의 moveTo 메소드를 호출하지만 각자의 방식대로 동작한다.
units.forEach(unit => unit.moveTo(300, 400))

 - 이렇듯 추상화된 유닛이라는 타입은 저글링과, 히드라, 오버로드 등 하위 타입인 여러가지 타입으로 참조 할 수 있다는

   개념이 바로 다형성입니다.

 

 - 상속과 추상화 그리고 Unit의 메소드를 사용하지만 각자의 정의된 방식만 있다면 각자의 방식대로 동작할 수도 있도록

   하는 다형성을 통해서 객체의 일부분만 재사용이 가능하도록 설계되었습니다.

 


 

 

자바스크립트에서 객체 지향을 하는 게 맞나요? | 요즘IT

이번 글에서는 객체지향 프로그래밍에 대해 이야기를 해보려고 합니다. 그리고 자바스크립트의 객체지향은 일반적인 객체지향 프로그래밍과는 어떻게 다른지 그리고 Javascript에서는 객체지향

yozm.wishket.com