Class(클래스)

Class란?

객체지향 언어에서 핵심이 되는 Class! 우리는 왜 클래스를 사용해야 할까?

우선 클래스를 알기 전에 객체지향에 대해 알아야 하는데 짧게 설명하긴 어렵겠지만, 얕은 지식을 뽐내보자면
말그대로 객체지향이란것은 “데이터 하나하나의 고유한 특성들을 각각의 객체로 구분해 놓고, 내용을 구성함에있어 필요한 내용 즉, 각각의 객체를 연결함으로써 구현하는 패턴” 이라고 표현할 수 있을 것 같다.
객체지향에서 코드를 조금더 효율적으로 작성하기 위해서 나온 개념인 클래스는 각각의 객체를 생성하기 이전에 반복되거나 비슷한 코드를 그룹화 할 때 사용을 한다.

이제 JavaScript에 대해 알아보자.
JavaScript는 프로토타입 기반 객체지향 언어이다.
보통 객체지향 언어라 하면 위에서 설명한 클래스 기반인 경우가 많아 다른 언어를 공부했던 사람들은 JavaScript가 낯설게 느껴질 수 있지만,
ES6에 클래스를 생성하는 방법을 추가해 기존에 알던 개념으로 보다 빠르게 이해하고 쉽게 사용할 수 있을 것이다.
(물론 나는 다른 언어를 해본적이 없는 비전공자라 이것도 어렵다ㅋㅎ)
ES6에서도 이전에 없던 새로운 방법으로 클래스를 구현하는 것이 아닌 기존에 알고 있던 함수로 구현을하며,
이는 prototype 기반 패턴의 Syntatic sugar이다.
여기서 Syntatic sugar란 컴퓨터 언어를 사람이 이해하고 쉽게 사용할 수 있도록 구성해 놓은 것이다.

사용 방법

먼저 용어에 대해 알아보면
Class(클래스) - 객체의 특성을 정의
Object(객체) - 클래스의 인스턴스
Instance(인스턴스) - 객체의 실체화
쉽게 자동차에 비유해 이해해 보면
클래스가 자동차이면, 자동차의 종류인 페라리, 람보르기니 등을 객체라 표현하고 즉, 클래스의 인스턴스를 객체라 부르는 것이다.
부디 이해가 되셨으면 좋겠다..

이제 클래스 선언 방법에 대해 알아보자

기존 ES5로 클래스를 선언할 때는 prototype을 이용해 구현을 했음

//ES5
function Box(length, width) {
    this.length = length;
    this.width = width;
}
Box.prototype.calculateArea = function() {
    return this.length * this.width;
}
var box = new Box(2, 2);
box.calculateArea(); //4

과정을 살펴보면 함수를 선언할 때 첫 글자를 대문자로 설정하는데 이를 생성자(constructor) 함수라 하며,
new 키워드로 새로운 객체를 생성할 수 있고, this를 사용해 생성자 함수로 생성될 객체의 속성을 지정한다.

그 후에 prototype 메소드를 사용해 선언한 클래스(Box)에서 새로운 객체로 확장하는데 이런 방식 때문에 자바스크립트를 프로토타입 기반 프로그래밍 언어라 부른다.
프로토타입 사용의 장점은 객체에 같은 메소드로인해 메모리를 낭비하지 않도록 해주는 것이다. 즉 자바스크립트에서 클래스와 같은 의미로 사용을 하는 것이다.
따라서 효율적으로 코드를 짜기 위해서는 새로 만드는 모든 메소드(예제 코드에서는 calculateArea)는 프로토타입 안에 넣어야 한다.

위의 코드에서 calculateArea 메소드를 생성 한 뒤에 box에 원형 객체 Box에 인자를 넣은 값을 담고
box.calculateArea()로 프로토타입에 선언한 메소드를 호출하면 정의한 연산을 거쳐 값이 출력된다.

이제 ES6에서 새로 생긴 클래스를 정의하는 방법을 알아보자

//ES6
class Box {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }
  calculateArea() {
    return this.length * this.width;
  }
}
let box = new Box(2, 2);
box.calculateArea(); // 4

다른 언어에서 클래스를 생성할 때와 비슷하게 생성을 한다.
class로 새로운 클래스를 선언을 해주고 동시에 속성과 메소드까지 정의를 해주고
호출을 할때는 마찬가지로 new키워드로 새로운 객체를 생성해 메소드를 호출해 결과값을 출력한다.

객체지향에서 핵심 내용인 클래스를 설명했는데 포스팅으로 다시 정리해보려니 까다롭다.
쓰다보니 길어졌는데 아마 완독을 한다면 충분히 도움될 내용임!

작성한 부분중 이해가 안되거나 틀린 내용이 있다면 꼭! 댓글 남겨주시면 감사하겠습니다.


'개발 > ES6' 카테고리의 다른 글

6. 함수 파라미터 확장  (1) 2017.04.30
5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28

+ Recent posts