[JavaScript] 높은 수준의 함수 테마

1. 템플릿 문자열을 애플리케이션 사양으로 커스터마이즈하기 - 태그 부여 템플릿 문자열(ES2015)

//주어진 문자열을 이스케이프 처리
function escapeHtml(str) {
    if (!str) { return ''; }
    str = str.replace(/&/g, '&');
    str = str.replace(/</g, '&lt;');
    str = str.replace(/>/g, '&gt;');
    str = str.replace(/"/g, '&quot;');
    str = str.replace(/'/g, '&#39;');
    return str;
}

// 분해된 templates와 values를 순서대로 연결(values는 escapeHtml 함수로 이스케이프)
function e(templates, ...values) {
    let result = '';
    for (let i = 0, len = templates.length; i < len; i++){
        result += templates[i] + escapeHtml(values[i]);
    }
    return result;
}

// 템플릿 문자열을 이스케이프 처리
let name = '<"Mario" & \'Luigi\'>';
console.log(e`안녕하세요, ${name}씨!`);
//결과: 안녕하세요, &lt;&quot;Mario&quot; &amp; &#39;Luigi&#39;&gt;씨!

🔸태그 부여 템플릿 문자열로 이용하기 위해서는 함수는 다음의 조건을 만족해야 한다.(function e)

• 인수로서 '템플릿 문자열(분해한 것)', '삽입할 변수(가변길이 인수)'를 수령할 것
• 반환값으로서 가공이 끝난 문자열을 반환할 것

2. 변수는 어떤 순서로 해결될까? - 스코프 체인

: Global 객체는 JavaScript에서 스크립트의 실행 시에 내부적으로 생성된다. 글로벌 객체는 글로벌 변수나 글로벌 함수를 관리하기 위한 편의적인 객체이다.
: Activation 객체(Call 객체)는 함수 호출이 있을 때마다 내부적으로 자동 생성되는 객체이다. 또한 함수 내에서 정의된 로컬 변수를 관리하기 위한 편의적인 객체이다.
➡ 스코프 체인 : 글로벌 객체, Call 객체를 생성 순서대로 연결한 리스트

var y = 'Global';
function outerFunc() {
    var y = 'Local Outer';

    function innerFunc() {
        var z = 'Local Inner';
        console.log(z); // 결과 : Local Inner
        console.log(y); // 결과 : Local Outer
        console.log(x); // 결과 : 에러 (변수 x는 미정의)
    }
    innerFunc(); //InnerFunc 함수의 호출
}
outerFunc(); // outerFunc 함수의 호출

➡ 체인 선두(가장 안쪽의 함수)의 Call 객체부터 글로벌 객체까지 지정된 프로퍼티(변수)를 순서대로 검색하여 '처음'발견된 곳에서 그 값을 채택하고 있다.

3. 같은 행동을 하는 객체 - 클로저

: 로컬 변수를 참조하고 있는 함수 내의 함수

function closure(init) { // 고차함수
    var counter = init;

    return function() {
        return ++counter;
    }
}

var myClosure = closure(1);
console.log(myClosure());// 결과 : 2
console.log(myClosure());// 결과 : 3
console.log(myClosure());// 결과 : 4

:보통은 함수 안에서 사용된 로컬 변수(여기에서는 변수 counter)는 함수의 처리가 종료한 시점에 파기된다. 하지만 위의 예시에서는 closure함수로부터 되돌려진 '익명 함수가 로컬 함수 counter를 계속 참조하고 있다'는 이유로 closure함수의 종료 후에도 로컬 변수 counter는 계속해서 보관 유지된다.

: 익명 함수가 유효한 사이에는 보관 / 유지되는 예시

• 익명 함수를 나타내는 Call 객체
• Closure함수의 Call 객체
• 글로벌 객체

: 클로저는 일종의 '기억 영역을 제공하는 구조'

function closure(init) {
    var counter = init;

    return function() {
        return ++counter;
    }
}

var myClosure1 = closure(1);
var myClosure2 = closure(100);

console.log(myClosure1()); //결과 : 2
console.log(myClosure2()); //결과 : 101
console.log(myClosure1()); //결과 : 3
console.log(myClosure2()); //결과 : 102

: Call 객체는 함수가 호출될 때마다 생성되기에 각각의 스코프 체인은 독립된 것이고, 그 안에 관리되는 로컬 변수 counter도 별개의 것
: myClosure1, myClosure2 각각의 독립된 기억 공간이 생성