JavaScript - Scope, Closure함수

Scope

Scope란, 변수 접근 규칙에 따른 유효범위이다.

변수와 그 값이 어디서부터 어디까지 유효한지 판단하는 범위. JavaScript는 기본적으로, 함수가 선언되는 동시에 자신만의 Scope를 가진다.

let greeting = 'Hi';
function greetSome() {
let firstName = 'NR';
return greeting + ' ' + firstName;
}

greetSomeone(); // => 'Hi NR'
firstName; // => ReferenceError 참조에러가 발생한다.

안쪽 Scope에서 바깥 변수/함수를 접근하는 것은 가능
바깥쪽 Scope에서 안쪽 변수/함수를 접근하는 것은 불가능

• Scope는 중첩이 가능하여 함수안에 함수를 넣을 수 있다.
• Global Scope는 최상단의 Scope로 전역변수는 어디서든 접근이 가능하다.
• 지역변수는 함수 내 전역변수보다 더 높은 우선순위를 가진다.

var키워드, let키워드, const키워드

var : 함수단위로 자신만의 Scope를 가진다.
let : Block단위로 Scope를 구분한다.(더 예측하기 쉬운 코드)
const : 상수를 정의할 때 사용하는 키워드

• let과 동일하게 Block Scope를 따른다.
• 값을 재정의하면 TypeError

전역 범위를 대표하는 객체 window

Global Scope에서 선언된 함수, 그리고 var 키워드를 이용해 선
언된 변수는 window 객체와 연결된다.

var myName = "Paul";
console.log(window.myName); // Paul

function foo() {
console.log('bar');
}

console.log(foo === window.foo); // true

전역 범위에 너무 많은 변수를 선언하지 않는 것이 좋다. 전역 범위는 최상위 영역으로 어떤 라이브러리가 어떤 변수를 사용할지 모르기 때문이다.

선언없이 변수 초기화 금지

선언없이 초기화된 변수

선언없이 초기화된 변수는 전역 변수로 취급된다.
사용하지 않는 것이 좋다.

Closure 함수

Closure 함수란, 외부 함수에 접근할 수 있는 내부 함수

function outerFu{
  let outer = 'outer';
  console.log(outer)

  function innerFu(){     //Closure 함수
    let inner = 'inner'
    console.log(inner);
  }
  return innerFu //함수도 리턴할 수 있음

}
outerFu();
/*
ƒ innerFu(){
    let inner = 'inner'
    console.log(inner);
  }
함수 자체가 return 된다.
*/

outerFu()();
// outer
// inner
       

let inFu = outerFu();
//outer

inFu;
/*
ƒ innerFu(){
    let inner = 'inner'
    console.log(inner);
  }
*/
inFu();
//inner

Closure 예제

커링: 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법

function makeAdder(x) {
  var y = 1;
  return function(z) {
    y = 100;
    return x + y + z;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);
//클로저에 x와 y의 환경이 저장됨

console.log(add5(2));  // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산

외부 함수의 변수가 저장되어 마치 템플릿 함수와 같이 사용 가능

//앞뒤에 ^과 중앙에 원하는 문자가 들어가는 템플릿 만들고 사용하기
function MakeEmphasis(tag){
	let temple = '^' + tag +'^^';
    return function(contents){
      return temple + contents + temple
    } 
}

let ddi = MakeEmphasis('!');
ddi('I Learned');// "^!^I Learned^!^"

클로져 모듈패턴: 변수를 스코프 안쪽에 가두어 함수 밖으로 노출 시키지 않는 방법

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }  
};

var counter1 = makeCounter();
var counter2 = makeCounter();
alert(counter1.value()); /* 0 */
counter1.increment();
counter1.increment();
alert(counter1.value()); /* 2 */
counter1.decrement();
alert(counter1.value()); /* 1 */
alert(counter2.value()); /* 0 */
          

reference

• mdn-Closure