[함수] - 함수의 유효범위

• 함수의 유효범위 (function scope)
  • 블록 내에서 정의된 변수를 블록( { } ) 외부에서는 접근할 수 없다.
  • 블록을 기준으로 하는 유효범위를 블록 단위의 유효범위라 한다.

  • // 예제
    
    // x, y, name을 전역 변수로 선언
    var x = 10, y = 20;
    
    // sub()를 전역 함수로 선언
    function sub() {
        return x - y;  // 전역 변수인 x, y에 접근
    }
    
    document.write("전역 함수에서 x - y의 값은 " + sub() + "입니다.<br>");
    // 전역 함수에서 x - y의 값은 -10입니다.
    
    // parentFunc()을 전역 함수로 선언
    function parentFunc() {
        var x = 1, y = 2;  // 전역 변수와 같은 이름으로 선언하여 전역 변수의 범위를 제한
        function add() {  // add()함수는 내부 함수로 선언된
            return x + y;  // 전역 변수가 아닌 지역 변수 x, y에 접근
        }
        return add();
    }
    
    document.write("내부 함수에서 x + y의 값은" + parentFunc() + "입니다");
    // 내부 함수에서 x + y의 값은 3입니다.

• 함수 호이스팅 (hoisting)
  • 함수의 유효범위
    • 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 의미
    • 유효 범위의 적용이 변수가 선언되기 전에도 똑같이 적용

    • // 예제
      
      var globalNum = 10;  // globalNum을 전역 변수로 선언
      
      function printNum() {
          documentwrite("지역 변수 globalNum선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>");
          // 지역 변수 globalNum선언 전의 globalNum의 값은 undefined입니다.
          
          var globalNum = 20; // globalNum을 지역 변수로 선언
          document.write("지역 변수 globalNum선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
          // 지역 변수 globalNum선언 후의 globalNum의 값은 20입니다.
      }
      
      printNum();

    • // 호이스팅 후의 코드
      
      var globalNum = 10;
      
      function printNum() {
          var globalNum;  // 함수 호이스팅에 의해 변수의 선언 부분이 함수의 맨 처음 부분으로 이동됨
          document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>");
          // 지역 변수 globalNum 선언 전의 globalNum의 값은 undefined입니다.
          
          globalNum = 20;
          document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.");
          // 지역 변수 globalNum 선언 후의 globalNum의 값은 20입니다.
      }
      
      printNum();