FrontJavascript

Closure part2

javascript, weirdparts

공장에서 정해진 포멧에 따라 제품들을 생산하는 것처럼 팩토리패턴은 전체 로직을 담은 팩토리함수를 생성, 클로저를 활용해서 반복되는 인자를 기본값으로 하는 함수를 재정의 하고, 호출하는 방식이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// factory function
function makeGreeting(language) {
    return function(firstname, lastname) {
        
        //inside function
        if (language === 'en') {
            console.log('Hello ' + firstname + ' ' + lastname);
        }
         
        if (language === 'es') {
            console.log('Hola ' + firstname + ' ' + lastname);
        }
    }
}
// 매번 호출마다 새로운 execution context 생성
var greetEnglish = makeGreeting('en');
var greetSpanish = makeGreeting('es');

// 직접 language 접근못하지만, 사용하는 함수
greetingEnglish('John', 'Doe');
greetingSpanish('John', 'Doe');

코드 실행 시 makeGreeting(‘en’) 을 만나면 execution context 를 생성하고 en을 할당한다.

makeGreeting(‘es’) 동일하게 진행되고, 함수실행이 끝나면 language 만 남게된다.

그 다음 greetingEnglish(), greetingSpanish() 가 실행되면 각각의 outer environment 에서 language를 참조

즉, 클로저를 통해 각각의 langauge를 참조하여 각각의 함수를 실행하고 결과를 출력하게 된다.

Closure and Callback

콜백함수는 다른 함수에 인자로 넘긴 함수로, 다른함수 실행이 끝나면 실행되도록 한 함수이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function sayHiLater() {
   //외부변수 greeting 참조, closure
   var greeting = 'Hi';
    
    setTimeout(function() {
        console.log(greeting);
    }, 3000);
}

sayHiLater();

function tellMeWhenDone(callback) {
    var a = 1000;
    var b = 2000;
    
    callback(); // 인자로 넣은 함수
}

tellMeWhenDone(function() {
   console.log("I'm done!'); 
});

tellMeWhenDone(function() {
   alert("I'm done!'); 
});

tellMeWhenDone(function() {
   console.log("All done'); 
});

Call & Apply &Bind

Closure part1

Share