[JS/ES6] class로 객체 생성

class로 객체 생성

      // 기존 js

      function Flower(name) {

        this.name = name;

      }

      Flower.prototype.showFlower = function() {

        console.log("꽃의 이름은 " + this.name + " 입니다.");

      };

      const f = new Flower('장미');

      f.showFlower();

      // ES6 class

      class Flower2 {

        construnctor(name) {

          this.name = name;

        }

        showFlower() {

          console.log("꽃의 이름은 " + this.name + " 입니다.");

        }

      }

      const f2 = new Flower('튤립');

      f2.showFlower();

기존 js에서 생성자를 만들때는 function을쓰고 prototype으로 생성자의 메서드를 정의했습니다. java같은 객체지향언어에 있는 class와는 조금 다른 모습이었습니다.

ES6에서는 class 키워드로 객체를 만들 수 있어서 가독성이 높아졌습니다. constructor가 생성자 역할을 하고 prototype을 지정하지 않아도 내부에 메서드명을 바로 적으면 메서드처럼 동작합니다. 객체지향언어와 비슷한 형태로 갖출 수 있습니다.

하지만 그렇다고해서 기존에는 생성되는 객체의 형태가 function이었고 지금은 class냐? 그건 아닙니다.

가독성을 위해 겉으로 class, constructor를 사용하고 조금 변형된 모습을 보이지만, 실제로 f2의 Object형을 살펴보면 function 입니다.

즉, 내부는 다시 기존 js와 같은 형태가 된다는 의미입니다.

가장 원초적인 js 방식을 사용하면 좋겠지만 가독성을 위해서라면 ES6를 사용해도 좋을 것 같습니다.