[JS] 자바스크립트의 클래스

자바스크립트의 클래스

자바스크립트의 클래스는 객체와 관련이 있다. 객체를 직접 작성하여 정의하고 생성할 수 있지만, 클래스를 사용하면 여러 객체를 더 쉽고 빠르게 만들 수 있다. 즉, 클래스는 객체를 생성하기 위한 템플릿이다.

 

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이기 때문에 클래스란 개념이 존재하지 않았다. 그동안은 프로토타입을 이용하여 클래스를 비슷하게 표현해왔지만 ES6로 업데이트 되면서 클래스 문법이 문법이 추가되었고, 자바스러운 객체지향 프로그래밍을 표현할 수 있게되었다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 동작한다.

 

프로토타입 문법

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

Person.prototype.introduce = function() {
   return `안녕하세요, 제 이름은 ${this.name}입니다.`;
};

const person = new Person({name: '이선호', age: 23});
console.log(person.introduce()); // 안녕하세요, 제 이름은 이선호입니다.

 

클래스 문법

// 클래스
class Person {
   // 이전에서 사용하던 생성자 함수는 클래스 안에 `constructor`라는 이름으로 정의합니다.
   constructor({name, age}) { //생성자
     this.name = name;
     this.age = age;
   }
   // 객체에서 메소드를 정의할 때 사용하던 문법을 그대로 사용하면,
   // 메소드가 자동으로 `Person.prototype`에 저장됩니다.
   introduce() {
     return `안녕하세요, 제 이름은 ${this.name}입니다.`;
   }
}

const person = new Person({name: '이선호', age: 23});
console.log(person.introduce()); // 안녕하세요, 제 이름은 이선호입니다.

 

 

constructor는 클래스 필드를 초기화하기 위한 특수한 메소드이며 인스턴스를 new()로 생성할 때 가장 먼저 호출된다.

this는 클래스가 생성할 인스턴스를 가리킨다.

---

클래스 심화 문법

Getter / Setter

Getter와 Setter는 객체 지향 프로그래밍에서 사용하는 개념이며, 각각 객체의 프로퍼티 값을 반환하고, 변경하는 메소드를 말한다. 예를 들어 person 객체의 name 프로퍼티에 접근할 때 person.name으로 바로 접근하여 값을 가져오거나 변경하는 것이 아니라, getName()과 setName() 메소드를 통해 접근하도록 하는 기법이다.

 

Getter와 Setter를 사용하면 객체 내부 속성에 직접 접근하지 않아 객체의 정보 은닉을 가능하게 해주어 보안을 강화할 수 있고, 코드의 안정성과 유지보수성을 높일 수 있다.

class Person {
   constructor({name, age}) { //생성자
     this.name = name;
     this.age = age;
   }
   
   getName() {
   	return this.name;
   }
   
   setName(newName) {
   	this.name = newName;
   }
}

 

ES6에서는 Getter와 Setter를 간단하게 정의할 수 있는 문법이 별도로 추가되었다.

클래스 내에서 메소드 이름 앞에 get 또는 set 키워드를 붙여주는 방식으로 사용한다.

class Person {
   constructor({name, age}) { //생성자
     this.name = name;
     this.age = age;
   }
   
   get name() {
   	return this.name;
   }
   
   set name(newName) {
   	this.name = newName;
   }
}

 

정적 메소드 (static)

정적 메소드는 클래스의 인스턴스가 아닌 클래스 이름으로 곧바로 호출되는 메소드이다. static 키워드를 메소드 이름 앞에 붙여주면 해당 메소드는 정적 메소드가 된다. 우리가 랜덤값을 얻기 위해 Math.random() 같은 메소드를 쓰듯이, 따로 new Math() 없이 메소드를 사용하는 것이 바로 random 메소드가 static으로 설정되어 있기 때문이다.

class Person {
   constructor({ name, age }) { // 생성자 인스턴스
      this.name = name;
      this.age = age;
   }
   static static_name = 'STATIC'; // 정적 인스턴스

   getName() { // 인스턴스(프로토타입) 메소드
      return this.name;
   }
   static static_getName() { // 정적 메소드
      return this.static_name;
   }
}

const person = new Person({ name: 'jeff', age: 20 });
person.getName(); // jeff
Person.static_getName(); // STATIC

 

클래스 상속

class Parent {
  // ...
}

class Child extends Parent {
  // ...
}

extends 키워드를 통해 해당 클래스를 다른 클래스의 하위 클래스로 만들어줄 수 있다.

자식 클래스는 부모 클래스의 속성과 메소드를 사용할 수 있다.

---