[JavaScript] 클로저

 

 

 

● 클로저(Closure) : 함수와 함수가 선언된 어휘적 환경의 조합.

                                어휘적(lexical)? 주변에 있는 글자들 생각하시면 돼요)

 

 

▶ 클로저 함수

 

: 함수를 리턴하는 함수. 외부 함수의 변수에 접근할 수 있는 내부 함수.

//클로저 함수의 기본 형태; 함수를 맅컨하는 함수
//const adder = x => y => x + y;

const adder = function(x) {
	return function(y) {
    	return x + y;
    }
}
//외부 함수는 y에 접근 불가, 내부 함수는 x에 접근 가능

 

 

- 데이터를 보존하는 함수로 이용할 수 있다. 

  → 외부 함수(adder)의 실행이 끝나더라도, 외부 함수 내 변수(x)를 사용할 수 있다.

//이런 식으로 사용할 수 있음.
//특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용하기

const tagMaker = tag => content => `<${tag}>${content}</${tag}>`

const divMaker = tagMaker('div');
divMaker('Hello World')  //'<div>Hello World</div>'

 

 

- 정보의 접근을 제한할 수 있다. (캡슐화)

//클로저 모듈 패턴
//모듈화? 함수 재사용성을 극대화하여 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것.

const makeCounter = () => {
	let value = 0;
    
    return {          //객체에 담아 여러 개의 내부 함수를 리턴
    	increase: () => {
        	value = value + 1
        },
        decrease: () => {
        	value = value - 1
        },
        getValue: () => value
    }
}

const counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.decrease();
counter1.increase();
counter1.getValue(); // 1

 

 

 

---

 

종합 퀴즈 문제 풀이

 

let x = 30;

function get () { return x; }
function set (value) { x = value; }

set(10);
let result = get(20);

//result? 10
//set함수는 매개변수 value를 통해 전달받은 값을 전역 변수 x에 할당한다.
//즉, set(10)이 실행되면 전역의 x에 할당된 값이 30에서 10으로 변경됨.

 

 

 

let x = 10;

function outer () {
  let x = 20;

  function inner () {
    x = x + 10;
    return x;
  }
  inner();
}

outer();
let result = x;

//result? 10
//변수 result에 할당된 값은 전역 스코프의 x이므로, 
//outer함수가 호출되어도 아무런 영향을 받지 않는다.

 

let x = 10;

function outer () {
  x = 20;               // <= 위 예시와 다른 부분

  function inner () {
    let x
    x = x + 20;
    return x;
  }
  inner();
}

outer();
let result = x;

//result? 20
//outer 함수가 전역 변수 x에 20을 재할당한다.
//outer 내부에서 inner 함수가 호출되고 있긴 하지만, 
//inner 함수는 바깥 스코프에 아무런 영향을 미치지 않는다.

 

let x = 10;

function outer () {
  x = 20;
  function inner () {
    x = x + 20;          / <= 위 예시와 다른 부분
  }
  inner();
}

outer();
let result = x;

//result? 40
//outer, inner 함수 모두 전역에 선언된 x값을 변경하는 함수임.

 

 

 

var a = 0;
function foo() {
    var b = 0;
    return function() {
        console.log(++a, ++b);
    };
}

var f1 = foo();
var f2 = foo();

f1(); // 1 1
f1(); // 2 2
f2(); // 3 1
f2(); // 4 2

//변수 a 는 글로벌 변수, 변수 b 는 로컬 변수.
//변수 b 는 함수 안에 선언되어 있기 때문에 f1()을 실행할 때, f2()를 실행할 때 각각 카운트가 올라가는 것이고,
//변수 a 는 함수 밖에 선언되어 있기 때문에 f1(), f2() 중 어떤 것을 실행해도 카운트가 올라간다.