자바스크립트 함수의 지역 변수와 전역 변수 차이점

자바스크립트 함수의 지역 변수는 소속 함수 코드 블록에서만 생존하는 변수를 말합니다. 지역 변수는 함수 밖에서는 존재하지 않으므로 중복 사용할 수 있으며, 외부에서 호출할 수 없습니다.

자바스크립트 함수의 지역 변수

지역 변수(local variable)는 소속 함수의 코드 블록 사이에서만 쓰이는 등 사용되는 범위가 좁습니다. 이 경우 함수가 종료되면 지역 변수도 소멸됩니다.

함수 내부에서 선언된 변수명과 변수값은 함수 외부에서는 사용할 수 없습니다. 해당 변수는 함수라는 코드 블록에서만 지역적으로 사용되기 때문입니다.

print()라는 단순 출력 함수의 내부에서 선언된 num 변수는 함수 밖에서는 존재하지 않는 값입니다. 그래서 함수 외부에서 num 변수는 출력을 해도 아무런 결과를 주지 않습니다.

<script>
  //단순 출력 함수 선언
  function print ()
  {
    //함수 내부 num 지역 변수 선언
     var num = "Hello World!";
     document.write(num);
  }

  //num 변수를 외부에서 출력
  document.write(num);
</script>

결과

오류

따라서 여러 함수 내부에 있는 변수명은 서로 같아도 상관이 없습니다. 서로 밖으로 나오면 존재하지 않는 값이기 때문입니다.

num 이라는 변수를 plus() 함수, multi() 함수에서 사용했지만 모두 개별적으로 작동합니다.

<script>
  //덧셈 함수 선언 및 num 지역 변수 사용
  function plus ( a, b )
  {
    var num = a + b;

    //num 지역 변수 출력
    document.write(num, "<br>");
  }

  //곱셈 함수 선언 및 num 지역 변수 사용
  function multi ( c, d )
  {
    var num = c * d;

    //num 지역 변수 출력
    document.write(num, "<br>");
  }

  //덧셈 함수 호출
  plus ( 3, 7);

  //곱셈 함수 호출
  multi ( 2, 6);
</script>

결과

10
12

자바스크립트 함수의 전역 변수

자바스크립트 함수의 전역 변수(global variable)은 여러 코드 블록에서 동시에 쓰일 수 있는 변수를 말합니다. 보통 함수 밖에서 선언된 변수의 경우 함수 내부의 코드 블록에서도 동시에 사용할 수 있습니다. 이런 변수를 전역 변수라고 합니다.

<script>
  //전역 변수 선언
  var string = "Hello World!";

  //함수 선언 및 전역 변수 string 사용
  function print()
  {
    document.write(string);
  }

  //함수 호출
  print();
</script>

결과

Hello World!

함수 외부에서 선언된 전역 변수를 함수 내부에서 끌어다 쓰는 모습입니다.