JS_Scope & Closure

Scope

JavaScript에서 Scope의 의미

Scope : 변수 접근 규칙에 따른 유효 범위

JavaScript에서 Scope의 적용 범위

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

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

1. 지역 변수일 때

let name = "Richard";
function showName() {
let name = "Jack"; // 지역 변수
// showName 함수 안에서만 접근 가능
console.log(name); // Jack
}
console.log(name); // Richard
showName();
console.log(name); // Richard

2. 전역 변수일 때

let name = "Richard";
function showName() {
name = "Jack"; // 전역 변수
// 선언(let)이 없기 때문에, 바깥 scope에 있는 name이라는 변수를 가져옴
console.log(name); // Jack
}
console.log(name); // Richard
showName();
console.log(name); // Jack

JavaScript에서 Scope 주요 규칙

중첩 규칙

Scope는 중첩이 가능 - 함수 안에 함수를 넣을 수 있음

block scope(block-level scope) vs. function scope(function-level scope)

• JavaScript는 기본적으로, 함수 단위로 자신만의 Scope를 가진다.
  ➡ var 키워드 (old way)

• 그러나, Block 단위로 Scope를 구분했을 때에 예측하기 쉬운 코드
  를 작성할 수 있다. ➡ let 키워드

let, const, var의 차이

전역 변수와 전역 객체의 의미

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

var myName = "Paul";
console.log(window.myName); // Paul
function foo() {
console.log('bar');
}
console.log(foo === window.foo); // true

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

Closure

Closure의 정의와 특징

• Clorsure : 함수와 함수가 선언된 어휘적(lexical) 환경의 조합

• 클로저 함수 : 외부 함수의 변수에 접근할 수 있는 내부 함수
  

유용한 클로저 예제

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

function adder(x) {
  return function(y) {
    return x + y;
  }
}

adder(2)(3); // 5

let add100 = adder(100); // x의 값을 고정해놓고 재사용 가능
add100(2);  // 102
add100(10); // 110

let add5 = adder(5);
add5(2); // 7

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