Class, TDZ, OOP, Prototype 정리 [이펙티브 자바스크립트 스터디]

백경·2022년 10월 17일
0

Study

목록 보기
1/2
post-thumbnail

의문과 목적

의문

아이템3 에서 instanceof 구문 사용시에 타입이 값으로 사용되고 있다는 부분이 있다
type 은 값이 아니지만 class 는 값이라는 의미이다.

type 의 경우 컴파일시에 인터페이스, 타입, 타입구문이 날아가기 때문에 사용되지 않는다는 것을 이해했다
그렇자면 class 가 값으로 사용되고 있다는 의미인데, class 는 왜 값일까? 그리고 instanceof 는 실제 내부적으로는 어떻게 동작을 하기에 class 를 구분지을 수 있는 것일까?

목적

  • ES6 에서의 Class 에 대해서 알아본다
  • hoisting 과 TDZ 에 대해서 알아본다
  • instanceof 가 어떻게 동작하는지 알아본다
  • 생각을 정리한다

Class

  • Class는 객체를 생성하기 위한 템플릿
  • 데이터와 이를 조작하는 코드를 하나로 추상화
  • 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌다.
    ~~ 즉, Class 또한 prototype 기반 class ~~

Class 정의

  • Class는 사실 "특별한 함수"입니다.
  • class 문법도 class 선언 and class 표현식 두 가지 방법을 제공

~~ 함수이기에 선언과 표현식 2가지 방법으로 사용할 수 있는 것이다 ~~

Class 선언

  • Class 를 정의하는 방법
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Hoisting

  • 함수 선언과 클래스 선언의 중요한 차이점
  • 함수의 경우 정의하기 하기 전에 호출할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다
  • 클래스가 호이스팅될 때 초기화는 되지 않기 때문입니다.
const p = new Rectangle(); // ReferenceError

class Rectangle {}

호이스팅 될 때 초기화는 되지 않는다 ?

즉, Hoisting 은 일어난다. 사용할 수는 없다
그리고 ReferenceError 를 발생시킨다

비슷한 예로 let, const 와 var 의 차이와도 같다.
let 과 const 도 var 처럼 Hoisting 이 일어난다
하지만 사용할 수는 없다

TDZ ( Temporary Dead Zone) 에 있기 때문이다

TDZ 라는 것은 Hoisting 이 일어날때,
접근이 불가능한 구문들의 접근을 제한하기 위해서 만들어진
일시적인 접근 제한 불가 구역이다

Hoisting 된 위치에서부터 선언 구문 사이에 발생한다,
즉 선언한 구문 이전에서는 접근이 안 되는 것이다

TDZ Rule

  • TDZ 적용
    • let, const, class
  • TDZ 미적용
    • var, function, import
  • 미확인
    • function*

Class 표현식

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle2"

마치 함수처럼 클래스도 사용할 수 있다.
런타임에 확장하여서 정의가 가능하며 일시적으로 정의되었을 경우 scope 가 끝나면 없어진다

instanceof

생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별합니다.

위의 예제를 보고 ref.name 을 통해서 class 의 instance 를 확인하는 것인가? 라고 생각
만약 그렇다면 다양한 기법을 통해서 오동작을 손쉽게 일으키거나 이상한 코드를 만들 수 있을거라고 생각했는데

하지만 실제로는 그렇게 간단하게 되지 않고 실제로 존재하는 prototype chain 으로 판별을 한다.
결국 es6 도 js 의 태생인 prototype 기반으로 생각을 해야 하는 것

단상

기존에 지니고 있던 class 기반의 oop 에서 나오는 개념에 대한 것을 버리고
protype 기반의 oop 라는 것을 인지해야한다

참조

MDN JavaScript Class

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라

ES6 Class

JavaScript OOP

profile
Let me introduce myself as an FE developer.

0개의 댓글