자바스크립트 함수의 유효 범위 (Scope of Functions)

10 Sep 2023

javascript

자바스크립트에서 함수는 유효 범위(scope)를 갖는 중요한 개념입니다. 함수의 유효 범위를 이해하면 변수의 접근성과 생명주기에 대한 통제가 가능해지며, 코드의 유지 보수성과 가독성이 향상됩니다. 이번 블로그 포스트에서는 자바스크립트 함수의 유효 범위에 대해 알아보겠습니다.

전역 범위 (Global Scope)

자바스크립트에서 함수의 가장 바깥 범위는 전역 범위(global scope)입니다. 전역 범위에 선언된 변수는 어디서든지 접근할 수 있습니다. 다음은 전역 범위에서 변수를 선언하는 예입니다.

var globalVariable = 'This variable is in the global scope';

function globalFunction() {
  // 전역 범위에서 선언된 변수에 접근할 수 있음
  console.log(globalVariable);
}

globalFunction(); // This variable is in the global scope

지역 범위 (Local Scope)

함수 안에서 선언된 변수는 지역 범위(local scope)를 갖습니다. 지역 범위는 해당 함수 안에서만 접근할 수 있는 범위입니다. 다음은 함수 안에서 지역 변수를 선언하는 예입니다.

function localFunction() {
  var localVariable = 'This variable is in the local scope';

  // 해당 함수 안에서만 접근할 수 있음
  console.log(localVariable);
}

localFunction(); // This variable is in the local scope
console.log(localVariable); // ReferenceError: localVariable is not defined

지역 변수는 해당 함수의 실행이 끝나면 메모리에서 제거되므로, 함수 외부에서는 접근할 수 없습니다.

중첩 범위 (Nested Scope)

자바스크립트에서는 함수 안에 또 다른 함수를 정의할 수 있습니다. 이는 중첩 범위(nested scope)를 만드는 것을 의미합니다. 중첩 범위는 각각의 함수가 독립적인 유효 범위를 갖기 때문에, 변수 이름이 겹치더라도 충돌이 발생하지 않습니다. 다음은 중첩 범위를 이용한 예입니다.

function outerFunction() {
  var outerVariable = 'Outer variable';

  function innerFunction() {
    var innerVariable = 'Inner variable';

    // 내부 함수에서 외부 함수의 변수에 접근 가능
    console.log(outerVariable);
    console.log(innerVariable);
  }

  innerFunction();
}

outerFunction();
// Outer variable
// Inner variable

console.log(outerVariable); // ReferenceError: outerVariable is not defined
console.log(innerVariable); // ReferenceError: innerVariable is not defined

중첩 범위에서는 외부 함수의 변수에 접근할 수 있지만, 외부에서는 내부 변수에 접근할 수 없습니다.

변수의 유효 범위 설정하기

자바스크립트에서는 변수에 유효 범위를 명시적으로 설정할 수 있습니다. 이를 위해서는 var, let, const 키워드를 사용합니다.

var: 함수 범위(function scope)를 갖습니다.
let: 블록 범위(block scope)를 갖습니다. ES6에서 도입되었습니다.
const: 블록 범위(block scope)를 갖으며, 상수로 선언된 변수입니다.

다음은 변수의 유효 범위를 설정하는 예입니다.

function scopeExample() {
  var functionScopeVariable = 'Function scope variable';

  if (true) {
    let blockScopeVariable = 'Block scope variable';
    const constantVariable = 'Constant variable';

    console.log(blockScopeVariable);
    console.log(constantVariable);
  }

  console.log(functionScopeVariable);
  console.log(blockScopeVariable); // ReferenceError: blockScopeVariable is not defined
  console.log(constantVariable); // ReferenceError: constantVariable is not defined
}

scopeExample();
// Block scope variable
// Constant variable
// Function scope variable

let과 const 키워드를 사용하면 변수가 선언된 블록 내에서만 유효하게 됩니다.

결론

자바스크립트 함수의 유효 범위는 변수의 접근성과 생명주기를 관리하는 데 중요한 역할을 합니다. 전역 범위, 지역 범위, 중첩 범위 등 다양한 유효 범위를 이해하고 사용함으로써 좀 더 효율적인 코드 작성이 가능해집니다. 변수의 유효 범위를 명시적으로 설정하는 것은 가독성과 코드 유지 보수성을 향상시키는 데 도움이 됩니다. 자바스크립트 개발에서 함수의 유효 범위를 제대로 이해하고 활용하는 것은 프로그래머로서 중요한 스킬입니다.