[자바스크립트] Class 개념과 기본 문법

클래스 (Class)

자바스크립트의 클래스 문법은 ES6에서 추가된 것으로 좀 더 JAVA와 비슷하게 객체 지향을 표현하기 위해 추가된 것이다. ES5까지는 클래스가 없었기 때문에 프로토타입 체이닝을 통해서 다음과 같이 유사하게 구현해왔지만,

// 생성자
function Person({name, age}) {
   this.name = name;
   this.age = age;
}

Person.prototype.introduce = function() {
   return `이름 : ${this.name} 나이 : ${this.age}`;
};

const person = new Person({name: 'kim', age: 26});
console.log(person.introduce()); // 이름 : kim 나이 : 26

 

 

ES6 부터는 다음과 같이 편하게 코드를 작성할 수 있게 된 것이다.

// 클래스
class Person {
   // 이전에서 사용하던 생성자 함수는 클래스 안에 `constructor`라는 이름으로 정의
   constructor({name, age}) { //생성자
     this.name = name;
     this.age = age;
   }
   //메소드가 자동으로 `Person.prototype`에 저장
   introduce() {
     return `이름 : ${this.name} 나이 : ${this.age}`;
   }
}

const person = new Person({name: 'kim', age: 26});
console.log(person.introduce()); // 이름 : kim 나이 : 26

 

두 방식은 문법만 다룰 뿐, 자바스크립트 엔진 내에서는 같은 방식으로 동작한다.

 

 

 

클래스 선언

자바스크립트에서 클래스는 class 키워드를 통해 생성하게 되고 constructor 생성자 함수를 통해 객체를 생성하고 클래스 필드를 초기화할 수 있다.

class Person {
   height = 180; // 인스턴스 변수

   // constructor는 이름을 바꿀 수 없다.
   constructor(name, age) {
      // this는 클래스가 생성할 인스턴스를 가리킨다.
      this.name = name;
      this.age = age;
   }
}

let person1 = new Person('john', 23);
console.log(person1.name); // john
console.log(person1.age); // 23
console.log(person1.height); // 180

 

클래스를 선언할 때 주의할 점으로는 다음과 같다.

• 필드의 선언과 초기화는 반드시 constructor 내부에서 실행
• constuctor 내부에 선언한 클래스 필드는 클래스가 생성한 인스턴스에 바인딩

클래스 필드는 생성한 객체의 프로포티이며, 객체를 통해 클래스 외부에서 언제나 참조할 수 있는 public 프로퍼티이다. 또한 위의 예제에서도 알 수 있듯이, 클래스 필드의 변수는 생성자 함수에서 초기화시 자동으로 생성이 된다. (자바에서 처럼 변수를 미리 선언하는 과정이 필요X)

 

 

 

클래스 메소드 정의

클래스의 메소드를 정의할 때는 객체 리터럴에서 사용하던 문법과 유사한 문법을 사용할 수 있다. 기본적으로 는 다음과 같이 선언한다.

class Person {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
   
   printInfo() {
       return `이름 : ${this.name}    나이 : ${this.age}`;
   }
}

let person1 = new Person('john', 23);
//메소드 사용
console.log(person1.printInfo());  //이름 : john   나이 : 23

 

 

객체 리터럴 문법과 같이 임의의 표현식을 대괄호로 둘러싸서 메소드의 이름으로 사용할 수 있다.

const methodName = 'printInfo';

class Person {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
   
   // methodName = printInfo => printInfo()로 호출
   [methodName]() {
       return `이름 : ${this.name}    나이 : ${this.age}`;
   }
}

let person1 = new Person('john', 23);
console.log(person1.printInfo());  //이름 : john   나이 : 23

 

그 외에도 메소드는 static 방식으로도 선언할 수 있는데 해당 방식에 대한 내용은 아래의 포스팅을 참고하기 바란다.

https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%95%EC%A0%81-%EB%A9%94%EC%86%8C%EB%93%9C

[자바스크립트] 정적 메소드

 

 

 

Getter & Setter

자바에서는 getter와 setter를 정의해줄 때, 일반 메소드 선언 방식에 메소드명을 변수명 앞에 get 또는 set을 붙인 형태로 정의한다. (ex. getName(), setName() ... )

 

자바스크립트에서는 get 또는 set 키워드를 통해 getter, setter 를 정의할 수 있다.

class Person {
    constructor(name, age) {
       this._name = name;
       this._age = age;
    }
    
    get name(){
        return this._name;
    }

    set name(name) {
        this._name = name;
    }
 }
 
let person = new Person('john', 23);
// 자동으로 setter 함수를 호출
person.name = 'kim'

// getter 함수 호출
console.log(person.name);

 

위의 예제를 보면, 사용법이 독특한데 getter와 setter는 일반적인 메소드 호출 방식이 아닌 메소드 이름만 불러주는 형태로 함수를 호출한다.

 

이 때 메소드 이름에 접근한 뒤 값을 할당할 때에는 setter를 호출하고, 단순히 메소드 이름에만 접근할 경우 getter를 호출한다.

 

 

 

제너레이터 메소드

Generator 메소드를 정의하려면, 메소드 이름 앞에 * 기호를 붙여주면 된다.

class Gen {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
}

// 1, 2, 3이 차례대로 출력
for (let n of new Gen()) {
  console.log(n);
}