[JS] Closure 퀴즈

JavaScript Closure 이해도 평가 퀴즈

퀴즈1

function sayHello(name) {
  var text = 'Hello ' + name;
  var say = function() { console.log(text); }
  say();
}
sayHello('Joe'); //

퀴즈2

function sayHello2(name) {
  var text = 'Hello ' + name; // Local variable
  var say = function() { console.log(text); }
  return say;
}
var say2 = sayHello2('Bob');
say2(); //

퀴즈3

function say667() {
  // Local variable that ends up within closure
  var num = 42;
  var say = function() { console.log(num); }
  num++;
  return say;
}
var sayNumber = say667();
sayNumber(); //

퀴즈4

var gLogNumber, gIncreaseNumber, gSetNumber;
function setupSomeGlobals() {
  // Local variable that ends up within closure
  var num = 42;
  // Store some references to functions as global variables
  gLogNumber = function() { console.log(num); }
  gIncreaseNumber = function() { num++; }
  gSetNumber = function(x) { num = x; }

setupSomeGlobals();
gIncreaseNumber();
gLogNumber(); //
gSetNumber(5);
gLogNumber(); //

var oldLog = gLogNumber;

setupSomeGlobals();
gLogNumber(); //

oldLog(); //

퀴즈5

function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + i;
        result.push( function() {console.log(item + ' ' + list[i])} );
    }
    return result;
}

function testList() {
    var fnlist = buildList([1,2,3]);
    // Using j only to help prevent confusion -- could use i.
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}

 testList(); //

퀴즈6

function sayAlice() {
    var say = function() { console.log(alice); }
    // Local variable that ends up within closure
    var alice = 'Hello Alice';
    return say;
}
sayAlice()(); //

퀴즈7

function newClosure(someNum, someRef) {
    // Local variables that end up within closure
    var num = someNum;
    var anArray = [1,2,3];
    var ref = someRef;
    return function(x) {
        num += x;
        anArray.push(num);
        console.log('num: ' + num +
            '; anArray: ' + anArray.toString() +
            '; ref.someVar: ' + ref.someVar + ';');
      }
}
obj = {someVar: 4};
fn1 = newClosure(4, obj);
fn2 = newClosure(5, obj);
fn1(1); // 
fn2(1); // 
obj.someVar++;
fn1(2); // 
fn2(2); //

JavaScript Closure(클로저) 요점 정리

• 함수 안에서 function 키워드를 쓸 때마다 클로저가 사용된다.
• 함수 안에서 eval() 함수를 호출할 때마다 클로저가 사용된다. eval하는 구문도 함수의 지역 변수를 참조할 수 있다. 그리고 eval('var foo = ...')와 같이 eval에서 새 지역 변수를 만들 수도 있다.
• 함수 안에서 new ConstructorFunction(...) 생성자 함수를 호출할 때는 클로저가 생성되지 않는다. (생성자 함수는 외부 함수의 지역 변수를 참조할 수 없다.)
• JavaScript의 클로저는 함수가 종료할 때까지만 모든 지역 변수의 복사본을 지니고 있다고 보면 된다.
• 아마도 이렇게 생각하는 것이 가장 좋다. 항상 함수의 시작 부분에서 클로저가 만들어지고, 그 때 클로저로 지역 변수들이 더해진다.
• 클로저를 포함한 함수가 호출될 때마다 새로운 지역 변수들의 집합이 저장된다. (클로저를 포함한 함수란 다음을 가리킨다. 내부에서 또다른 함수를 정의한다. 그 내부 함수에 대한 참조가 반환되거나 어떤 방식으로든 외부로의 참조가 유지되어야 한다.)
• ?
• ?
• 함수 내부의 함수 정의 내부의 함수 정의를 발견할 수도 있다. 클로저가 한 단계 이상일 수 있다는 말이다.
• 저자는 보통 클로저를 함수와 그 함수를 따라다니는 변수들, 이렇게 두 가지를 의미한다고 생각한다.
• ?

출처 : Stackoverflow