[JavaScript]자바스크립트_스코프 클로저

 

💻 핵심

클로져

함수가 속한 렉시컬 스코프를 기억하여 렉시컬 스코프 밖에서도 스코프에 접근가능하도록 해주는 기능

 

예제

function foo(){
	var a=2;
    function bar(){
    	console.log(a);
    }
    return bar();
}
var baz= foo();
baz(); //2

 

 

함수 bar()는 foo() 내부 렉시컬 스코프에 존재하고,  이 bar()는 foo() 스코프에 대한 클로저를 가집니다.

 

변수에 foo()를 대입하여, 반환된 bar()함수를 호출하여, bar() 를 렉시컬 스코프 외부에서 실행

 

💡 bar()는 foo()의 호출이 끝나더라도, 여전히 해당 스코프에 대한 참조를 가짐 : 클로저

 

함수는 처음 선언된 곳의 스코프에 대한 참조를 유지

👉 어디에서 해당 함수를 실행하든 클로저 작용

 

💻 반복문과 클로져

for(var i =1; i<=5; i++){
	setTimeout(function timer(){
    	console.log(i);
    }, i*1000);
}

해당 반복문은 6만 5번이 출력된다.

 

반복문안의 총 5개의 함수(setTimeOut)가 모두 같이 글로벌 스코프를 공유하고, 이에 변수 i가 반복문이 끝날 때의 수 6을 사용하기 때문입니다.

 

👉 각 스코프의 자체 변수 사용

for(var i =1; i<=5; i++){
	(function(){
    	var j = i;
    	setTimeout(function timer(){
            console.log(i);
        }, i*1000);
    })();
}

👉 let 선언문 사용 (하나의 블록 스코프 별 변수)

for(let i =1; i<=5; i++){
	setTimeout(function timer(){
    	console.log(i);
    }, i*1000);
}

 

💻 모듈

 

클로져를 자바스크립트 모듈 패턴으로 이용가능

 

💡 모듈 패턴

function CoolModule() { 
  var something = "cool"; 
  var another = [1, 2, 3]; 
  function doSomething() { 
  	console.log( something ); 
  } 
  function doAnother() { 
  	console.log( another.join( " ! " ) ); 
  } 
  return { 
    doSomething: doSomething, 
    doAnother: doAnother 
  }; 
} 
var foo = CoolModule(); 
foo.doSomething(); // cool 
foo.doAnother(); // 1 ! 2 ! 3

👉 CoolModule함수를 호출하여 foo라는 인스턴스를 생성

👉 내장 함수들에 대한 참조를 가진 객체 를 반환하여 모듈 처럼 사용가능

+ 내장 데이터 변수에 대한 참조는 비공개로 숨겨져 있음.

 

싱글톤 패턴 (IIFE사용)

var foo = {function CoolModule() { 
  var something = "cool"; 
  var another = [1, 2, 3]; 
  function doSomething() { 
  	console.log( something ); 
  } 
  function doAnother() { 
  	console.log( another.join( " ! " ) ); 
  } 
  return { 
    doSomething: doSomething, 
    doAnother: doAnother 
  }; 
}(); 
foo.doSomething(); // cool 
foo.doAnother(); // 1 ! 2 ! 3

📍 모듈 패턴 조건

• 최외곽 함수가 존재하고, 최소 한번은 호출
• 최외과 함수는 최소 하나의 내부 함수 반환