[JavaScript] 클로저

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 

---

클로저 (1)

함수호출이 두번 발생하는 화살표함수가 있다.

const adder = x => y => x+y;
adder(5)(7);	//12

다음함수는 아래함수와 동일한 실행을 보인다.

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

adder 내부 리턴에 익명 함수는 외부의 매개변수인 x에 접근하여 덧셈값을 리턴하고 있다.

클로저는 함수를 리턴하는 함수이다.

 

클로저는 리턴하는 함수에 의해 스코프가 구분된다.

클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는데 있다.

이들은 내부 함수에서 외부함수 변수에 접근할수 있다는 특징이 있다.

다음 코드를 예시로 외부함수는 y에 접근할수 없지만

내부함수는 x에 접근할 수 있다.

 

클로저 (2)

const adder = x => y => x+y;

const add5 = adder(5);

add5의 리턴 타입은 f로 function이다.

add5를 출력하면 y => x+y라는 내부함수를 얻을수 있다.

다음 함수 add5에(기능을 함수의 기능을 하기때문에 함수라고 부르겠습니다.) y값에 해당하는 값들을 넣으면 어떤 결과를 얻을까

add5(7)		//12
add5(10)	//15

add5는 adder에서 외부변수 x를 5로 고정된 함수를 저장 했다.

그래서 y값에 7과 10을 더했을때 각각을 더한 값을 출력한다, 

 

여기서 add5(7)과  add5(10)은 서로 출력값에 영향을 주지 않았고, 같은 x값(5)을 사용한다.

 

클로저는 외부함수의 실행이 끝나더라도, 외부함수 내 변수가 메모리 상에 저장된다.

const cal = () => {
    let value = 0;

    return{
        plus: ()=>{
            value++
        },
        minus: ()=>{
            value--
        },
        getvalue: ()=> value
    }
}

const cal1 = cal();	//{plus: ƒ, minus: ƒ, getvalue: ƒ}
cal1;

cal함수를 바꾸지 않고 value의 값을 새로 할당 할수 있을까?

외부스코프에서 내부 스코프에 접근할수 없는 규칙 때문에 value는 직접 수정이 불가능하다. 대신 리턴 객체에 있는 메소드를 통해 간접적으로 조작할수 있다.

이것이 정보의 접근제한 캡슐화이다.

value가 전역변수로 선언되었을 경우 다른 함수나 로직들에 의해 실수로 값이 변경될 가능성있다.

캡슐화하면 안전하게 값을 보호 할 수 있다.

const cal1= cal()
cal1.plus();
cal1.plus();
cal1.plus();
cal1.getvalue();	//3

const cal2 = cal();
cal2.plus();
cal2.minus
cal2.plus();
cal2.getvalue();	//1

cal1과 cal2의 value는 서로 영향을 끼치지 않고 보존된다.

이와 같이 함수의 재사용성을 극대화 하여, 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화라고 한다.

 

---

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

var f1 = func();
var f2 = func();

f1(); // --> A
f1(); // --> B
f2(); // --> C
f2(); // --> D

다음 코드의 출력을 생각해보자

A번째는 ++가 실행된 1 1을 출력할 것이다.

B번쨰도 증가해서 2 2가 실행된다.

 

글로벌 변수인 a는 값을 유지하고, 로컬 변수인 b는 f2가 실행될때 재선언된다

C번쨰는 3 1을 출력하고

D번째는 4 2를 출력한다