[Nov. 04, 2020] Scope(유효범위)

Alpaca·2020년 11월 9일
JavaScriptscope유효범위
0

Javascript

목록 보기
1/6

유효범위(Scope)

Scope의 정의

Scope(유효범위, 스코프)는 javascript(이하 'js')를 포함한 모든 프로그래밍 언어의 기본적인 개념이다.
아래의 예시를 보고 결과값을 생각해보자.

var x = 'global';

function foo () {
  var x = 'function scope';
  console.log(x);
}

foo(); // ?
console.log(x); // ?

이름이 같은 변수(variable) x가 중복 선언 되었다.
전역(global)에서 변수 x를 참조할 때, 그리고 함수(function) foo 내부에서 변수 x를 참조할 때 이름이 중복된 2개의 변수 중 어떤 변수를 참조해야 하는가? js는 어떻게 변수를 식별하고 있는 걸까?
스코프는 참조 대상 식별자(identifier == 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. js는 이 규칙대로 식별자를 찾는다.

즉, 스코프는 식별자 이름의 충돌을 방지하는 역할을 한다.

변수는 전역, 코드 블록(code block == if, for, while, try/catch 등) 또는 함수 내에 선언하며 코드 블록이나 함수는 중첩될 수 있다.

Scope의 구분

js에서는 스코프를 2가지로 구분한다.
1. Global scope(전역 스코프)
2. Local scope || Function-level scope(지역 스코프)

모든 변수는 스코프를 가지므로 변수의 관점에서 스코프를 구분하면
1. Global variable(전역 변수)

전역 변수는 코드 어디에서든 참조할 수 있다.
2. Local variable(지역 변수)
지역(함수)내에서 선언된 변수로 그 지역(함수) 및 하부지역(하부함수 == Nested function)에서만 참조할 수 있다.

javascript 스코프의 특징

js의 스코프는 타 언어와는 다른 특징을 가지고 있다.
위에서 local scope를 Function-level scope라고도 부르는 이유는
대부분의 C-family language는 블록 레벨 스코프(block-level scope)를 따른다.
블록 레벨 스코프란 코드 블록({...})내에서 유효한 스코프를 의미한다.
여기서 "유효하다"는 "참조(reference)할 수 있다"라는 뜻이다.

하지만 js는 함수 레벨 스코프(Function-level scope)를 따른다.
이 말은 곧 코드 블록({...})에서 선언하였더라도 이 변수는 전역변수가 된다는 얘기이다.

단, ECMAScript 6(이하 'ES6')에서 도입된 let keyword를 통해 블록 레벨 스코프를 사용할 수 있게 되었다.

var x = 0;
{
  var x = 1;
  console.log(x); // 1
}
console.log(x);   // 1

let y = 0;
{
  let y = 1;
  console.log(y); // 1
}
console.log(y);   // 0

전역 스코프(Global scope)

전역에서 변수를 선언하면 이 변수는 어디서든 참조할 수 있는 전역 스코프를 갖는 전역 변수가 된다.
var keyword로 선언한 전역 변수는 전역 객체(Global object)인 window의 property이다.

객체(object)에 있는 값을 속성(property)라고 하며, 그 값(value)들 중 함수로 된 값들을 메소드(method)라 부른다. [image]

var global = 'global';

function foo() {
  var local = 'local';
  console.log(global);
  console.log(local);
}
foo(); // 'global', 'local'

console.log(global); // 'global'
console.log(local); // Uncaught ReferenceError: local is not defined

js는 타 언어와 달리 특별한 시작점(Entry point)이 없어서 위 코드와 같이 전역에 변수나 함수를 선언하기 쉽다.
하지만 이는 전역 변수의 남용으로 여러 문제들을 야기시킬 가능성이 높다.
전역변수의 사용은 변수 이름이 중복될 수 있고, 의도치 않은 재할당에 의한 상태 변화로 코드를 예측하기 어렵게 만드는 사용을 자제하는 것이 좋다.

비 블록 레벨 스코프(Non block-level scope)

if (true) {
  var x = 5;
}
console.log(x); // 5

변수 x는 코드 블록 내에서 선언되었다. 하지만 js는 기본적으로 함수 레벨 스코프를 가지므로 이와같은 선언은 블록 내에서 선언되었다하더라도 변수 x는 전역 변수가 된다.

이를 방지하려면 위에 서술한 바와 같이 ES6에서 도입된 let keyword를 사용하면 된다.

함수 레벨 스코프(Function-level scope)

var a = 10;     // global variable

(function () {
  var b = 20;   // local variable
})();

console.log(a); // 10
console.log(b); // "b" is not defined

위와 같이 함수를 즉시 실행하는 경우를 즉시 실행 함수(IIFE == immediately-invoked function expression) 라고 하며, 함수가 실행 된 후에 전역에서 바로 사라지는 특징을 가지고 있다.

js는 함수 레벨 스코프를 사용하므로 함수 내에서 선언된 매개변수(parameter)와 변수는 함수 내부에서만 유효하다. 즉, 변수 b는 지역 변수이다.

함수에는 매개변수(parameter)와 전달인자(argument == 인수)가 있는데
중학교 수학을 예를들면 f(x) = x * x라는 식이 있으면 여기서 매개변수는 x가 되고, f(3)과 같은 함수 호출 부분에서의 값 3이 함수의 전달인자가 된다.

var x = 'global';

function foo() {
  var x = 'local';
  console.log(x);
}

foo();          // local
console.log(x); // global

전역 변수 x와 지역 변수 x가 중복 선언되었다. 전역 영역에서는 전역 변수만이 참조 가능하고, 함수 내 지역 영역에서는 전역과 지역 변수 모두 참조 가능하나 위 예제와 같이 변수명이 중복된 경우, 지역 변수를 우선하여 참조한다.

이를 통해 도입부의 코드의 결과값은 각각 'function scope', 'global'인걸 알 수 있다.

다음은 함수 내의 함수가 존재하는 경우(내부 함수)를 보자.

var x = 'global';

function foo() {
  var x = 'local';
  console.log(x);

  function bar() {  // 내부 함수
    console.log(x); // ?
  }

  bar();
}
foo(); // ?
console.log(x); // ?

내부함수는 자신을 포함하고 있는 외부함수의 변수에 접근할 수 있다.
이는 클로저(closure)에서와 같이 내부함수가 더 오래 생존하는 경우, 타 언어와는 다른 움직임을 보인다.

클로저에 대해서는 추후 포스팅하여 링크를 달아놓도록 하겠다.

함수 bar에서 참조하는 변수 x는 함수 foo에서 선언된 지역 변수이다. 이는 실행 컨텍스트(execution context)의 스코프 체인(scope chain)에 의해 참조 순위에서 전역 변수 x가 뒤로 밀렸기 때문이다.

실행 컨텍스트에 대해서는 추후 포스팅하여 링크를 달아놓도록 하겠다.

var x = 10;

function foo() {
  x = 100;
  console.log(x);
}
foo(); // ?
console.log(x); // ?

함수(지역) 영역에서 전역 변수를 참조할 수 있으므로 전역 변수의 값도 변경할 수 있다.

함수 내부에서 var를 생략한 채로 선언된 변수는 전역 변수를 할당/재할당 한다.
함수 내에 함수가 들어있는 경우(내부 함수)에는 상위 함수의 변수에 대한 할당/재할당은 불가능하다.

중첩된 스코프는 가장 인접한 지역을 우선하여 참조한다.

var foo = function ( ) {

  var a = 3, b = 5;

  var bar = function ( ) {

    var b = 7, c = 11; // 이 시점에서 a = 3, b = 7, c = 11

    a += b + c; // 이 시점에서 a = 21, b = 7, c = 11

    console.log(a, b, c);

  }; // 이 시점에서 a = 3, b = 5, c = not defined

  bar( ); // 이 시점에서 a = 21, b = 5

  console.log(a, b);

};

foo(); // 21, 7, 11 && 21, 5

function funcName(){...} == var funcName = function() {...}

렉시컬 스코프(Lexical scope)

아래의 예제의 실행 결과를 생각해 보자.

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // ?
bar(); // ?

위 예제의 실행 결과는 함수 bar의 상위 스코프가 무엇인지에 따라 결정 된다.
여기에는 두가지 패턴을 예측할 수 있는데

  1. 함수를 어디서 호출하였는지에 따라 상위 스코프를 결정 == 동적 스코프(dynamic scope)
  2. 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정 == 정적 스코프(static scope) || 렉시컬 스코프(lexical scope)

js 및 대부분의 언어들은 렉시컬 스코프를 따른다.
따라서 함수 bar의 상위 스코프는 var x = 1이며,
그에 따라 위의 결과값은 foo(); == 1, bar(); == 1임을 알 수 있다.

암묵적 전역(Implicit global)

var x = 10; // 전역 변수

function foo () {
  // 선언하지 않은 식별자
  y = 20;
  console.log(x + y);
}

foo(); // 30

위 예제에서 y는 선언하지 않은 식별자이다. 따라서 Error가 발생할 것처럼 보이지만
y는 마치 선언된 변수처럼 동작한다. 이는 선언하지 않은 식별자에 값을 할당하면 전역 객체의 property가 되기 때문이다.
함수 foo가 호출되면 js 엔진은 변수 y에 값을 할당하기 위해 먼저 스코프 체인을 통해 선언된 변수인지 확인한다.
이때, 함수 foo의 스코프와 전역 스코프 어디에서도 변수 y의 선언을 찾을 수 없으므로 js 엔진은 y = 20을 window.y = 20으로 해석하여 property를 동적 생성한다.
이러한 현상을 암묵적 전역(implicit global)이라 한다.
하지만 y는 변수 선언없이 단지 전역 객체의 property로 추가되었을 뿐이다.
따라서 y는 변수가 아니고 변수가 아닌 y는 변수 호이스팅(variable hoisting)이 발생하지 않는다.

호이스팅에 대해서는 추후 포스팅하여 링크를 달아놓도록 하겠다.

// 전역 변수 x는 호이스팅이 발생한다.
console.log(x); // undefined
// 전역 변수가 아니라 단지 전역 property인 y는 호이스팅이 발생하지 않는다.
console.log(y); // ReferenceError: y is not defined

var x = 10; // 전역 변수

function foo () {
  // 선언하지 않은 변수
  y = 20;
  console.log(x + y);
}

foo(); // 30

또한 변수가 아니라 단지 property인 y는 delete 연산자로 삭제할 수 있다.
전역 변수는 property이지만 delete 연산자로는 삭제할 수 없다.

var x = 10; // 전역 변수

function foo () {
  // 선언하지 않은 변수
  y = 20;
  console.log(x + y);
}

foo(); // 30

console.log(window.x); // 10
console.log(window.y); // 20

delete x; // 전역 변수는 삭제되지 않는다.
delete y; // 프로퍼티는 삭제된다.

console.log(window.x); // 10
console.log(window.y); // undefined

최소한의 전역 변수 사용

전역 변수 사용을 최소화하는 방법 중 하나는 application에서 전역 변수 사용을 위해 다음과 같이 전역 변수 객체 하나를 만들어 사용하는 것이다.(js 개발에 참여한 Douglas Crockford의 제안)

객체에 대해서는 추후 포스팅하여 링크를 달아놓도록 하겠다.

var MYAPP = {};

MYAPP.student = {
  name: 'Lee',
  gender: 'male'
};

console.log(MYAPP.student.name); // 'Lee'

즉시실행함수(IIFE == immediately-invoked function expression)를 이용한 전역 변수 사용 억제

전역 변수의 사용을 억제하기 위해 즉시 실행 함수를 사용할 수 있다.
이 방법을 사용하면 전역 변수를 만들지 않으므로 라이브러리(library)등에서 자주 사용된다.
즉시 실행 함수는 즉시 실행 되고 그 후 전역에서 바로 사라진다.

라이브러리에 대해서는 추후 프레임워크(framework)와 함께 포스팅하여 링크를 달아놓도록 하겠다.

(function () {
  var MYAPP = {};

  MYAPP.student = {
    name: 'Lee',
    gender: 'male'
  };

  console.log(MYAPP.student.name);
}()); // 실행이 되면서 사라

console.log(MYAPP.student.name); // 'Lee'

Reference

profile
Alpaca
2020년 10월 15일 퇴사하고 개발자의 길에 도전합니다.
다음 포스트

[Nov. 10, 2020] Return

0개의 댓글