[JavaScript] Class

---

자바스크립트의 class개념은 ECMA6에서 새로 도입된 개념이다.

그러나 마냥 새로운 개념은 아니다.

Class로 커피를 만들어보자.

---

Class란?

class CoffeeMachine {
    constructor(coffee){
        this.coffee = coffee;
    }
}

CoffeeMachine이라는 클래스를 만들었다. 이 머신 안에서 커피가 제조되는 것.

참고로 클래스 함수 이름의 첫 시작은 대문자여야 함. 일반 함수의 시작은 소문자.

 

constructor은 한국어로 생성자라고 한다. 생성자는 말 그대로 객체를 생성하게 한다.

이 생성자가 있어야 class가 호출된다.

또한, 클래스 안에서 생성자는 단 하나여야 한다. 

 

this는 CoffeeMachine을 뜻한다.

그럼 왜 this를 쓸까? this 대신 CoffeeMachine을 쓰면 컴퓨터는 새로 CoffeeMahine을 찾는 노력을 기울여야 한다. 시간도 메모리 사용도 단축할 수 있다. 

 

class CoffeeMachine {
    constructor(coffee){
        this.coffee = coffee;
    }
    machine(){
        console.log(`${this.coffee} 커피가 완성됐습니다.`);
    }
}

 

 machine()은 메소드 라고 한다. 메소드는 객체 내 프로퍼티 중 함수인 프로퍼티다.

이제 기계를 만들었으니 커피를 뽑아마셔보자.

const myCoffee = new CoffeeMachine("cold brew");

console.log(myCoffee.coffee);
myCoffee.machine();

새 객체를 만들기 위해서는 new를 앞에 붙여주어야 한다.

결과는 아래와 같다.

그런데 처음에 마냥 새로운 개념이 아니라고 언급했다.

그럼 class가 없었을 시절엔 어떤 방식으로 같은 기능을 구현했을까?

---

class도입 전과 후

//before ES6
function CoffeeMachine(coffee) {
  this.coffee = coffee;
}

CoffeeMachine.prototype.machine = function() {
  return `${this.coffee} 커피가 완성됐습니다.`
}

const myCoffee = new CoffeeMachine("cold brew");

console.log(myCoffee.coffee);
myCoffee.machine();

//after ES6
class CoffeeMachine {
    constructor(coffee){
        this.coffee = coffee;
    }
    
    machine(){
        console.log(`${this.coffee} 커피가 완성됐습니다.`);
    }
}

const myCoffee = new CoffeeMachine("cold brew");

console.log(myCoffee.coffee);
myCoffee.machine();

둘의 결과는 같다.

근데 왜 같은 기능인데 class를 도입하게 된 것일까?

class의 장점은 무엇일까?

---

class의 장점

class는 함수 선언과 달리 호이스팅이 일어나지 않는다.

호이스팅은 함수 선언 유무와 상관 없이 선언 전에도 함수 사용이 가능 한 것이다.

함수를 호출하고 선언하는 경우, 호이스팅이 일어나면 문제없이 실행이 되지만,

그렇지 않으면 선언되지 않은 함수라는 에러가 뜬다.

 

호이스팅으로 인해 코드가 꼬일 수 있는 단점을 class는 해결해 줄 수 있다.

 

class는 자동으로 strict모드를 적용시킨다.

때문에, 좀 더 꼼꼼한 코딩이 가능해진다.

 

---

참고:

 

TCP SCHOOL http://tcpschool.com/javascript/js_object_concept#:~:text=%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%EA%B0%9D%EC%B2%B4&text=%EA%B0%9D%EC%B2%B4%EB%9E%80%20%EC%9D%B4%EB%A6%84(name)%EA%B3%BC,%EB%A9%94%EC%86%8C%EB%93%9C(method)%EB%9D%BC%EA%B3%A0%20%ED%95%A9%EB%8B%88%EB%8B%A4.

Developers https://www.toptal.com/javascript/es6-class-chaos-keeps-js-developer-up

MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes