Class

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

어떻게 쓰이는 거임 ??

롤 하는 사람이면 op.gg 나 lol.ps 와 같은 사이트는 알고 있을것이다.
이와 같은 사이트를 만들 때 챔피언의 정보를 담아야 한다고 가정해보자. 롤에 등장하는 챔피언은 100마리가 넘는다.

이걸 변수로 선언하여 객체 형태로 담아낸다고 생각하면 ?

let garen = {q: '결정타', w: '용기', e: '심판'}

let rumble = {q: '화염방사기', w: '고철 방패', e: '전기 작살'}

이렇게 노가다로 변수를 계속 선언해 줘야한다. 개발자는 노가다를 굉장히 싫어하므로...
이럴때 class를 이용한다. class는 템플릿(template)과 같은 역할을 한다고 생각하면 이해가 쉬웠다.

class 문법이 나오기 전에는 function을 활용하여 만들 수 있었다.

function champion(q,w,e) {
	this.q = q
	this.w = w
	this.e = e
}

let leesin = new champion('음파', '방호', '폭풍')
// champion {q: "음파", w: "방호", e: "폭풍"}

ES6부터는 class 문법을 사용하여 만들어 낼 수 있다.

class Champion {
	constructor(q,w,e){
      this.q = q
	  this.w = w
	  this.e = e
    }
  move(){}
  useSkill(){}
}

let leesin = new Champion('음파', '방호', '폭풍')
// champion {q: "음파", w: "방호", e: "폭풍"}

이렇게 class를 만들어 놓음으로써 다양한 형태를 만들어 낼 수 있는데,
이것이 class의 장점이다 특징중 하나인 다형성(Polymorphism) 이다.

constructor 밑에는 move(), useSkill()과 같이 method들을 정의 할 수 있다.
이렇게 속성이나 method들 즉 데이터와 기능을 한 곳에 묶어 낼 수 있는데 이것을 은닉화라고 부른다.
이는 class의 컨셉중 하나인 캡슐화 (Encapsulation) 라고 할 수 있다.
이를 통해 구현 하는 코드는 숨기고, 기능과 동작은 노출 시키게 되는데 이것을 추상화 (Abstraction)라고 한다.

prototype

이게 뭔지 싶어서 구글링을 열심히 했으나 설명 진짜 더럽게 어렵다.
원형객체 어쩌구 저쩌구.... 내가 저거 다 이해했으면 좋겠지만 무리였다. 그래서 유튜브 열심히 찾아봣다.
그래서 얻은 결론... prototype은 유전자다.

Champion의(부모) prototype에 name을 추가하게되면 자식들이 사용이 가능하다.
위에서 leesin 객체에 name을 정의한적은 없지만 콘솔에 찍어보면 'DK'가 출력된다.
부모의 유전자(prototype)에 기록이 되어 있으면, 자식이 끌어다 쓸 수 있다는 말.
이것이 상속 기능을 구현하는 하나의 장치. (prototype의 기능)

Champion.prototype.name = 'DK' //이렇게 하면 부모만 {name: 'kim'}을 가짐

//class 안에 속성이나 메소드를 추가하면 자식도 부모처럼 가질 수 있다.

console.log(leesin) // champion {q: "음파", w: "방호", e: "폭풍"}
console.log(leesin.name) // 'DK'

부모 유전자에 있는걸 자식이 사용 가능한 이유는?

leesin 객체에 name이 있다면 leesin.name 으로 데이터를 뽑아 오겠지만,
만약에 없다면? leesin 부모 유전자로 올라가서 찾게 된다. 때문에 object에서 데이터를 꺼내올때 여러 step을 거치게 된다.

즉,
1. 해당 객체에 자료를 가지고 있다면 바로 출력
2. 없으면 부모 유전자(prototype)에 가서 찾음
3. 여기도 없으면 부모의 부모 유전자에 가서 찾음.

이런것을 prototype chain 이라고 부른다.

느낀점.

솔직히 정확하게 정의해봐라 라고하면 잘 모르겠다. 근데 어떻게 쓰이는지 알고, 원리에 대해서 조금 이해하고나니 class를 왜 쓰는것이며, prototype이 무엇인지는 알 것 같다.
아직 실제로 사용해본적이 없기 때문에 정확한 의미와 사용들을 블로깅하는건 무리인것 같다.
내가 오늘 배우고 느낀것들을 위주로 정리해보앗다.

앞으로 코딩을 하면서 사용하고 깊이있게 이해되고나면 다시한번 다뤄봐야할 주제인듯 하다.