[Basic] JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★

1. JS 범위 개념
2. 지역변수 (Local Variables)
3. 전역변수 (Global Variables)
4. JS 변수 유효기한
5. 독립변수 (Arguments)
6. HTML 전역변수

JS 범위 개념

1.
JS 범위 (Scope)는 변수의 유효 접근 범위에 관한 것으로,
JS에서 객체나 함수 역시 변수 일종으로, 유효접근범위 존재.

2. 

JS 범위는 변수, 객체, 함수가 유효하게 사용될 수 있는 작전반경 의미. 

4. 

JS는 변수/객체/함수는 나름의 유효범위 갖으며, 그 범위에 따라 출력 내용 다를 수 있음.

지역변수 (Local Variables)

 

<p id="homzzang"></p>

<script>

hz();

document.getElementById("homzzang").innerHTML = site ; 

function hz() {

    var site = "홈짱닷컴"; // 지역변수. 함수 밖에서 접근 불가.

}

</script>

결과값: 아무 것도 출력 안 됨.

---

 

1. 

JS 함수 안에서 var 키워드로 선언된 변수는 함수 내에서만 유효.

2.
지역변수는 지역 범위 갖음. 지역 변수는 오직 함수 내에서만 접근 가능. 

3.
지역변수는 함수 내에서만 유효하므로, 다른 함수에서 동일한 변수 사용 가능.

4.
지역변수는 함수 시작할 때 var 키워드로 선언과 동시에 생성되서, 함수 완성될 때 지워짐.

 

전역변수 (Global Variables)

 

<p id="homzzang"></p>

<script>

var site = "홈짱닷컴";// 전역변수. 함수 안과 밖 어디서든 접근 가능.

hz();

function hz() {

    document.getElementById("homzzang").innerHTML = site; // 홈짱닷컴

}

</script>

 

결과보기

---

 

1. 

함수 바깥에서 선언된 변수는 전역변수.

2. 

전역변수의 작전 반경은 전역이라, 웹페이지 상의 모든 JS 코드 및 함수가 전역변수에 접근 가능. 

 

3.

var 키워드 없이 선언된 변수는 자동으로 전역변수됨. (아래 예제)
함수 안이든 바깥이든 마찬가지.

 

---

 

<p id="homzzang"></p>

<script>

hz();

document.getElementById("homzzang").innerHTML =site;

function hz() {

    site = "홈짱닷컴"; // 전역변수 (∵ 함수 내에서 선언되었지만, var 키워드 없이 선언)

}

</script>

결과값: 홈짱닷컴

JS 변수 유효기한

 

1. 

JS 변수는 선언과 동시에 생성.

2. 

지역변수 : 함수 끝날 때 삭제, 

전역변수 : 사용자가 웹페이지 닫을 때 삭제.

 

독립변수 (Arguments)

 

함수의 독립변수(Argument)나 매개변수(Parameters)는 함수 내에서 지역변수로 작동.

 

HTML 전역변수