자바스크립트 지역변수, 전역변수, 로컬, 글로벌 변수 javaScript local variables, global variables, 변수의 범위

자바스크립트 지역변수, 전역변수, 로컬, 글로벌 변수 javaScript local variables, global variables, 변수의 범위

 

- 자바스크립트 범위

범위는 변수가 접근 할 수 있는 집합이다.

 

- 자바스크립트 로컬(지역) 변수 (javaScript Local variables)

자바스크립트 function 내에 선언되는 변수를 로컬(지역)변수라 한다.

로컬변수는 그 로컬범위를 갖는다. 이 변수들은 오직 function 안에서만 접근 할 수 있다.

 

예)

 

// code here can not use carName
function myFunction() {
    var carName = "Volvo";
    // code here can use carName
}

 

carName 이라는 변수는 오직 myfunction() 내에서만 접근이 가능하다.

function 밖에서는 접근 할 수 없다.

 

예)

 

<script>
myFunction();
document.getElementById("demo").innerHTML = "I can display " + typeof carName;  //ⓐ

function myFunction() {
    var carName = "Volvo";
}
</script>

 

위의 예를 보자. 스크립트 내에서 myFunction()함수가 실행되어 로컬변수 carName 에는 "Volvo" 값이 들어있다.

하지만 ⓐ를 보면 function 밖에서 접근을 하기 때문에 로컬변수인 carName의 타입은 undefined가 된다.

 

로컬변수는 오직 function 안에서만 인식이 되기 때문에

같은 이름의 변수들은 각 다른 function 들 내에서 사용될 수 있다.

로컬변수는 function 시작시 생성되고 function이 완료되면 삭제된다.

 

- 자바스크립트 글로벌(전역) 변수 (javaScript global variables)

function 밖에서 선언되는 변수는 글로벌 변수가 된다.

글로벌 변수는 글로벌 범위를 갖는다. 웹페이지 내의 모든 스크립트와 function에서 접근 할 수 있다.

 

예)

 

var carName = " Volvo";
// code here can use carName
function myFunction() {
    // code here can use carName 
}

 

carName이 function 밖에서 선언된 글로벌 변수이기 때문에 function 내에서도 사용이 가능하다.

 

- 자동적으로 글로벌 변수 선언

만약 아직 선언되지 않은 변수에 값을 할당 한다면, 이것은 자동적으로 글로벌 변수가 된다.

아래의 예를 보면 carName은 function 내에서 실행되었지만 글로벌 변수로써 function 밖에서도 접근 할 수 있다.

 

예)

 

// code here can use carName
function myFunction() {
    carName = "Volvo";
    // code here can use carName
}

 

- 자바스크립트 변수의 생명주기 (The lifetime of javaScript variables)

자바스크립트 변수의 생명주기는 변수가 선언되면서 시작된다.

로컬변수는 함수가 완료되면 끝이나고

글로벌변수는 그 페이지가 닫히면 끝이 난다.

 

- function의 파라메터(인수)

function의 파라메터 값은 function 내의 지역변수로서 역할한다.

 

 

----20170601 추가

생명주기가 끝난 변수에 접근하는 방법 또한 있다.

클로저를 사용하거나 부모의 this를 전역변수인 window객체로 설정하면 된다.

아래의 Link를 참고하자.

 

Link1 : javascript closure 자바스크립트 클로저의 개념 쉽게 이해. 클로저란?

 

Link2 : 클로저 사용시 주의할 점. 클로저 유의사항, 반복문, 실행시점

 

Link3 : 호출한 부모 함수의 변수 값 사용하기. this 활용