ES6 - Class 문법 (1)

Boseong Choi·2023년 5월 11일

목록 보기

6/10

ES5 문법

ES5에서는 생성자 함수와 프로토타입, 클로저를 사용하여 객체 지향 프로그래밍을 구현하였다. 클래스(class) 문법이 없었기 때문에, 프로토타입 기반으로 객체를 생성하였다. 즉, ES5에서 객체지향 프로그래밍을 구현하기 위해서는 생성자 함수, 프로토타입, 클로저 등의 개념을 이해하고 사용해야 했다.

function Person(name, age) {
  var _name = name; // name 속성을 숨기기 위한 클로저
  var _age = age; // age 속성을 숨기기 위한 클로저

  this.sayHello = function() {
    console.log(`안녕하세요. ${_name}입니다.`);
  };
}

Person.prototype.getAge = function() {
  return this._age;
};

var person1 = new Person('John', 30);
console.log(person1); // Person { sayHello: [Function] }
person1.sayHello(); // 안녕하세요. John입니다.
console.log(person1.getAge()); // 30

Person 함수는 생성자 함수로, 객체를 생성하기 위한 함수이다. name과 age 파라미터를 받아 _name과 _age 변수에 각각 저장하고, sayHello() 메서드를 가지는 객체를 생성한다. 변수들은 클로저를 이용하여 외부에서 접근이 불가능하게 숨겨져 있다.

그 다음, Person 생성자 함수의 prototype 객체를 이용하여 getAge() 메서드를 정의하고 _age의 값을 리턴한다.

마지막으로, new 연산자를 사용하여 Person 생성자 함수를 호출하여 person1 객체를 생성한다. 이 객체는 sayHello() 메서드를 가진다. 그리고 getAge() 메서드를 호출하여 해당 객체의 _age 값을 반환한다.

ES6 문법

ES6에서 Class 문법이 새로 추가된 이유는 JS의 객체 지향 프로그래밍 기능을 보다 쉽게 사용하고 관리하기 위해서이다. ES5에서는 객체를 생성하기 위해 함수를 사용하거나 생성자(constructor) 함수를 사용하여 객체를 생성했었는데, 객체를 생성하고 관리하는 작업이 복잡하고 번거로웠다.

Class는 객체를 생성하기 위한 일종의 기계 라고 생각한다. 이를 사용하여 다양한 객체를 생성할 수 있는데, 쇼핑몰 프로젝트를 개발하고 있다면 상품 클래스를 만들어서 각각의 상품 객체를 생성할 수 있다.

Person 클래스를 정의하고, 두 명의 사람 객체를 생성하는 기계

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

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

let person1 = new Person('John', 25);
let person2 = new Person('Jane', 30);

person1.sayHello(); // 출력 결과: 안녕하세요! 제 이름은 John입니다. 25살입니다.
person2.sayHello(); // 출력 결과: 안녕하세요! 제 이름은 Jane입니다. 30살입니다.

1. Person 클래스

constructor
- 객체를 만드는 함수. 객체가 생성될 때 실행되며, 객체를 초기화하는 역할을 한다.
this.name this.age
- 새로 생성되는 오브젝트 (=인스턴스)
- 인스턴스.name, 인스턴스.age는 파라미터로 받아서 저장한다.
sayHello()
- sayHello 메소드는 Person 객체의 인사말을 출력한다.