스코프(Scope)

스코프란 변수의 유효 범위를 의미합니다.

글로벌 스코프

다른 프로그래밍 언어와는 다르게 자바스크립트의 변수는 유효 범위가 전역으로 시작합니다. 예를 들어 아래와 같은 변수 선언은 자바스크립트로 접근할 수 있는 모든 영역에서 같은 값을 갖습니다.

var a = 10;

만약 함수를 만들어 아래와 같이 접근하더라도 동일한 값을 출력하게 됩니다.

var a = 10;

function getA() {
  console.log(a);
}

getA(); // 10

로컬 스코프

기본적으로 변수의 유효 범위는 전역 범위를 갖는다고 하지만, 함수 안에서 새로 선언하는 경우 함수 단위의 지역 범위인 함수 스코프를 갖습니다. 아래 코드를 보겠습니다.

var a = 10;

function getA() {
  var a = 20;
  console.log(a);
}

getA(); // 20
console.log(a); // 10

위 코드는 함수 바깥에서 변수 a를 선언하고 10을 대입한 뒤, getA()라는 함수를 선언하면서 함수 안에 변수 a를 새로 선언하고 20을 대입한 코드입니다. getA() 함수를 실행하면 함수 안의 변수인 a가 20의 값으로 콘솔에 출력됩니다. 함수의 실행이 끝나고 나서 console.log(a);로 다시 a의 값을 출력하면 10이 출력됩니다.

여기서 변수의 유효 범위는 함수 단위로 한정된다는 것을 알 수 있습니다.

스코프 체인

변수를 찾을 때 먼저 자신이 속한 스코프에서 찾고 없으면 상위 스코프에서 찾는 현상을 스코프 체인(Scope Chain)이라고 합니다.

간단한 예제로 앞의 코드를 다시 살펴보겠습니다.

// 글로벌 스코프
var a = 10;

function getA() {
  // 로컬 스코프
  console.log(a);
}

getA(); // 10

getA() 함수가 실행이 되면 먼저 지역 범위인 getA() 함수 안에서 변수 a를 찾고 getA() 함수에는 변수 a가 없기 때문에 상위 스코프인 전역 범위에서 변수 a를 다시 찾습니다.

다음 예제를 보겠습니다.

// 글로벌 스코프
var a = 10;

function outer() {
  // 외부 함수 스코프
  var b = 20;

  function inner() {
    // 로컬 함수 스코프
    var c = 30;
    console.log(a);
    console.log(b);
    console.log(c);
  }
  inner();
};
outer();

// 결과
// 10
// 20
// 30

위의 코드는 inner() 함수에서 a, b, c 변수를 참조할 때 스코프 체인에 의해서 inner() 로컬 함수 스코프, outer() 외부 함수 스코프, 글로벌 스코프의 순서로 변수를 찾습니다.

렉시컬 스코프

앞에서 자신의 스코프에서 변수를 찾고 없으면 상위 스코프에서 찾는 스코프 체인에 대해 알아보았습니다. 그렇다면 이 상위 스코프는 어떤 기준으로 정하게 되는 것일까요?

자바스크립트는 함수를 어디서 선언하였는지에 따라서 상위 스코프를 결정하는 렉시컬 스코프(Lexical Scope) 규칙을 따릅니다.

// 글로벌 스코프
var a = 10;
var b = 20;
function getA() {
  var b = a;
  getB();
}

function getB() {
  // 로컬 함수 스코프
  console.log(b);
}

getB(); // 20
getA(); // 20

위 코드에서 getB() 함수는 전역 범위에 선언되었기 때문에 호출된 위치와 상관없이 상위 스코프로 갖는 글로벌 스코프와 자기 자신인 로컬 함수 스코프를 최종 스코프를 갖게 되서 둘 다 20을 출력합니다.

이와 반대되는 개념인 다이나믹 스코프(Dynamic Scope) 규칙을 따르는 언어는 함수의 호출 위치에 따라 상위 스코프가 결정됩니다.

#!/bin/sh

A=10
B=20

getA(){
  B=$A
  getB
}

getB(){
  echo $B
}

getB # 20
getA # 10

다이나믹 스코프 규칙을 따르는 쉘 스크립트는 20, 10이 출력 됩니다.