[자바스크립트] 클래스 (feat 코어 자바스크립트)

 

 

 

 

 

들어가며

많은 기업들이 타입 스크립트와 nest.js를 활용해서 서버 개발을 하곤 합니다. 취업을 하려면, 타입 스크립트와 nest.js를 공부해서 실무를 익히는 것이 중요할 것입니다. 하지만 아직 자바스크립트의 기초도 없는 상태에서 타입 스크립트와 nest.js를 공부하는 것이 맞을까 하는 생각이 들었습니다. 빠르게 기술변화를 적응하고, 러닝 커브를 줄이기 위해 빠르게 공부해야 하는 것도 맞겠지만, 그전에 언어의 기반이 되는 자바스크립트부터 제대로 알아야 하지 않을까 하는 생각이 들었습니다. 이 기회에 자바스크립트의 기본에 대해 정리해보고자 합니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

클래스

자바스크립트는 프로토타입 기반 언어이므로 클래스의 개념이 존재하지 않습니다. 하지만 프로토타입을 일반적인 의미에서의 클래스 관점에서 접근해보면 비슷하게 해석할 수 있는 요소도 있습니다. 예를 들어 생성자 함수 Array를 new 연산자와 함께 호출하면 인스턴스가 생성됩니다. 이때 Array를 일종의 클래스라고 하면, Array의 prototype 객체 내부 요소들이 인스턴스에 '상속'된다고 볼 수 있습니다. 여기서 상속은 프로토타입 체이닝에 의한 참조를 뜻합니다. 한편 Array 내부 프로퍼티들 중 prototype 프로퍼티를 제외한 나머지는 인스턴스에 상속되지 않습니다. 이때 인스턴스에 상속되는지(참조하는지) 여부에 따라 프로퍼티를 스태틱 멤버(static member)와 프로토타입 메서드(prototype method)로 나눌 수 있습니다. 

 

 

출처 : 코어자바스크립트 p 179.

 

 

 

 

그럼 예제를 통해 위에서 살펴본 클래스 관점에서 바라본 프로토타입 시스템을 좀 더 알아보겠습니다.

 

 

var Rectangle = function (width, height) {
	this.width = width;
    this.height = height;
};

Rectangle.prototype.getArea = function () {
	return this.width * this.height;
}

Rectangle.isRectangle = function (instance) {
	return instance instanceof Rectangle && instance.width > 0 && instance.height > 0;
};

var rect1 = new Ractangle(3, 4);
console.log(rect1.getArea()); // 12
console.log(rect1.isRectangle(rect1)); // Error
console.log(Rectangle.isRectangle(rect1)); // true

 

Rectangle 함수를 new 연산자와 함께 호출해서 생성된 인스턴스를 rect1에 할당했습니다. 이 인스턴스에는 width, height 프로퍼티에 각각 3, 4의 값이 할당되어있습니다. 

 

그리고 getArea 메서드를 프로토타입 객체에 할당했는데, 프로토타입에 메서드를 할당했다면, 인스턴스가 마치 자신의 것처럼 호출할 수 있다고 했으니까 getArea는 실제로 rect1.__proto__. getArea에 접근합니다. 이때 __proto__를 생략했으므로 this가 rect1인 채로 실행될 테니까, 결과로는 rect1.width * rect1.height의 계산 값이 반환될 것입니다. 이처럼 인스턴스에서 직접 호출할 수 있는 메서드가 바로 프로토타입 메서드입니다.

 

한편 rect1 인스턴스에서 isRectangle이라는 메서드에 접근하고자 할 때 우선 rect1에 해당 메서드가 있는지 검색했는데 없고, rect1.__proto__에도 없으며, rect1.__proto__.__proto__에도 없습니다. 결국 undefined를 실행하라는 명령이므로, 함수가 아니어서 실행할 수 없다는 의미의 "Uncaught TypeError : not a function" 에러가 발생합니다. 이렇게 인스턴스에서 직접 접근할 수 없는 메서드를 스태틱 메서드라고 합니다. 스태틱 메서드는 생성자 함수를 this로 해야만 호출할 수 있습니다. 

 

즉 정리하면, 구체적인 인스턴스가 사용할 메서드를 정의할 '틀'의 역할을 담당하는 목적을 가질 때의 클래스는 추상적인 개념이지만, 클래스 자체를 this로 해서 직접 접근해야만 하는 스태틱 메서드를 호출할 때의 클래스는 그 자체가 하나의 개체로서 취급됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

클래스 상속

위에서는 ES5 체계에서의 생성자 함수 및 프로토타입에 대해 알아봤는데 이번에는 ES6의 클래스에 대해 알아보고, 동시에 클래스 상속에 대해 알아보겠습니다.

 

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

  getFullName() {
    return this.name + ' ' + this.surname;
  }

  static older (person1, person2) {
    return person1.age >= person2.age ? person1 : person2
  }
}

class PersonWithMiddlename extends Person {
  constructor(name, middlename, surname, age) {
    super(name, surname, age);
    this.middlename = middlename;
  }
  
  getFullName() {
    return this.name + '' + this.middlename + '' + this.surname
  }
}

const temp = new PersonWithMiddlename('콘', '스', '트', 18)
console.log(temp.getFullName())

 

클래스에 대한 생성자를 명시적으로 기술하고 older 함수를 정적(static) 함수로 선언했습니다. 여기서 PersonWithMiddlename 클래스를 만들어야 한다고 생각해 봅시다. 다른 객체지향 언어에서 일반적으로 나타나는 모습과 매우 유사합니다. 확장하고자 하는 클래스로부터 새로운 클래스를 선언하고, super 키워드를 사용하여 부모 생성자를 호출하는 새로운 생성자를 정의하였으며, 가운데 이름(middle name)을 지원하도록 getFullName 함수를 오버라이드 했습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

정리

자바스크립트는 프로토타입 기반 언어라서 클래스 및 상속 개념은 존재하지 않지만 프로토타입을 기반으로 클래스와 비슷하게 동작하게끔 하는 다양한 기법들이 도입돼 왔습니다. 클래스는 어떤 사물의 공통 속성을 모아 정의한 추상적인 개념이고, 인스턴스는 클래스의 속성을 지니는 구체적인 사례입니다. 상위 클래스(superclass)의 조건을 충족하면서 더욱 구체적인 조건이 추가된 것을 하위 클래스(subclass)라고 합니다.

 

클래스의 prototype 내부에 정의된 메서드를 프로토타입 메서드라고 하며, 이들은 인스턴스가 마치 자신의 것처럼 호출할 수 있습니다. 한편 클래스(생성자 함수)에 직접 정의한 메서드를 스태틱 메서드라고 하며, 이들은 인스턴스가 직접 호출할 수 없고 클래스(생성자 함수)에 의해서만 호출할 수 있습니다. 

 

그리고 ES6에서는 클래스를 보다 간단하게 상속 및 추상화를 구현할 수 있었습니다.  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

마치며

자바스크립트의 기본에 대해 공부하면서, 기본도 정확하게 알지 못하고, 앞으로 나아가려 했구나 하는 생각이 들었습니다. 기초이기에 지금 공부하는 내용을 더 잘 이해해야겠다고 생각했습니다. 기본에 충실할 수 있는 개발자가 되고 싶습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처

싸니까 믿으니까 인터파크도서

Prototype | PoiemaWeb

Object-Oriented Programming | PoiemaWeb