클로저는 어떤 장점을 가지는가?

(1) 데이터를 보존하는 함수

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

const adder = function (x) { //  x = 외부함수의 변수 x
  return function (y) {
    return x + y;
  }
}
const add5 = adder(5); //  함수 실행이 끝나도, 5라는 값은 사용가능!

일반적인 함수는 , 실행이 끝나고 나면 함수 내부의 변수를 사용할 수 없다. 하지만 클로저는 이와 다르게, 외부 함수의 실행이 끝났더라도 외부 함수 내 변수가 메모리 상에 저장된다. => 어휘적 환경을 메모리에 저장하기 때문에 가능한 일이다.

변수 add5에는 클로저를 통해 리턴한 함수가 담겨 있다. add5는 adder 함수에서 인자로 넘긴 5라는 값을 외부 함수의 실행이 끝났음에도 x변수에 계속 담은 채로 남아있다.
그래서 아래 코드처럼 add5 함수를 사용하면서 , 보다 실용적인 사용도 가능하다.

const adder = function (x) { //  x = 외부함수의 변수 x
  return function (y) {
    return x + y;
  }
}
const add5 = adder(5); //  함수 실행이 끝나도, 5라는 값은 사용가능!
add5(7) // 12
add5(10) //10

(2) 보다 실용적인 예제 : HTML 문자열 생성기

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

const divMaker = tagMaker('div');
divMaker('hello') // '<div>hello</div>
divMaker('codestates') // '<div>codestates</div>

const anchorMaker = tagMaker('a');
anchorMaker('go') // '<a>go</a>'
anchorMaker('urclass') // '<a>urclass</a>'

>
다음은 클로저를 이용해 HTML 문자열을 만드는 예제이다.
예제에서 `divMaker` 함수는 'div'라는 문자열을 'tag'라는 변수에 담아두고 있고, 'anchorMaker'함수는 'a'라는 문자열을 'tag'에 담아두고 있다.
클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 해준다.