[Javascript] Scope & Closure

한별·2024년 3월 31일

Javascript

목록 보기

18/25

Scope

식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것

var x = '전역 x';

function outer() {
  var y = 'outer 지역 y';
  console.log(x); // 전역 x
  console.log(y); // outer 지역 y
  
  function inner() {
    var x = 'inner 지역 x';
    console.log(x); // inner 지역 x
    console.log(y); // outer 지역 y
  }
  
  inner();
}

outer();
console.log(x);
console.log(y);

Scope Chain

스코프가 계층적으로 연결되어 있는 것

Scope Level

블록 레벨 스코프: let, const
함수 레벨 스코프: var

if (true) {
  let letVal = 'let';
  var varVal = 'val';
}

// letVal;
varVal // val

Closure

const x = 1;

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

const ella = outer(); // outer의 생명 주기 마감
ella(); // outer의 지역 변수 10 출력

위와 같이 생명 주기를 마감한 외부 함수 outer의 지역 변수 x를 참조할 수 있는 inner와 같은 함수를 클로져라고 한다. 즉, 중첩 함수에서 상위 스코프의 식별자를 참조하고 있고 외부 함수보다 더 오래 살아있다면 클로저이다. 그리고 const x = 10; 을 자유 변수라고 한다.