[실전 자바스크립트]일급함수 그리고 callstack

자바스크립트의 함수에 대해서 알아보자.

"First Class Citizen"

일급 함수라는 뜻

MDN :: "함수가 다른 변수처럼 취급되어지면, 그 언어는 일급함수를 가지고 있다."

//1급 함수이기에 가능한 것들
let b = 10;

//1급 함수이기에 매개변수에 함수를 선언하는 것이 가능하다
const add10 = function (a) {
    return 10 + b;
};


//1급 함수이기에 함수를 인자로 전달하는 것이 가능하다
function apply(arr, op) {
    return arr.map(op);
}
apply([1,2,3], add10);

//1급 함수이기에 함수안에서 또다른 함수를 반환하는 것이 가능하다
function makeAdd(v1){
    return function(v2){
        return v1 + v2;
    };
}

//반환되어진 함수를 이렇게 사용할 수가 있다
const add3 = makeAdd(3);
console.log(add3(10));
const add7 = makeAdd(7);
console.log(add7(10));

자바스크립트의 call stack 맛 보기

function f1() {
    const v1 = 123;
    console.log(v1);
};
const v2 = 456;
function f2() {
    f1();
    console.log(v2);
}
f2();

call stack :: 함수의 실행정보를 저장한다
javascript에서 이러한 call stack에 담기는 정보를 execution context라고 부른다
위의 function함수들을 감싸고있는 큰 함수가 하나 있고, 그것이 실행되어질 때 global execution context가 실행된다고 볼 수 있다

1. global execution context가 콜스택에 담긴다
2. f2()를 만났을 때 이를 실행하기 위한 execution context가 만들어진다
3. f2()를 실행하는 과정에서 f1()을 만나게 되고, 현재 실행중인 f2의 execution context를 콜스택에 넣는다
4. f1()이 실행되면서 새로운 e.c가 생성된다
5. f1()이 실행되어지는 과정에 const지역변수가 나오게 되는데,
   이 지역변수의 정보를 가지고 있는 것을 lexical enviroment라고 부른다(execution context안에 map자료형으로 존재 {v1 : 123})
6. f1()실행이 끝나면 현재의 execution context가 삭제된다.
7. call stack에서 마지막에 저장되어진 것 (f2의 e.c)을 가지고 온다
8. 현재 f2에 lexical enviroment값은 비어있는 값이다. f1이랑 다르게 지역변수가 없기 때문에
9. v2를 출력하려고 하지만 없다. 하지만 이런 경우 상위 지역변수인 v2를 찾게 된다. v2 = 456 왜 이런지는 나중에
10. f2() 에 대한 e.c가 삭제된다.
11. 마지막 global e.c를 꺼내온다. global영영의 l.e에 v2가 존재한다. {v2 : 456}
12. f2() 에서 v2에 대한 변수를 여기서 찾게 된다

내용이 겁나 길지만 그냥 콜스택에서 하나씩 담아두고 하나씩 꺼내온다는 걸 세세하게 쓴 내용일 뿐이니 그 정도만 이해해라. 근데 e.c , l.e의 성질은 꼭 알고가자