스코프, 클로져(Closure)

https://dmitripavlutin.com/simple-explanation-of-javascript-closures/

스코프, 클로져

스코프

변수이름,함수이름,클래스 이름과 같은 식별자가
선언된 위치에 따라 다른 코드에서 자신이
참조될 수 있을지 없는지 결정되는것을 스코프라고한다.

스코프체인

지역스코프에서, 전역 스코프로
현재 참조해야하는곳에 변수가 없으면
점점 외부함수, 전역으로 나가면서
찾아내는것을 스코프체인 이라고한다.

최종적으로 전역에도 없으면 레퍼런스 에러를 출력하다.

그리고 하위에서 상위로는 참조하지만
상위에서 하위로는 참조하지않는다.

스코프 레벨

1.블록레벨
->if,for,함수..
2.함수레벨
->함수만

상위 스코프

함수가 호출되는 시점에결정
->동적스코프
함수가 정의되는 시점에 결정
->정적스코프(렉시컬스코프)

자바스크립트 함수는 만들어지면
내부슬롯에 상위 스코프 참조를 저장한다.

클로져

중첩함수가 외부함수의 변수를 참조할 수있으면
그떄의 내부함수를 클로져라고한다.(외부함수가
실행되고 사라졌는데도, 생명주기가 끝나고나서도)

const x = 2;

function outer() {
  const x = 10;
  const inner = function () {
    console.log(x);
  };
  return inner;
}

const test = outer();
test();

중첩함수

상위 스코프의 식별자를 참조하고 있고
본인의 외부 함수보다 더 오래 살아있으면 클로져다.
(닫혀있는 느낌의 클로져) 이때 참조하는 변수를
자유변수라고 한다. (const x = 10)

클로져2

함수와 렉시컬 환경의 조합
함수가 생성될 당시의 외부 변수를 기억
생성 이후에도 계속 접근가능한것

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

const add3 = makeAdder(3);
console.log(add3(2));

const add10 = makeAdder(10);
console.log(add10(5));
console.log(add3(1));
console.log(add3(1));
console.log(add3(1));

여기선 add3,add10 함수가 생성된 이후에도
상위함수인 makeAdder의 x에 접근가능
왜냐면 가지고 있기 때문이다.기억하니까!
즉 찍어내도, 다른 함수에 영향을 주지않겠군

function makeCounter() {
  let num = 0; //은닉화
  console.log("은닉");
  console.log(num);
  return function () {
    console.log("내부함수에서 변수접근");
    console.log(num);
    return num++;
  };
}

let counter = makeCounter();
// function () {
//   return num++;
// };
// counter 라는녀석에 return값 내부함수를 넣어놓는거임
console.log(counter());
console.log(counter());
console.log(counter());
// console.log(num)
console.log(counter());
// 와 바로 알았다 은닉화가 되네, 접근 불가능하네 와우!

하지만 외부함수의 변수를 이용한다?
그럼 외부함수의 변수에도 변화를 주게된다.
근데 은닉화되어서 직접적으로 접근해서
바꿀 수 는 없다.

 

 - 참고한링크

https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/master/JavaScript#closure

GitHub - JaeYeopHan/Interview_Question_for_Beginner: Technical-Interview guidelines written for those who started studying progr

https://www.youtube.com/watch?v=rA1zFQggshE 

https://www.youtube.com/watch?v=tpl2oXQkGZs 

https://www.youtube.com/watch?v=PVYjfrgZhtU&t=1s