JavaScript에서 클래스는 객체 지향 프로그래밍(OOP)을 위한 템플릿입니다. 클래스는 메소드는와 속성(attribute)을 포함하는 객체를 생성하기 위한 툴로 사용됩니다. ES6에서 클래스 문법이 도입되엇고, 이를 통해 기존의 프로토타입 기반 상속보다 더 명확하고 간다나하게 상속을 구현할 수 있게 되었습니다.
JavaScript 클래스는 코드의 구조와 조직을 향상시키는 데 도움이 되는 많은 이점을 제공합니다. :
캡슐화 : 클래스는 관련된 데이터와 함수를 한 곳에 묶는 방법을 제공합니다. 이를 통해 코드의 유지 관리와 디버깅이 더 쉬워집니다.
재상용성 : 클래스는 메소드와 속성을 정의하는 템플릿 역할을 합니다. 같은 메소드와 속성을 가진 객체를 여러ㅓ 개 만들어야 할 때, 클래스를 사용하면 코드를 여러 번 작성할 필요 없이 재상용할 수 있습니다.
상속 : 클래스는 상속을 통해 코드를 재사용하고ㅗ 확장하는 데 유용합니다. 하위 클래스는 상위 클래스의 모든 메소드와 속성을 상속받을 수 있으며, 필요에 따라 메소드를 오버라이드(재정의)하거나 새 메소드를 추가할 수 있습니다.
명확성 : 클래스는 코드의 구조를 명확하게 만들어 줍니다. 특히, 프로토타입 기반의 상속보다 훨씬 더 이해하기 쉽고 명확한 구문을 제공합니다.
안전성 : 클래스는 생성자 함수를 사용하여 객체를 생성할 때, 'new' 키워드를 빠드려도 JavaScript 엔진이 자동으로 추가해줍니다. 이런 기능으 ㄴ코드의 안정성을 높여줍니다.
예시 코드
class Rectangle{
constructor(height, width){
this.height = height;
this.width = width;
}
area(){
return this.height * this.width
}
}
const square = new Rectangle(5, 3);
console.log(square.area()); //15위 예제에서 Rectangle은 클래스입니다. 클래스는 class 키워드를 사용하여 선언하고, 그 이름은 보통 대문자로 시작합니다.
constructor는 클래스의 특별한 메소드로, 객체를 생성하고 초기화하는데 사용됩니다. Rectangle 클래스의 객체를 생성할 때, new 키워드를 사용하고 constructor에서 정의한 인자를 넘겨줍니다.
클래스 내부에 정의된 area 메소드는 클래스의 인스턴스에서 사용할 수 있는 메소드입니다. 이 메소드는 사각형의 넓이를 계산합니다.
new Rectangle(5, 5)를 통해 Rectangle 클래스의 새로운 인스턴스 square를 생성했습니다. square 객체는 Rectangle 클래스의 모든 메소드를 상속받으므로, square.area()를 호출하여 넓이를 계산할 수 있습니다.
인스턴스(instance) : 특정 클래스나 생성자 함수를 사용하여 만들어진 객체를 의미합니다. 클래스 또는 생성자 함수는 일정의 '틀'이며, 이 '틀'을 사용해서 실제 객체를 만드는 과정을 인스턴스화(instantiation)라고 합니다. 만들어진 각각의 객체를 클래스의 인스턴스라고 부릅니다.
JavaScript의 클래스를 이해하는 데 도움이 될 몇 가지 주요 코드 예시
- 클래스 정의와 인스턴스 생성
class Dog {
constructor(name){
this.name = name
}
bark(){
console.log((this.name + ' says woof '));
}
}
let dog = new Dog('Rex')
dog.bark() //Rex says woof - 클래스 상속
class Animal{
constructor(name){
this.name = name
}
speak(){
return this.name + 'makes a noise';
}
}
class Dog extends Animal {
speak(){
return this.name + ' barks. ';
}
}
let dog = new Dog('rex');
console.log(dog.speak()); //rex barks. - super 키워드
class Animal{
constructor(name){
this.name = name
}
speak(){
console.log((this.name + ' makes a noise'));
}
}
class Dog extends Animal {
speak(){
super.speak()
console.log(this.name + ' barks. ');
}
}
let dog = new Dog('rex');
dog.speak()위의 예시들은 클래스의 기본적인 사용법, 상속, 'super' 키워드를 사용한 부모 클래스 메소드의 호출을 보여줍니다.
클래스 상속은 하위 클래스(subclass)가 상위 클래스(superclass)의 속성과 메서드를 물려받는 메커니즘입니다. JavaScript에서는 'extends' 키워드를 사용하여 클래스 상속을 구현합니다.
super(슈퍼)키워드 : 하위 클래스에서 부모 클래스의 메서도를 호출할 수 있습니다. 이는 오버라이드된 메서드에서 부모 클래스의 메서드를 확장하려는 경우 유용합니다.
자바스크립트의 클래스를 사용하면서 주의할 점은 다음과 같습니다.
this 바인딩: JavaScript의 this는 동적으로 바인딩되며, 그 문맥에 따라 다르게 작동합니다. 클래스의 메서드 내에서 this를 사용하면, 일반적으로 해당 메서드를 호출한 인스턴스를 참조합니다. 하지만, 이 메서드를 콜백 함수로 전달하거나 다른 방법으로 메서드의 참조를 분리하면 this의 값이 바뀔 수 있습니다. 이를 해결하기 위해 화살표 함수를 사용하거나 메서드를 명시적으로 인스턴스에 바인딩하는 등의 방법을 사용해야 합니다.
클래스 필드 선언: 클래스 필드(멤버 변수)는 constructor 안에서 this에 바인딩되어 선언되며, 그렇지 않으면 public이나 private 필드로 선언됩니다. 이는 다른 언어의 클래스와 다르게 작동하므로 주의해야 합니다.
상속과 메서드 오버라이딩: JavaScript는 단일 상속만 지원하며, 메서드 오버라이딩 시 super 키워드를 사용하여 부모 클래스의 메서드를 참조할 수 있습니다. 오버라이딩 없이 부모 클래스의 메서드를 호출하려면 super를 사용해야 합니다.
클래스는 항상 호이스팅이 되지 않습니다: JavaScript에서 함수 선언은 호이스팅되지만, 클래스 선언은 그렇지 않습니다. 따라서 클래스를 선언하기 전에 클래스를 사용하려고 하면 ReferenceError가 발생합니다. 클래스를 사용하기 전에 항상 클래스가 선언되어 있는지 확인해야 합니다.
클래스는 새로운 스코프를 생성합니다: 클래스 내부는 새로운 스코프를 생성하므로, 클래스 외부에서 선언된 변수를 클래스 내부에서 직접 참조할 수 없습니다.
이러한 주의사항들은 JavaScript의 동적인 특성과 프로토타입 기반 상속 모델 때문에 발생하는 것들이며, 이를 이해하고 올바르게 관리하는 것이 중요합니다.
