JAVASCRIPT 클로져

이준규·2022년 4월 22일

javascript

목록 보기

1/1

기초 개념으로 함수의 스코프부터 이해하고 갈게요

var x = 'a';
function foo() {
  var x = 'b';
  x = 'c';
}
foo();
alert(x);  // a

함수 foo 안에있는 x 는 지역변수
최상단의 x 는 전역변수 (window객체의 속성)
alert 은 전역 x 를 출력한 것임

그렇다면 foo 함수 내부에서 전역 x 변수를 변경하고 싶으면 ?

this를 이용하면 되겠죠

var x = 'a';
function foo() {
  var x = 'b';
  this.x = 'c';
}
foo();
alert(x); // c

자바스크립트는 변수의 범위를 호출한 함수의 지역 스코프부터 전역 스코프까지 점차 넓혀가며 찾는 것입니다. (스코프체인)

여기서 정확히 이해하기 위한 실행 컨텍스트에 대해 아래에 정리해볼거임.

라는 개념은 내부함수는 변수를 찾지 못하면 전역 스코프까지 범위를 넓혀가며 변수를 찾는 관계.

이내부함수에서는 외부함수의 변수에 접근 가능하지만 외부 함수에서는 내부함수의 변수에 접근 할 수 없다.

짚고 갈 개념: 스코프는 함수가 호출될 때가 아닌 선언할 때 생긴다.

예시)

var x = 'a';
function foo() {
  console.log(x);
}
function boo() {
  var x = 'b';
  foo();
}
boo();

출력ㅣ a
foo 함수는 선언될 때 전역의 x 을 가리키고 있고 이것이 다른 것을 가리키게 할 순 없음.

전역컨텍스트는 함수의 인자(arguments)가 없음.
스코프체인은 자기 자신이며 this는 기본적으로 window이다.

variable 객체에 변수들이 key: value 형태로 들어감.

함수의 실행 순서대로 생성되고
후입선출 의 원리로 가장 나중에 실행된 함수가 종료되며 차례로 사라집니다.

function a() {
  function b() {
    function c() {
    }
  }
}

생성: a> b> c
c 가 종료되어야 b > a 종료.

var makeClosure = function () {
  var x = 'a';
  return function () {
  	console.log(x);
  }
}
var closure = makeClosure();
closure();

console.log(x);에서의 x 는 내부에서 생성한 변수도 아니고 매개변수도 아니다. 비공개변수라고 할 수 있음.

function() { console.log(x) }을 이 때
변수 x 가 있는 스코프의 클로저라고 부를 수 있다.

참고)

백엔드