[Javascript] Javascript 스코프와 클로저에 대해서

스코프란?

어떤 변수들에 접근할 수 있는지 정의. 전역 스코프, 지역 스코프로 구분 된다.

전역 스코프

• 변수가 함수 바깥이나중괄호 밖에 선언되었다면, 전역 스코프에 정의
• 전역 스코프를 선언하면, 모든 곳에서 해당 변수를 사용할 수 있으며, 함수에서도 사용 가능
• var 를 사용하게 되면, 마지막 변수가 이전 변수를 덮어쓰기 때문에 디버깅이 어려움

지역 스코프

• 특정 부분에서만 사용 할 수 있는 변수는 지역 스코프
• 지역 스코프는 함수 스코프와 블록 스코프로 구분

함수 스코프

• 함수 내부에서 변수를 선언하면, 그 변수는 선언한 변수 내부에서만 접근 가능
• 함수 바깥에서는 해당 변수에 접근 할 수 없음
• 함수 스코프에서 const 또는 let으로 변수를 선언하게 되면, 그 변수들은 중괄호 내부에서만 접근 가능

function sayHello () {
  const hello = 'Hello CSS-Tricks Reader!'
  console.log(hello)
}
sayHello() // 'Hello CSS-Tricks Reader!'
console.log(hello) // Error, hello is not defined

• 함수 호이스팅
• 외부 함수(포함하고 있는)의 변수에 접근할 수 있는 내부 함수를 의미
• 클로저는 자신에 대한 접근, 외부 함수의 변수에 대한 접근, 그리고 전역 변수에 대한 접근

클로저

• 함수 내부에 함수를 작성할때, 클로저를 생성한것.
• 내부 함수가 외부 함수의 컨텍스에 접근 할 수 있는것을 말함
• 아래 예제는 함수 안에 다른 함수가 정의되어 있으며, 결과 값으로 'coding everybody'가 출력 된다.

function outter(){
    function inner(){
        var title = 'coding everybody'; 
        alert(title);
    }
    inner();
}
outter();

• 아래 예제는 outer 내부에 innter 함수가 정의

function outter(){
    var title = 'coding everybody';  
    function inner(){        
        alert(title);
    }
    inner();
}
outter();

• 내부에 작성된 함수가 바로 클로저이며, 클로저는 차후에 외부 함수의 변수를 사용 할 수 있기 때문에 반환하여 사용

function outerFunction () {
  const outer = 'I see the outer variable!'
  function innerFunction() {
    console.log(outer)
  }
  return innerFunction
}
outerFunction()() // I see the outer variable!

• 클로저는 외부 함수의 변수에 접근 할 수 있기 때문에, 일반적으로 두가지 목적을 위해 사용
  • 사이드 이펙트 제어
  • Private 변수 생성