WEB/JavaScript

[JavaScript] 즉시 실행함수/ 클로저 및 scope chaning

디벨로펄 2023. 9. 6.
반응형

즉시 실행 함수

즉시 실행되는 함수

(function add(a, b){
       console.log(a+b);
}(3,4));

a, b라는 변수가 코드가 실행 후 사라지게 하고 싶을 경우, 즉시 실행함수 활용

-> 같은 변수명이 밖에서 사용되지 않았으면 좋겠을 경우, 활용하도록 한다.

 

호출없이 사용되기 때문에, framework에서 많이 사용된다.

 

 

클로저

디자인 패턴 중 하나로,  javascript에는 접근제어자가 없기 때문에, 클로저를 활용하여 문제를 해결할 수 있다.

ex) count -> java에서는 static private int count 선언하면 아주 간단히 해결

javascript에서는 function  내부에서 function을 return하도록 하여 return 된 function을 사용하도록 한다.

문제상황

function count() {
    var cnt = 0; //상태가 유지되어야 함. var cnt=0; 은 count호출마다 초기화됨.
    return ++cnt;
}

console.log(count()); //1
console.log(count()); //1

var cnt = 0; // 이렇게 사용할 경우 cnt를 예기치 못하게 변경될 수도 있다. 
function count1() {
    return ++cnt;
}
console.log(count1()); //1
cnt=100;// 이렇게 예기치 못하게 변경될 수 있음.
console.log(count1());//101

문제 해결 상황

// 클로저 - 디자인 패턴 중 하나 
// scope chaining  나한테 변수가 없으면, 자신을 호출한 함수를 찾아가서 변수를 찾는다.
// javascript 접근 제한자가 없어서 함수를 활용해서 풀어줌..
function count2(){
    var cnt=0;
    return function(){
        return ++cnt;
    }
}// garbage collector가 count2를 지우지 않는다.(cnt가 계속 사용되기 때문에)
var fncnt= count2();
console.log(fncnt());
console.log(fncnt());

Scope Chaining : 실행되는 함수에서, 선언된 변수를 찾을 수 없다면, 자신을 호출한 상위 함수의 변수를 찾아서 사용하도록 한다.

반응형

댓글