생성자 함수를 대체하는 class💡

🧡생성자 함수 없이 데이터를 관리할 때

생성자 함수 없이 멤버들의 데이터를 관리한다고 했을 때 아래와 같이 중복 된 코드가 발생하며, 각 코드를 불러올 때 마다 새로운 객체가 호출이 되어 시스템리소스가 낭비될 수 있다

  const rm = {
    name: 'rm',
    age: 30,
    introduce() {
      console.log(`안녕하세요 ${this.age}살 ${this.name}입니다`)
    }
  }

  const jin = {
    name: 'jin',
    age: 32,
    introduce() {
      console.log(`안녕하세요 ${this.age}살 ${this.name}입니다`)
    }
  }

  const suga = {
    name: 'suga',
    age: 31,
    introduce() {
      console.log(`안녕하세요 ${this.age}살 ${this.name}입니다`)
    }
  }

🧡생성자함수

하나의 생성자 함수를 선언해두면 새로운 객체를 생성할 때 마다 해당 함수를 재호출 하여 사용할 수 있어 시스템자원의 낭비를 막고 코드의 중복을 최소화 할 수 있다

  //생성자함수 Bts
  function Bts (name, age) {
    this.name = name;
    this.age = age;
  }
	
  //다른 역할을 하는 함수를 prototype으로 분리하면 좋다
  Bts.prototype.introduce = function() {
    return `안녕하세요 ${this.age}살 ${this.name}입니다`;
  }

  //인수를 넣어 선언만 하면 된다
  const rm = new Bts('rm', 30);
  const jin = new Bts('jin', 32);
  const suga = new Bts('suga', 31);

🧡Class

ES6부터 도입 된 class를 활용하면 훨씬 간결하게 코드작성이 가능해진다
constructor 함수로 매개변수를 받고 별도의 prototype없이 class내에서 바로 함수를 생성하면 된다

  class Bts {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }

    introduce() {
      return `안녕하세요 ${this.age}살 ${this.name}입니다`;
    }
  }

  const rm = new Bts('rm', 30);
  const jin = new Bts('jin', 32);
  const suga = new Bts('suga', 31);

마치며🙌

그동안.. 수없이 class관련 강의를 듣고 따라서 사용해보며 이해하려 애썻지만 쉽게 되지않았고, 이 글을 작성하기 직전까지도 아.. 이제 좀 알겠다 싶긴 했지만 여전히 아리까리했다

역시 글로 풀어서 써보니 훨씬 정리가 되고 확실히 사용법과 사용이유를 이해할 수 있게 된듯하다!! 이제 실제 프로젝트에서 직접 활용해보면서 숙달을 시켜봐야겠다 !! 역시 반복학습을 하고 배운내용을 정리하고 리마인드하다보면 못 배울 것이 없나보다 !!!