j12. 자바스크립트 변수의 유효 범위

자바스크립트 변수의 유효 범위

자바스크립트 에서는 객체 (objects) 와 함수 (functions) 들도 또한 변수 (variables) 들 입니다.

자바스크립트 에서의 유효 범위 (scope, 스코프) 는, 접근할 수 있는 (access to) 변수들, 객체들, 함수 들의 설정입니다.

자바스크립트는 함수 유효 범위 (function scope) 를 갖는데, 이 유효 범위는 함수의 내에서, 변경될 수도 있습니다.

---

자바스크립트 지역 변수 (Local Variables) 들은, 자바스크립트 함수 (JavaScript function) 내에 선언되고, 그 함수에 대해 지역적 (LOCAL) 이 됩니다.

이 지역 변수 (Local variables) 들은 지역 유효 범위 (local scope) 를 갖고, 이들은 그 함수 내에서만 접근이 가능합니다.

<p id="myID01"></p>

<script>
myFunction();
document.getElementById("myID01").innerHTML =
"함수 바깥에서 함수 내의 지역변수가 다음과 같이 보이지 않습니다: " + typeof chair;

function myFunction() {
var chair = "팔걸이 의자";
}
</script>

위와 같이 지역 변수들 (local variables) 은 단지 그들이 정의된 함수 내부에서만 인식 되므로, 같은 이름을 갖는 변수 들도 다른 함수 내에서 사용될 수 있습니다.

지역 변수들 (Local variables) 은 함수가 시작될 때 생성되고, 그리고 함수가 끝나면 삭제됩니다.

---

자바스크립트 전역 변수 (Global Variables) 는 함수의 바깥에 선언되고, 전역적 (GLOBAL) 이 됩니다.

전역 변수 (global variable) 는 전역 유효 범위 (global scope) 를 갖고, 하나의 웹 페이지 상의 모든 스크립트 및 함수들 (all scripts and functions) 이 접근 할 수 있습니다.

<p id="myID02"></p>

<script>
var chair2 = "팔걸이 의자";
myFunction2();

function myFunction2() {
document.getElementById("myID02").innerHTML =
"함수 바깥의 전역변수가 다음과 같이 보입니다: " + typeof chair2;
}
</script>

---

아래 처럼 변수가 선언되지 않았다면, 함수 내에서 값이 할당 되었더라도, 자동적으로 전역 변수 (GLOBAL variable) 가 됩니다.

만일 "선언되지 않은" 변수에 값을 할당하면, 이 변수는 자동적으로 전역변수 (GLOBAL variable) 가 될 것입니다.

아래 예에서, 함수 내에서 실행 되었을 때 조차도, chair3 은 자동으로 전역 변수로서 간주 될 것입니다.

<p>아래 처럼 변수가 선언되지 않았다면, 함수 내에서 값이 할당 되었더라도, 자동적으로 전역 변수 (GLOBAL variable) 가 됩니다.
</p>

<p id="myID3"></p>

<script>
myFunction3();
document.getElementById("myID3").innerHTML =
"함수 내의 변수를 다음과 같이 볼수 있습니다. " + chair3;

function myFunction3() {
chair3 = "다리가 4개인 의자";
}
</script>

---

자바스크립트 변수의 수명 주기 (lifetime of a JavaScript variable) 는 선언 되었을 때 수명주기 (lifetime) 가 시작됩니다.

지역 변수 (Local variables) 는 함수가 종료될 때 삭제 됩니다.

전역 변수 (Global variables) 는 해당 페이지가 닫힐 때 삭제됩니다.

---

함수 인수 (Function arguments) 는 함수내에서만 사용되는 지역 변수 (local variables) 로 동작합니다.

---

HTML 에서 모든 전역 변수 (all global variables) 들은 윈도우 변수들이 됩니다.

HTML 에서 전역 유효 범위 (global scope) 는 윈도우 객체 (window object) 입니다.

모든 전역 변수 들 (All global variables) 은 윈도우 객체 (window object) 에 속합니다.

<p>HTML 에서 모든 전역 변수 (all global variables) 들은 윈도우 변수들이 됩니다.
</p>

<p id="myID4"></p>

<script>
myFunction4();
document.getElementById("myID4").innerHTML =
"모든 전역 변수 들은 윈도우 객체에 속합니다: " + window.chair4;

function myFunction4() {
chair4 = "윈도우 객체에 속하는 전역 변수로서의 chair4";
}
</script>

---

[광고] Udemy 동영상 강의로 보기