2.1 classes 이전 prototype

객체지향언어를 배울 때 항상 나오는 키워드 중 하나가 class 입니다. 저는 Java와 C++을 배울 때 접하게 되었는데 ES6에서 class의 사용이 가능해졌습니다. 하지만 여기서 짚고 넘어가야할 것이 있습니다. 프로토타입에 관한 개념인데요

MDN의 Class에 관한 글에 이런 말이 나옵니다.

JavaScript class는 ECMAScript 6을 통해 소개되었으며, 기존 prototype 기반의 상속 보다 명료하게 사용할 수 있습니다. Class 문법은 새로운 객체지향 상속 모델을 제공하는 것은 아닙니다. JavaScript class는 객체를 생성하고 상속을 다루는데 있어 훨씬 더 단순하고 명확한 문법을 제공합니다.

javascript 는 프토로타입 기반의 언어이다.

es6에서 지원하는 class는 기본 개념은 프로토타입을 따라가나 class 키워드를 지원하여 마치 class 기반의 객체지향 언어인 것처럼 보여지는 것이죠. 아무래도 이 방법이 더 가독성도 좋고 다른 객체지향 언어들이 많이 택하는 방법이라 따라가는 것이 아닐까 싶습니다. 프로토타입에 대한 간단한 설명을 보자면

JavaScript에서 거의 모든 객체는 Object의 인스턴스입니다. 일반적인 객체는 Object.prototype 에서 속성과 메서드를 상속받으며, 그 중 일부는 (오버라이드 등으로 인해) 숨겨질 수 있습니다. 그러나, 의도적으로 Object를 생성할 때 (Object.create(null) 처럼) 이를 피할 수도 있고, Object.setPrototypeOf 등을 통해 나중에 무효화할 수도 있습니다.

Object 프로토타입에 가하는 변경은 프로토타입 체인을 통해, 더 아래쪽 체인에서 덮어 쓴 경우가 아니라면 모든 객체에서 관측할 수 있습니다. 이는 객체를 확장하거나 행동을 바꿀 수 있는 매우 강력하면서도 위험한 방법을 제공합니다.

워낙 javascript 의 정의에 관련된 부분이라 깊이있게 다루지 못할 것 같습니다. 프로토타입에 대한 간단한 예를 보고 다음 포스팅부터 class에 관한 이야기를 해보도록 하겠습니다.

Object.prototype.compare = function(o) {
    let ok = Object.keys(this);
      return typeof o === "object" && ok.length === Object.keys(o).length ? ok.every(k => this[k] === o[k]) : false;
}
let obj1 = {a:1,b:2,c:3},
    obj2 = {c:3,a:1,b:2};
 
console.log(obj1.compare(obj2))    //result : true
console.log(obj1===obj2)           //result : false
 

2개의 객체를 비교하기 위해 객체에 대한 compare 함수를 만든 예시입니다. Object 자료형일 때 마치 내장함수처럼 모두 적용할 수 있습니다. 두 개의 객체가 순서만 다른데 비교구문을 쓰면 false 값을 출력하게 됩니다. 이를 해결하기 위해 Object 자료형에 비교연산을 적용해서 정확한 객체비교가 가능해집니다.