Appendix A: Exploring Further_ - hochan222/Everything-in-JavaScript GitHub Wiki

Implied Scopes

범위는 때때로 명확하지 않은 장소에서 생성된다. 실제로 이러한 묵시적 범위는 프로그램 동작에 자주 영향을 주지않지만 이러한 문제가 발생하고 있음을 아는 것은 여전히 유용하다.

• Parameter scope
• Function name scope

Parameter Scope

// outer/global scope: RED(1)
function getStudentName(studentID) { 
    // function scope: BLUE(2)
    // ..
}

함수의 파라미터와 함수의 지역 변수 범위가 같다고 인식되지만 항상 참은 아니다. 단순 매개변수는 지역 변수 범위와 같을 수 있지만, 단순 매개변수가 아닌 초기화 값을 포함하거나 ...등이 있으면 다르다.

// outer/global scope: RED(1)
function getStudentName(/*BLUE(2)*/ studentID = 0) { 
    // function scope: GREEN(3)
    // ..
}

매개변수 범위는 자체 범위를 갖고 함수의 범위는 매개변수 범위를 포함한 중첩 범위를 갖는다.

function getStudentName(studentID = maxID, maxID) { 
    // ..
}

위와 같은 함수는 TDZ 오류가 발생한다. maxID는 선언은 됐지만 초기화가 되지 않았기 때문이다. studentID = maxID에서 maxID는 선언과 초기화 둘다 되어있어야 한다.

function getStudentName(maxID, studentID = maxID) { 
    // ..
}

순서를 바꾸면 오류가 사라진다.

매개변수 안에 함수 표현식이 있을 경우 더 복잡해진다. 자체 클로저를 만든다.

function whatsTheDealHere(id, defaultID = () => id) { 
    id = 5;
    console.log( defaultID() ); 
}

whatsTheDealHere(3);
// 5

함수 표현식이 끝난다음 id = 5가 재할당 된 것을 볼 수 있다.

function whatsTheDealHere(id, defaultID = () => id) { 
    var id = 5;
    console.log( defaultID() ); 
}

whatsTheDealHere(3);
// 3

id 가 var id = 5로 인해 섀도잉이 일어나고 있는 것을 볼 수 있고, 다른 범위를 형성하는 것을 볼 수 있다.

다음은 더 이상해진다.

function whatsTheDealHere(id, defaultID = () => id) { 
    var id;
    console.log(`local variable 'id': ${ id }`); 
    console.log(`parameter 'id' (closure): ${ defaultID() }` );
    console.log("reassigning 'id' to 5"); 

    id = 5;
    console.log(`local variable 'id': ${ id }`); 
    console.log(`parameter 'id' (closure): ${ defaultID() }` );
}

whatsTheDealHere(3);

// local variable 'id': 3 <--- ????? // parameter 'id' (closure): 3
// reassigning 'id' to 5
// local variable 'id': 5
// parameter 'id' (closure): 3

섀도잉 변수는 보통 undefined로 초기화 되는데 왜.. local variable 'id': 3가 나왔을까..
호환 이유로 자바스크립트 스펙에서는 id를 undefined로 초기화하지 않는다. 대신 parameter 값으로 초기화 한다. 그리고 두 id는 독립된 범위를 형성한다.

5가 할당된 이후에는 매개변수는 id는 3의 값을 지역 변수는 id는 5의 값을 갖는다.

따라서, 우리는 조심할 필요가 있다. 파라미터를 지역 변수로 섀도잉 하지말자.

Function Name Scope

앞에서 함수 표현식의 이름 식별자는 외부 및 내부 기본 함수 범위 사이에 중첩 된 범위를 포함하는 암시적 범위에 있다고 다뤘다.

var askQuestion = function ofTheTeacher(){
    // why is this not a duplicate declaration error? 
    let ofTheTeacher = "Confused, yet?";
};

let은 재선언을 허용하지 않는다. 이로써 둘은 다른 범위에 있는것을 알 수 있다. 따라서, 섀도잉을 일으킬 수 있는 함수 식별자는 쓰지말자.

Anonymous vs. Named Functions

Explicit or Inferred Names?

프로그램에 모든 함수는 목적을 가지고 있다. 목적이 없으면 함수 밖으로 꺼내라. 그것은 메모리 차지만 하고 있을 뿐이다.

익명 함수는 스택추적에 나타나지 않아 디버깅에 도움이 안된다. 아래를 비교해 보아라.

btn.addEventListener("click",function(){ 
    setTimeout(function(){
        ["a",42].map(function(v){ 
            console.log(v.toUpperCase());
        }); 
    },100);
});

// Uncaught TypeError: v.toUpperCase is not a function
// at myProgram.js:4
// at Array.map (<anonymous>)
// at myProgram.js:3

btn.addEventListener("click",function onClick(){ 
    setTimeout(function waitAMoment(){
        ["a",42].map(function allUpper(v){ 
            console.log(v.toUpperCase());
        }); 
    },100);
});

// Uncaught TypeError: v.toUpperCase is not a function
// at allUpper (myProgram.js:4)
// at Array.map (<anonymous>)
// at waitAMoment (myProgram.js:3)

함수에 이름을 사용해야 디버깅이 쉽다. 또한 는 js 엔진에서 Array.map의 구현이 있음을 보여준다.

이름 있는 함수와 이름 없는 함수가 있다.

function thisIsNamed() { // ..
}

makeRequest({
    data: 42,
    cb /* also not a name */: function(){ 
        // ..
    } 
});

아래 경우는 어떤 경우인가?

var notNamed = function(){ 
    // ..
};

var config = {
    cb: function(){
    // ..
    }
};

notNamed.name;
// notNamed

config.cb.name;
// cb

우리는 이것들을 추론 이름(inferred name)이라 부른다. 이번 단원에서는 논의에 포함되어있지 않지만 이름 함수와 비슷하다.

Missing Names?

모든 경우에 익명보다 이름있는 함수가 좋아 보인다. 우리 생각보다 이름 있는 함수는 의도하지 않는한 대부분이 익명 함수임을 알 수 있다. 다음 경우를 보자.

function ajax(url,cb) { 
    console.log(cb.name);
}

ajax("some.url",function(){ 
    // ..
});
// ""

보통 콜백으로 들어오는 함수는 이름이 없다.

콜백 함수 말고도 다음 경우에도 해당된다.

var config = {};
config.cb = function(){ 
    // ..
}; 
config.cb.name;
// ""

var [ noName ] = [ function(){} ]; 
noName.name
// ""

함수식의 이름 할당도 대부분 실패한다.

Who am I?

이름이 없으면 재귀, 재할당이 불가능하다.

// broken
runOperation(function(num){
    if (num <= 1) return 1;
    return num * oopsNoNameToCall(num - 1);
});

// also broken
btn.addEventListener("click",function(){ 
    console.log("should only respond to one click!"); 
    btn.removeEventListener("click",oopsNoNameHere);
});

Names are Descriptors

또한 이름은 함수의 목적이 무언인지 설명하는 지표이기도 하다.

[ 1, 2, 3, 4, 5 ].filter(function(v){ return v % 2 == 1;
});
// [ 1, 3, 5 ]

[ 1, 2, 3, 4, 5 ].filter(function keepOnlyOdds(v){ return v % 2 == 1;
});
// [ 1, 3, 5 ]

Arrow Functions

화살표 함수는 추론 된 이름을 제공하는 방식으로 사용 되더라도 항상 익명이다. 화살표 함수는 var self = this나 bind(this)의 문제를 해결하기 위해 설계되었다. 하지만, 우리는 다음의 문법적 강제를 통해 문제를 해결하지만 익명 함수의 단점도 갖는다는 것을 항상 인지해야한다.

IIFE Variations

모든 함수에는 이름이 필요하다. 이는 IIFE도 다르지 않다.

(function(){
    // don't do this!
})();

(function doThisInstead(){ 
    // ..
})();

우리가 function 선언 구문으로 JS parser가 해석하는걸 피하기위해 (...)()을 쓰는데, IIFE를 정의하는 방법은 (...)()만 있는건 아니다.

!function thisIsAnIIFE(){ 
    // ..
}();

+function soIsThisOne(){ 
    // ..
}();

~function andThisOneToo(){ 
    // ..
}();

우리는 !, +, ∼ 와 몇가지 단항 연산자를 배치해 표현식으로 바꿀 수 있다. void를 함수 앞에 붙이는 경우와 비슷하다.

void function yepItsAnIIFE() { 
    // ..
}();

void의 이점은 함수의 시작 부분에 이 iife가 어떤 값도 반환하지 않을 것임을 명확하게 전달한다는 것이다.

오... (function...)(); 말구 void function(); 을 써야겠군...

Hoisting: Functions and Variables

Function Hoisting

앞 내용에서 아래 프로그램은 호이스팅 덕분에 작동 하는 것을 알 수 있었다.

getStudents();
// ..

function getStudents() { 
    // ..
}

함수 선언은 컴파일 중에 표시된다. getStudents는 전체 범위에 대해 선언 된 식별자이고, getStudents 식별자는 다시 범위의 시작 부분에서 함수 참조로 초기화된다.

getStudents();

// *************
function getStudents() {
    var whatever = doSomething();
    
    // other stuff
    return whatever;

   // *************
    function doSomething() { 
        // ..
    } 
}

함수 호이스팅은 또한 가독성을 높여준다.

Variable Hoisting

pleaseDontDoThis = "bad idea";
// much later
var pleaseDontDoThis;

위의 예시만 보더라도 Variable Hoisting이 얼마나 안좋은 문법인지 알 수 있다.
함수 호이스팅에서는 좋았지만, 일반적으로 변수에서 추론하기에는 어려워 보인다.

The Case for var

const-antly Confused

const는 변경 할 수없는 값을 만드는 척한다. 하지만, 실제로는 재할당을 방지하는 것이다.

const studentIDs = [ 14, 73, 112 ];

studentIDs.push(6); // whoa, wait... what!?

재할당 문제나 상수일때만 const를 사용하자.
다시 할당되지 않는 let (또는 var)은 컴파일러 보증이 없더라도 이미 "상수"로 동작한다. 이것들로 이미 충분하다.

var and let

let과 var을 적절히 사용하자. 함수의 시작, 중간 또는 끝에 관계없이 항상 모든 기능의 최상위 범위에서 var를 사용하자. let은 지역화된 범위를 var은 함수 전체범위를 나타내는데 사용하자.

What’s the Deal with TDZ?

Where It All Started

{
    // what should print here?
    console.log(studentName);

    // later
    const studentName = "Frank"; 
    // ..
}

초기 ES6 개발 작업 중에 TC39는 const(및 let)의 동작을 var처럼 호이스팅 되게 만들까 생각을 했다. 그러나 위 코드에서 그럴경우 const는 상수 값인데 로직상 불편하거나 cool하지 못함을 알 수 있다. 또한, undefined 로 자동 초기화 하지 않는 이유도 상수값인데 두가지 상태를 갖는다는 것 자체가 이상하기 때문이다. 따라서 그들은 선언 시간과 할당시간을 정의하게 됐고 TDZ가 만들어졌다.

Are Synchronous Callbacks Still Closures?

클로저는 함수가 다른 범위에서 전달되고 호출되는 경우에도 외부 변수를 기억하는 함수 인스턴스이다.

closure

Classic Module Variations

Asynchronous Module Defintion (AMD)

define([ "./Student" ],function StudentList(Student){ 
    var elems = [];

    return { 
        renderList() {
            // ..
        }
    }
});

Appendix A: Exploring Further_ - hochan222/Everything-in-JavaScript GitHub Wiki

Implied Scopes

Parameter Scope

Function Name Scope

Anonymous vs. Named Functions

Explicit or Inferred Names?

Missing Names?

Who am I?

Names are Descriptors

Arrow Functions

IIFE Variations

Hoisting: Functions and Variables

Function Hoisting

Variable Hoisting

The Case for var

const-antly Confused

var and let

What’s the Deal with TDZ?

Where It All Started

Are Synchronous Callbacks Still Closures?

Classic Module Variations

Asynchronous Module Defintion (AMD)

Universal Modules (UMD)

⚠️ GitHub.com Fallback ⚠️

Appendix A: Exploring Further_ - hochan222/Everything-in-JavaScript GitHub Wiki

Implied Scopes

Parameter Scope

Function Name Scope

Anonymous vs. Named Functions

Explicit or Inferred Names?

Missing Names?

Who am I?

Names are Descriptors

Arrow Functions

IIFE Variations

Hoisting: Functions and Variables

Function Hoisting

Variable Hoisting

The Case for var

const-antly Confused

var and let

What’s the Deal with TDZ?

Where It All Started

Are Synchronous Callbacks Still Closures?

Classic Module Variations

Asynchronous Module Defintion (AMD)

Universal Modules (UMD)

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️