Chapter 4: The Bigger Picture - hochan222/Everything-in-JavaScript GitHub Wiki

변수를 범위 단위 (함수, 블록)로 구성하는 것은 모든 언어의 가장 기본적인 특성 중 하나입니다. Scope 단위 범위와 그 안에서의 변수 정의는 컴파일 될 때 결정됩니다. 범위는 서로 내부에 중첩되며 주어진 표현식 또는 명령문에 대해 해당 범위의 같은 중첩 수준이나 상위(외부) 범위에있는 변수만 접근 할 수 있습니다. 하위(내부) 범위의 변수는 숨겨지고 접근 할 수 없습니다. 이런 것들을 'lexical scope'라고 합니다.

JS는 'lexical scope'이지만, 많은 사람들은 다음 두가지 특성때문에 아니라고 주장합니다.

1. 범위의 모든 위치에서 선언 된 모든 변수가 범위의 시작 부분에 선언 된 것처럼 처리되는 '호이스팅'입니다.
2. var로 선언된 변수가 블록 안에 있더라도 함수 범위로 취급됩니다.

하지만 이 두가지로 주장하기에는 충분하지 않습니다.

let이나 const를 정의할 때 발생하는 TDZ(Temporal Dead Zone)를 알아보면, 그것은 언어적 특성이며 lexical scoping를 무효화하지 않습니다. 또한, Closures도 있습니다.

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

TDZ 시맨틱은 선언 전에 변수에 접근하는 것을 금지한다. TDZ는 징계를 내린다: 변수 선언 전에 어떤 것도 사용하지 않는다. var, function 선언은 TDZ에 영향을 받지 않는다. 이것들은 현재 스코프에서 호이스팅 된다.

JS는 class 안에서 구조를 먼저 정의하지 않더라도 객체를 직접적이고 명시적으로 생성할 수 있는 몇 안되는 언어입니다.

JavaScript: Object Modelling with Behavior Delegation

JavaScript의 Prototype 메커니즘은 다른 객체 Prototype를 참조하는 하나의 객체에 존재하는 내부 링크라는 것입니다. 전통적인 객체 지향 언어에서 클래스를 인스턴스화 (또는 상속)하는 프로세스 는 정의 된 동작을 해당 클래스에서 물리적 객체로 복사 하여 각각의 새 인스턴스를 만드는 메커니즘을 실행합니다. 하지만 JS는 공통의 객체에 대한 링크를 넘길 뿐입니다.

JS에서 new는 함수가 생성자이고 이름이 class의 이름을 의미하지 않습니다. new를 함수에 쓰면 함수는 생성자가 아닌 그냥 일반 함수이고 클래스에서 인스턴스로 복사되는 과정이 없습니다. 오직 Prototype 만 다른 객체에 위임할 수 있습니다.

다른 객체에 연결된 새로운 객체를 생성할 때 new User() 의 암시적 방법 말고 Object.create(..)의 명시적 방법이있다.

behavior delegation은 자바스크립트의 프로토타입 메커니즘 객체 자체에 없는 경우 일부 개체가 속성 또는 메서드 참조에 대한 일반적인 유틸리티 객체에 대표단을 제공 할 수 있습니다. 이것은 전통적인 객체 지향 디자인 패턴과는 매우 다릅니다.

const Widget = {
    init(width,height){
        this.width = width || 50;
        this.height = height || 50;
        this.$elem = null;
    },
    insert($where){
        if (this.$elem) {
            this.$elem.css({
                width: this.width + "px",
                height: this.height + "px"
            }).appendTo($where);
        }
    }
};

const Button = {
    setup(width,height,label){
        // delegated call
        this.init(width, height);
        this.label = label || "Default";
        this.$elem = $("<button>").text(this.label);
    },
    build($where) {
        // delegated call
        this.insert($where);
        this.$elem.click(this.onClick.bind(this));
    },
    onClick(evt) {
        console.log("Button '" + this.label + "' clicked!");
    }
};

Object.setPrototypeOf(Button, Widget);

$(document).ready(function(){
    const $body = $(document.body);
    const btn1 = Object.create(Button);
    btn1.setup(120, 30, "A");
    const btn2 = Object.create(Button);
    btn2.setup(150, 50, "B");
    btn1.build($body);
    btn2.build($body);
} );

이런 behavior delegation가 class 상속보다 더 강력하다고 생각합니다.

TypeScript/Flow의 정적언어를 사용한다고 해서 흔히 간과하는 단원이지만 이것들을 제대로 알지 못하면 항상 불완전하게 JS에 대해 흔들릴 수 있다. (뒷부분 Types & Grammar에서 다루자)