지역변수 전역변수 차이

지역변수(Local Variable)와 전역변수(Global Variable)의 차이는 만들어지는 위치이다. 만드는 방법은 동일하지만 어느 위치에 만들어지냐에 따라서 전역변수와 지역변수로 구분되게 된다.

 

<script>
  전역 영역
  function 함수이름() {
    지역 영역
  }
</script>

 

아래 예시 코드는 1번부터 4번까지 모두 같은 이름의 fruit 변수를 출력한다.

let fruit = "사과";
function fruitFunction1() {
  let fruit = "바나나";
  document.write(`2번 : ${fruit} <br>`);
}
function fruitFunction2() {
  fruit = "딸기";
  document.write(`3번 : ${fruit} <br>`);
}

document.write(`1번 : ${fruit} <br>`);
fruitFunction1();
fruitFunction2();
document.write(`4번 : ${fruit} <br>`);

 

결과값을 확인해보자

 

let fruit = "사과"; 
function fruitFunction1() {
  let fruit = "바나나"; 
  document.write(`2번 : ${fruit} <br>`); //지역변수
}
function fruitFunction2() {
  fruit = "딸기"; 
  document.write(`3번 : ${fruit} <br>`); //전역변수
}

document.write(`1번 : ${fruit} <br>`); //전역변수
fruitFunction1();
fruitFunction2();
document.write(`4번 : ${fruit} <br>`); //전역변수

 

1번 fruit는 전역변수 사과가 출력된다.

다음 fruitFunction1함수가 실행되면서 2번에 지역변수 바나나가 출력되고

fruitFunction2 함수가 실행되면 제일 상단에 만들어진 전역변수 fruit에 값을 대입하기 때문에 전역변수 fruit의 값이 딸기로 변경된다. 3번에 fruit을 출력은 함수 안에서의 출력이지만 fruitFunction2함수에서 fruit변수를 선언하지 않았기 때문에 전역에서 fruit함수를 찾아서 호출하게 되고 새롭게 대입된 값인 딸기가 호출된다.

4번에서 역시 전역변수를 호출하는데 1번과 다른 점은 fruitFunction2함수를 거치면서 새로운 값 딸기가 대입된 전역변수 fruit를 호출한다는 점이다.

 

 

 

지역변수와 전역변수의 생명주기

전역변수의 생명주기는 자바스크립트가 실행되는 페이지가 브라우저에서 실행되고 있는 동안은 사라지지 않는다. 반면 지역변수는 함수가 호출될 때 생성되고 종료될 때 소멸된다.