객체를 공부할 때 클래스라는 말을 본 적이 있었다.
그리고 이후에 공부했던 this나 이외의 개념을 공부할 때도
빠지지 않고 등장했던 것이 바로 Class.
Class에 대해 이해한 부분까지만 포스팅할거다.
1. 그래서 Class가 뭔데
MDN에 따르면
Class는 객체를 생성하기 위한 템플릿이며
함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이
class 문법도 class 표현식 and class 선언 두 가지 방법을 제공합니다.
라고 설명이 쓰여있다.
항상 그렇지만 글이나 말로만 보고 들으면 이해가 어렵다.
거두절미하고 바로 코드를 보며 이해해보자.
위와 같은 음식의 정보를 담는 객체를 만든다고 해보자.
지금처럼 2개만 만들면 상관없지만 생활코딩의 EGOING의 표현을 빌려
100만개를 만든다면 어떨까?
전부 다른 정보를 지닌 객체라면 직접 만들어야겠지만
비슷한 정보를 지닌 객체라면 이야기가 달라진다.
이 때가 class라는 개념을 사용할 때이다.
2. ES5의 class
ES5에는 class와 비슷한 개념은 있었지만 키워드로 존재하진 않았다.
함수와 이외의 개념을 사용해(= 프로토타입, 클로저)
객체 지향 프로그래밍을 했다고 한다.
여기서 this는 함수로부터 생성되는 새로운 객체다.
함수를 통해 새로운 객체를 만들고 그 안에 megamac과
5000이라는 데이터를 추가해줬다.
(일반적인 객체 만드는 방법이랑 동일하다)
food라는 새로운 객체를 만들었으니 이제 데이터를 뽑아봐야겠지.
데이터를 뽑는 방법은 앞에 new라는 키워드를 붙여주는 것이다.
그리고 결과를 확인해보면
food()에 있던 데이터가 hamburger에 담겨 나오는 것을 확인할 수 있었다.
근데 현재 food()안의 데이터만 활용하면 햄버거 메가맥만 주구장창 먹게 생겼다.
물론 메가맥을 좋아하긴 하지만 365일 먹을 수는 없는 노릇이니
인자를 활용해 다른 메뉴도 먹어주도록 하겠다.
인자를 추가해줌으로서 메가맥과 황금올리브를 먹을 수 있었다.
(믿기 힘드시겠지만 실제로 다 먹습니다. 감동실화)
3. ES6의 class
버전이 달라졌지만 구조는 크게 변하지 않았다.
대신, class라는 키워드와 constructor라는 키워드를 사용해주면 되는거였다.
먼저 클래스를 선언해준다.
클래스명은 앞 글자를 대문자로 만들어주는 것이 특징이다.
(그런데 대문자로 안 만들어줘도 동작하긴 했다. 하지만 난 대문자로 할거임)
그리고 클래스 안에 constructor라는 함수 비스무리한 것을 작성하면 끝이다.
(간략 설명 : constructor는 class의 변수나 초기값을 저장하는 용도로 쓴다)
그 안에 this를 활용해 무궁무진한 데이터를 마구마구 쑤셔넣어주면 된다.
4. 마치며
class를 공부하다 보니 연계해서 공부하면 좋을
prototype이라는 개념이 있었다. 다음 공부 주제는 prototype을 공부해보고
class와 연관지어서도 생각해보는 시간을 가져봐야겠다.
