ES6(ECMAScript 2015) – 클래스 – 0 – 클래스의 정의와 생성

클래스란?

클래스는 객체 지향 프로그래밍에서 중요한 개념 중 하나입니다. ES6(ECMAScript 2015)부터 도입된 클래스는 객체를 생성하기 위한 템플릿이며, 관련 있는 속성과 메서드를 하나의 논리적 단위로 묶어줍니다. 클래스는 객체를 생성하는데 사용되는 설계도와 같은 역할을 합니다.

클래스의 생성

클래스는 class 키워드를 사용하여 정의됩니다. 클래스의 이름은 관습적으로 대문자로 시작합니다. 클래스 내부에는 속성과 메서드가 포함됩니다. 속성은 클래스의 상태를 나타내고, 메서드는 클래스가 수행하는 동작을 정의합니다. 클래스를 생성하려면 new 키워드를 사용합니다.

예를 들어, “사람”을 나타내는 클래스를 만들어보겠습니다.

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

  sayHello() {
    console.log(`안녕하세요! 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`);
  }
}

const person1 = new Person("철수", 20);
person1.sayHello(); // 출력: 안녕하세요! 제 이름은 철수이고, 나이는 20살입니다.

위의 예시에서 Person 클래스는 name과 age라는 속성과 sayHello라는 메서드를 가지고 있습니다. 클래스를 생성할 때는 new 키워드를 사용하고, 생성된 객체를 변수에 할당합니다. 이후에는 객체의 메서드를 호출할 수 있습니다.

클래스의 비유적 설명

클래스는 비유적으로 공장에서 제품을 생산하는 템플릿과 비슷합니다. 공장에서는 동일한 템플릿을 사용하여 여러 제품을 만들 수 있습니다. 마찬가지로 클래스는 동일한 속성과 메서드를 가진 객체를 여러 개 생성할 수 있습니다.

예를 들어, “사람” 클래스는 이름과 나이라는 공통된 속성을 가지고 있으며, “인사하기”라는 동작을 수행할 수 있습니다. 이 클래스를 사용하여 여러 사람 객체를 생성할 수 있습니다. 각 객체는 공통된 속성과 메서드를 가지지만, 속성의 값은 다를 수 있습니다.

클래스의 주의해야할 점

1. 클래스 내부의 메서드를 정의할 때는 function 키워드를 사용하지 않습니다. 메서드는 일반적으로 화살표 함수나 일반 함수의 형태로 정의합니다.

2. 클래스의 속성은 생성자(constructor) 메서드 내부에서 this 키워드를 사용하여 정의합니다. this는 생성된 객체 자체를 가리킵니다.

3. 클래스 내부에서 속성에 접근할 때에도 this를 사용합니다. 예를 들어, this.name은 객체의 name 속성을 나타냅니다.

4. 클래스는 프로토타입 기반 상속을 기반으로 하며, 프로토타입 체인을 이용하여 상속 관계를 구성합니다.

5. 클래스의 인스턴스를 생성할 때는 new 키워드를 사용해야 합니다. 이를 잊지 않도록 주의해야 합니다.

6. 클래스는 ES6부터 도입된 기능이므로, 모든 브라우저에서 지원되지 않을 수 있습니다. 따라서, 클래스를 사용하기 전에 해당 브라우저의 지원 여부를 확인하는 것이 좋습니다.

클래스는 자바스크립트의 객체 지향 프로그래밍에 있어서 매우 유용한 개념입니다. 클래스를 통해 코드를 모듈화하고, 객체 간의 관계를 쉽게 정의할 수 있습니다. 이를 통해 가독성이 높은 코드를 작성할 수 있습니다. 이제 클래스의 정의와 생성에 대해 이해하셨으니, 다음으로 클래스의 상속과 다양한 기능에 대해 알아보시는 것을 추천드립니다.