[javascript] Angular와 자바스크립트에서의 변수 스코프 이해하기

21 Dec 2023

javascript

변수 스코프는 Angular 및 JavaScript 애플리케이션 개발에서 매우 중요한 개념 중 하나입니다. 변수 스코프는 변수가 어디서 접근 가능한지를 결정하며, 코드에서 변수를 어떻게 사용하는지에 영향을 줍니다.

1. 전역 스코프 (Global Scope)

전역 스코프는 어떤 함수나 블록 안에 위치하지 않은 변수를 말합니다. 이 변수들은 어떤 곳에서든 접근할 수 있습니다.

var globalVar = "I am a global variable";

function doSomething() {
  console.log(globalVar); // "I am a global variable"
}

2. 지역 스코프 (Local Scope)

지역 스코프는 특정 블록 안에서 선언된 변수를 말합니다. 이 변수들은 해당 블록 안에서만 접근 가능합니다.

function doSomething() {
  var localVar = "I am a local variable";
  console.log(localVar); // "I am a local variable"
}

3. 함수 스코프 (Function Scope)

JavaScript는 함수 스코프를 가지고 있습니다. 함수 안에서 선언된 변수는 해당 함수 안에서만 유효합니다.

function doSomething() {
  var funcVar = "I am a function-scoped variable";

  function innerFunction() {
    console.log(funcVar); // "I am a function-scoped variable"
  }

  innerFunction();
}

4. 블록 스코프 (Block Scope)

ES6에서부터 도입된 블록 스코프는 중괄호({}) 내에서 선언된 변수를 말합니다. 이 변수들은 해당 블록 안에서만 유효합니다.

function doSomething() {
  if (true) {
    let blockVar = "I am a block-scoped variable";
    console.log(blockVar); // "I am a block-scoped variable"
  }

  console.log(blockVar); // ReferenceError: blockVar is not defined
}

Angular 애플리케이션에서도 이러한 변수 스코프 개념을 이해하고 적절하게 활용하는 것이 중요합니다.

이제 변수 스코프에 대해 간략하게 알아보았습니다. 변수 스코프의 이해는 코드의 가독성과 유지보수에 도움이 될 뿐만 아니라, 버그를 줄이고 더 효율적인 코드를 작성하는 데 도움이 될 것입니다.

참고 자료

위와 같이 Angular와 자바스크립트에서의 변수 스코프에 대해 간략히 살펴보았습니다. 변수 스코프를 올바르게 이해하고 사용하여 더욱 견고하고 효율적인 코드를 작성할 수 있게 되길 바랍니다.