TIL-JavaScript(전역변수와 지역변수, 정적 유효범위)

연시아·2022년 5월 27일
0

TIL

목록 보기
29/51
post-thumbnail

22.05.27

💡 전역변수와 지역변수

변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있습니다.

  • 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수입니다.
  • 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수입니다. 함수 외부에서는 접근할 수 없습니다.
<!DOCTYPE html>
<html>
<head>
<body>
<script type="text/javascript">
var vscope = 'global';      // 전역변수(vscope)
function fscope(){
  var vscope = 'local';    // 지역변수 vscope를 선언하고 값을 넣는다.
  }                       
 fscope();               // 지역변수가 선언되고 값이 들어간다.
alert(vscope);          // 전역변수를 바꾸지 않아 global 출력
function fscope2(){
vscope = 'local';         // 전역변수 vscope 값 변경
}
fscope2();            // 전역변수 값 변경
alert(vscope);       // 전역변수가 바뀌어 local 출력
</script>
</body>
</html>

💽 유효범위의 효용

<!DOCTYPE html>
<html>
<head>
<body>
<script type="text/javascript">
function a (){
  var i = 0
}
for(var i = 0; i < 5; i++){
  a();
  document.write(i);
}
   </script>
</body>
</html>

💎 이렇게 코드를 작성하면 결과는 0,1,2,3,4로 나오지만, 함수선언부분의 var을 빼주면 i의 값이 계속 0으로 초기화되므로 페이지가 게속 로딩됩니다.
var이 붙어있지 않다는 것은 i의 값이 전역변수를 의미하는 것이기 때문입니다. 이렇게 변수 이름은 같지만 각각의 취지가 다를 때 심각한 상황이 발생할 수 있고, 코드가 복잡하거나 양이 많아진다면 이런 문제를 찾기가 매우 어려워집니다. 이런 문제를 완화하기 위해서는 지역변수/전역변수 라는 유효범위가 생긴 것입니다.

📏 전역변수를 사용하는 법

<!DOCTYPE html>
<html>
<head>
<body>
<script type="text/javascript">
  var MYAPP = {}
  MYAPP.calculator = {
    'left' : null,
    'right' : null
  }
  MTAPP.coordinate = {
    'left' : null,
    'right' : null
  }                                 
  MTAPP.calculator,left = 10;
  MYAPP.calculator.tight = 20;
  function sum(){
    return MYAPP.calculator.left + MYAPP.calculator.right;
  }
  document.write(sum());
}
}())
   </script>
</body>
</html>

💎 불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용합니다.

✂ 전역변수를 사용하고 싶지 않다면 ❓

<!DOCTYPE html>
<html>
<head>
<body>
<script type="text/javascript">
(function(){               // 전역변수를 사용하고 싶지 않을 때
var MYAPP = {}
MYAPP.calculator = {
  'left' : null,
  'right' : null
}
MTAPP.coordinate = {
  'left' : null,
  'right' : null
}
MTAPP.calculator,left = 10;
MYAPP.calculator.tight = 20;
function sum(){
  return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());
}
}())
// 익명함수를 통해서 지역변수로만 사용하게 합니다.
 </script>
</body>
</html>

💎 전역변수를 사용하고 싶지 않다면 위와 같이 익명함수를 호출함으로서 이러한 목적을 달성할 수 있습니다.

📐 유효범위의 대상

 <!DOCTYPE html>
<html>
<head>
 <tittle></tittle>
<body>
<script type="text/javascript">
for(var i = 0; i < 1; i++){
 var name = 'coding everybody';
}
alert(name);     // code가 출력됩니다.
// 자바스크립트는 함수의 안에 선언된 변수만 지역변수가 되고 for문이나 if문 같은 곳에서 선언된 변수는 전역변수로 선언됩니다. 
// 다른 언어는 for문이나 if문 같은 곳에서 선언된 변수는 지역변수로 선언됩니다. 따라서 위의 코드는 실행되지 않습니다. 
</script>
</body>
</html>

📌 정적 유효범위

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖습니다. 이러한 유효범위의 방식을 정적 유효범위(static scoping),혹은 렉시컬(lexical scoping)이라고 합니다.

<!DOCTYPE html>
<html>
<head>
<body>
<script type="text/javascript">
var i = 5;
function a(){
var i = 10;
b();
}
function b(){
document.write(i);
}
a()
</script>
</body>
</html>

💎 위의 예시의 결과값은 5가 출력됩니다.
b가 사용되는 시점에서의 i가 아닌, 정의될 때의 시점에서의 i를 출력하기 때문입니다
정의될 때의 변수가 사용됩니다. (사용될 때가 아닌)

profile
backend developer

0개의 댓글