클로저 예제로 알아보기

클로저 활용 CheckPoint

아래코드에서 어떤 function이 클로저로 간주 될까?

정답 : sample함수가 리턴 하고 있는 익명함수

설명 : sample이 리턴하는 익명함수는 외부함수 sample의 스코프에 선언된 변수 value에 접근할 수 있기 때문에 클로저이다.

result의 값은 무엇일까?

const multiply = function (a) { // 외부함수이고, 매개변수로 a가 선언되어있는 a는 외부함수의 변수이다.
    return function (b) { // 함수가 리턴되는 내부함수이고, 매개변수로 b가 선언되어있는 b는 내부함수의 변수이다.  
      return a * b; // 내부함수에는 a가 선언되어있지않으므로 외부에서 a를 찾아온다. (안쪽에서 바깥으로 접근 가능 - 스코프개념)
    };
  };

  const p3 = multiply(3); // 매개변수a에3을 넣어둔채로 메모리에 저장되어있고, 안쪽 내부함수인 p3이다. -> p3; //--> f (b) {return a * b;}
  p3(5); //  독립적으로 p3(5)를 실행함으로써 값은 15가 나오지만 이 값은 어떠한 변수에도 할당이 되지 않았으므로 result에 아무런 영향 없다.  
  const result = p3(20); // p3(20) 즉 -> a = 3이 저장되어있는 상태에서 b에 20을 할당시켜주며 실행되는 함수! 

  console.log(result); //  a * b -> 3 * 20 -> 60;

내부함수가 외부함수의 변수에 접근가능한가?

= 클로저인가?

const add1 = function (a) { // 외부함수에 a라는 변수 선언되어있음
    return function (b) {
      return a + b; // 내부함수에서 외부함수의 변수 a에 접근할 수 있음.
    };
  };
// 즉 add1 내부의 익명함수는 클로저

  const add2 = function () { // 외부함수에 따로 선언된 변수 없음.
    return function (y) {
      return 10 + y; // 내부함수에서도 외부함수의 변수에 접근할 소재가 없음.
    };
  };
// 클로저가 아니다.

클로저형태의 함수를 각기 다른 변수에 선언하고 실행했을때 결과값은?

같은함수가 저장되어있는 변수 2개를 실행시켜 독립적으로 실행이되어 내부의 변수에 영향이 가는지 알수 있다.

let a = 1; // 함수 바깥에 선언된 변수 a (글로벌 변수)
  
  function sample() { // 외부 함수
    let b = 1; // 외부함수의 변수 b가 선언되어있음.(로컬 변수)
    return function () { // 내부 함수
      console.log(++a, ++b); // 내부함수에서 외부함수 b에 접근, 더 외부인 함수바깥에서 a에 접근
    };
  }

  let s1 = sample(); 
  let s2 = sample(); // 같은 함수를 할당시킨 s1, s2 이다.

  s1(); // sample()(); 실행 -> 2 2;
  s1(); // -> 3 3;
  s2(); // -> 4 2;
  s2(); // -> 5 3;
// 왜 변수 a의 값은 같이 계속 변하고 b는 각각 변하는걸까? -> 변수 b는 함수 안에 선언되어있기 때문에(=지역 변수라서) s1(),s2()실행할때 각각 변하는것이다.(독립적) 변수 a는 함수 밖에 선언되어있기때문에(=전역 변수라서) s1(),s2() 어떤것을 실행해도 변한다.